詳解Bootstrap 學(xué)習(xí)(一)入門
一:什么是Bootstrap?
Bootstrap是目前留下的前端框架之一,具備已下特點(diǎn):
- 基于HTML、CSS、JavaScript開發(fā)的;
- 樣式展現(xiàn)方面定義了大量全局樣式、列表、按鈕等樣式組件;
- 特效方面實(shí)現(xiàn)了輪播、菜單等常用的js控件;
- 樣式采用less編寫,js調(diào)用了jquery庫(kù);
- 來自Twitter,現(xiàn)在委托保管再github上。
Bootstrap適用于網(wǎng)站的開發(fā),不適用于管理系統(tǒng)(例如ERP)開發(fā),它提供的css組件比較多,js控件比較少,因此可以稱bootstrap是一套css框架。
二:下載:
官網(wǎng)地址:
Bootstrap3下載連接:
https://v3.bootcss.com/getting-started/
三:基本模板,入門:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面,任何其他內(nèi)容都*必須*跟隨其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="external nofollow" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢(media queries)功能 --> <!-- 警告:通過 file:// 協(xié)議(就是直接將 html 頁(yè)面拖拽到瀏覽器中)訪問頁(yè)面時(shí) Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
文件版本:
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link href="./bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="external nofollow" rel="stylesheet"> <title>Insert title here</title> </head> <body> </body> <script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </html>
注:之上所有引用的js都是由官方提供,我們自己可以用自己下載好的本地文件添加進(jìn)去即可使用!
以上所述是小編給大家介紹的Bootstrap入門學(xué)習(xí)詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery中文入門指南,翻譯加實(shí)例,jQuery的起點(diǎn)教程
jQuery中文入門指南,翻譯加實(shí)例,jQuery的起點(diǎn)教程...2007-01-01ASP.NET實(shí)現(xiàn)Repeater控件的數(shù)據(jù)綁定
這篇文章介紹了ASP.NET實(shí)現(xiàn)Repeater控件數(shù)據(jù)綁定的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07javascript開發(fā)技術(shù)大全 第2章 開始JAVAScript之旅
1st JavaScript Editor ,除了有著色處,還有html標(biāo)簽、屬性、javascript事件、函數(shù),另外還可調(diào)用外部編輯來編輯網(wǎng)頁(yè),也可將常用瀏覽器內(nèi)置在窗口中。2011-07-07javascript 數(shù)組學(xué)習(xí)資料收集
由于javascript 數(shù)組應(yīng)用比較廣泛,使用的朋友越來越多,腳本之家特為大家整理了一些js 數(shù)據(jù)方面的學(xué)習(xí)資料,大家看完了,基本上應(yīng)該對(duì)數(shù)組有個(gè)理解了。2010-04-04