Bootstrap框架的學習教程詳解(二)

2019-11-20 08:43:01

字體：大中小

來源：轉載

供稿：網友

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

一、下載Bootstrap

Bootstrap （當前版本 v3.3.0）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。

下載地址：http://v3.bootcss.com/getting-started/#download

PS：其實我們不用下載bootstrap也可以使用它：

Bootstrap 中文網為 Bootstrap 專門構建了自己的免費 CDN 加速服務?；趪鴥仍茝S商的 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  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>

效果如圖所示