Bootstrap框架的學習教程詳解(二)
編輯：關於JavaScript
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
一、下載Bootstrap
Bootstrap （當前版本 v3.3.0）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
下載地址：http://v3.bootcss.com/getting-started/#download
PS：其實我們不用下載bootstrap也可以使用它：
Bootstrap 中文網 為 Bootstrap 專門構建了自己的免費 CDN 加速服務。基於國內雲廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。
二、預編譯版
下載壓縮包之後，將其解壓縮到任意目錄即可看到以下（壓縮版的）目錄結構：
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
PS：字體可以添加也可以不添加
三、實例一
<html lang="en"> <head> <!--這三個meta標簽必須在head頭三個--> <!--1、utf8中文--> <meta charset="utf-8"> <!--2、IE浏覽器的適配--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--3、適配到手機屏幕--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--title題目--> <title>First Template for Bootstrap</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!--導航條，nav標簽--> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"> <!--導航條內容--> <li class="active"><a href="home.html">首頁 <span class="sr-only">(current)</span></a></li> <li><a href="Java.html">JAVA</a></li> <li><a href="#">HTML</a></li> <li><a href="#">PS</a></li> </div> </nav> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/jquery.min.js"></script> <!-- Bootstrap核心js依賴於jQuery,所以要先引用jQuery--> <!-- Include all compiled plugins (below), or include individual files as needed --> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="js/bootstrap.min.js"></script> </body></html>
運行截圖如下圖所示：
四、實例二
柵格系統是Bootstrap的和具有優勢。采用的是流式的柵格系統，對寬度進行12等分。
<!--柵格系統， 全局CSS樣式-柵格系統 --> <!--柵格系統放在container容器中--> <div class="container" style="margin-top: 60px"> <!--添加一行占用12列，添加img--> <div class="row"> <!--javascript插件，添加carousel輪播圖--> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" > <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/sliders/pic1.png" /> <div class="carousel-caption"> <h3>College Team</h3> </div> </div> <div class="item"> <img src="img/sliders/pic2.jpg" /> <div class="carousel-caption"> <h3>College Life</h3> </div> </div> <div class="item"> <img src="img/sliders/pic3.png" /> <div class="carousel-caption"> <h3>Country Project</h3> </div> </div> <div class="item"> <img src="img/sliders/pic3_3.jpg" /> <div class="carousel-caption"> <h3>Hello World</h3> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <!--頁面分為左右兩部分 4：8--> <div class="row" style="margin-top: 10px"> <div class="col-sm-4"> <!--添加列表組件--> <div class="list-group" style="margin-bottom:0"> <a href="#" class="list-group-item active">看看>看看</a> <a href="Project_exp.html" class="list-group-item">看看</a> <a href="#" class="list-group-item">看看</a> <a href="#" class="list-group-item">看看</a> <a href="#" class="list-group-item">看看</a> <a href="#" class="list-group-item">看看</a> </div> <!--<div> <img src="img/class.gif"> </div>--> </div> <div class="col-sm-8"> <!--first--> <table id="first" class="table table-bordered table-striped table-hover table-condensed"> <tr class="active"> <td>看看</td> </tr> <tr class="success"> <td>看看</td> </tr> <tr class="warning"> <td>看看</td> </tr> <tr class="danger"> <td>看看</td> </tr> <tr class="info"> <td>看看</td> </tr> <tr class="active"> <td>看看</td> </tr> <tr class="success"> <td>看看</td> </tr> <tr class="danger"> <td>個人主頁（博客園）：<a href="https://home.cnblogs.com/u/chengxs/" target="_blank">https://home.cnblogs.com/u/chengxs/</a></td> </tr> <tr class="info"> <td>看看</td> </tr> <tr class="success"> <td>看看</td> </tr> <tr class="danger"> <td>看看。</td> </tr> </table> <!-- 添加分頁效果--> <nav> <ul class="pagination" style="margin: 0px 0px"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><a href="#first">1</a></li> <li><a href="#second">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </div>
效果如圖所示
以上所述是小編給大家介紹的Bootstrap框架的學習教程詳解(二),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！
小編推薦
熱門推薦