Bootstrap入門教程一Hello Bootstrap初識
一、Bootstrap簡介
Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt開發(fā)的,它在 jQuery的基礎(chǔ)上進(jìn)行了更為個性化和人性化的完善,形成一套自己獨有的網(wǎng)站風(fēng)格,并兼容大部分jQuery插件,為實現(xiàn)快速開發(fā)提供了一套前端工具包,包括豐富的布局、柵格、豐富的Web組件和jQuery插件等,并能通過Less進(jìn)行樣式定制。
二、Hello Bootstrap
1.建立項目目錄結(jié)構(gòu),新建app、css、font、img和js目錄,其中app存放angular相關(guān)子模板和控制器。向css目錄中拷貝入ie10-viewport-bug-workaround.css,向js目錄中拷貝入ie8-responsive-file-warning.js、ie-emulation-modes-warning.js和ie10-viewport-bug-workaround.js,這幾個文件是讓bootstrap在ie瀏覽器中針對ie的兼容性做的優(yōu)化。
?
2.新建index.html頁面,在中引入bootstrap.css及兼容ie的css:

3.在底部依次引入jquery.js、bootstrap.js及兼容ie的js:
?
4.編寫頁面內(nèi)容,先在標(biāo)簽下加入<div class="container"></div>,然后在其中插入具體頁面代碼,本例包括頂部導(dǎo)航和一個,完整代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mac.Manon">
<link rel="icon" href="../../favicon.ico">
<title>Hello Bootstrap</title>
<!-- 引入Bootstrap樣式 -->
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!--對IE特定版本的兼容性處理 開始-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Just for debugging purposes. Don‘t actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--對IE特定版本的兼容性處理 結(jié)束-->
<!-- 本模版專用相關(guān)樣式 -->
<link href="css/navbar.css" rel="stylesheet">
</head>
<body>
<!--container容器 開始-->
<div class="container">
<!-- 導(dǎo)航 開始 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Buyinplay</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!--導(dǎo)航 結(jié)束-->
<!-- 正文 開始 -->
<div class="jumbotron">
<h1>Hello Bootstrap !</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View detail docs »</a>
</p>
</div>
<!--正文 結(jié)束-->
</div>
<!--container容器 結(jié)束-->
<!--引用js資源 開始-->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!--引用js資源 結(jié)束-->
</body>
</html>
效果如下:

三、參考資源
官網(wǎng):http://getbootstrap.com
官網(wǎng)中文站: http://www.bootcss.com
教程資源:http://www.runoob.com/bootstrap/bootstrap-page-header.html
以上所述是小編給大家介紹的Bootstrap入門教程一Hello Bootstrap初識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript中的for...of和for...in循環(huán)容易遇到的問題及解決方法總結(jié)
在 JavaScript 編程中,for...of 和 for...in 是常用的循環(huán)語法,但它們在使用時可能會引發(fā)一些意想不到的問題,本文將分享我在使用這兩種循環(huán)時所遇到的坑和經(jīng)驗,需要的朋友可以參考下2023-08-08
javascript實現(xiàn)判斷鼠標(biāo)的狀態(tài)
這篇文章主要介紹了javascript實現(xiàn)判斷鼠標(biāo)的狀態(tài)的相關(guān)代碼,十分簡單實用,有需要的小伙伴可以參考下。2015-07-07
javascript一個無懈可擊的實例化XMLHttpRequest的方法
由于IE新舊版本以及與其他瀏覽器在ajax技術(shù)上的不同,往往需要對不同的瀏覽器做不同的處理,除了笨拙的瀏覽器嗅探技術(shù),大約也就是對象檢測技術(shù)可用了。2010-10-10
Javascript下的urlencode編碼解碼方法附decodeURIComponent
而本文,就大概說說如何在js中通過系統(tǒng)自帶的函數(shù)去解決這個問題。2010-04-04
超漂亮的Bootstrap 富文本編輯器summernote
Summernote 是一個簡單,靈活,所見即所得(WYSIWYG)的編輯器,基于 jQuery 和 Bootstrap 構(gòu)建。對bootstrap 文本編輯器相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-04-04
JS實現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義
本文主要介紹了JS實現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01

