BootStrap初學者怎麼使用？
bootStrap是幹嘛的？有什麼用處？
我們在開發前端頁面的時候，如果每一個按鈕、樣式、處理瀏覽器相容性的程式碼都要自己從零開始去寫，那就太浪費時間了。所以我們需要一個框架，幫我們實現一個頁面的基礎部分和解決一些繁瑣的細節，只要在它的基礎上進行個性化定製就可以了。
Bootstrap 就是這樣一個簡潔、直觀、強悍的前端開發框架，只要學習並遵守它的標準，即使是沒有學過網頁設計的開發者，也能做出很專業、美觀的頁面，極大地提高了工作效率。像下面這個漂亮的網站就是基於 Bootstrap 來開發的。
bootStrap怎麼用？
第一步、https://v3.bootcss.com/getting-started/#download 官網
下載解壓縮
這個bootStrap必須依賴jquery.min.js的存在，必須。
所以一併下載這個js 網址：http://www.jq22.com/jquery-info122
第二步、把外部檔案引入工程裡面
把bootStrap的css、font、js、下載的jquery.min.js一併複製到專案下面
我用的是myelispe
第三步、jsp頁面設定如下
注意這幾個檔案的前後順序，如果不對，會導致頁面無法正常執行。
- 先引入 bootstrap.min.css （Bootstrap的樣式表文件）
- 然後引入自己寫的 css 檔案（style.css）
- 然後引入 jQuery（javascript 庫）
- 最後引入 bootstrap.min.js 程式檔案
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!--這個lang="zh-CN"是轉化為html5的版本 --> <html lang="zh-CN"> <head> <base href="<%=basePath%>"> <title>學習bootstrap案例</title> <!-- 這個是自適應各種解析度的螢幕 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/style.css"/> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head>
第三步、使用bootStrap的樣式表，
bootstrap強大之處，在於，別人都設計好了的功能，你只需要熟悉別人的規則就可以直接使用！
小例子：
開啟樣式表bootstrap.css，你可以看到如下.btn-primary 顯而易見這是一個按鈕樣式
在jsp頁面寫上
<body>
<button class="btn-primary">按鈕</button>
</body>頁面呈現的效果如下：
重新整理頁面，你會看到一個藍色的按鈕。不需要自己寫一行 CSS 程式碼，只要在頁面裡面給某個元素指定一個 class ，就可以直接顯示出預定的樣式—— 這就是使用 Bootstrap 前端框架的魔力。
練習如下：
做一個這樣的頁面：
首先：按照正常的不加css樣式效果的佈局只能呈現如下效果：
沒有輪播圖特效，佈局不工整
雖然我們可以自己寫css樣式，讓頁面變得精美起來，但是太耗時間了。
如果來學習一下bootStrap吧！
使用導航條元件
導航條位於頁面最頂部，提供整個網站所有頁面的連結，
<!-- 導航 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="">微信公眾號管家</a></li>
<li><a href="">首頁</a></li>
<li><a href="">關於</a></li>
<li><a href="">登入</a></li>
</ul>
</div>
</nav>- 新增一個
nav標籤，並設定class為navbarnavbar-default，role為navigation。 - 然後在裡面新增一個類名為
container-fluid的div，用來容納導航條裡的其他元素（連結、按鈕等）。 - 新增一些導航連結
<li>，然後把第一個<li>的class指定為active，表示啟用狀態。
重新整理頁面，一個漂亮的導航條就誕生了！我們只是寫了一些 HTML 程式碼，沒有寫一句 CSS 程式碼，節約資源
這個時候有用jsp來聯絡的同志們，是出不來這個效果的，因為<nav></nav> 是html5的新標籤，而我們用的jsp一般都是html 4.01版本的。
至於怎麼轉換，看這個部落格有詳細的介紹：https://blog.csdn.net/qq_37591637/article/details/84027218
到這裡，大家都會有疑問了，class="navbar navbar-default" 是什麼意思？
意思是同時擁有兩個屬性，有navbar的樣式，也有navbar-default的樣式；
我不熟悉BootStrap的css樣式，都不知道它的樣式名稱，怎麼辦？
菜鳥教程，多練練，就好了；
還有BootStrap教程https://v3.bootcss.com/components/#nav
輪播圖的實現
Bootstrap 自帶了一個輪播元件—— Carousel
<!--輪播圖 -->
<!-- 最主要的是三部分indicators(指標)、inner(內容)、carousel-control（導航） -->
<div class="carousel slide" id="lf" data-ride="carousel">
<ol class="carousel-indicators">
<!-- •data-target 屬性：
取值 lf 定義的 ID 名或者其他樣式識別符，
並且將其定義在輪播圖計數器的每個 li 上。
data-slide-to 屬性：
用來傳遞某個幀的下標，比如 data-slide-to="2"，
可以直接跳轉到這個指定的幀（下標從0開始計），
同樣定義在輪播圖計數器的每個 li 上。 -->
<li data-target="#lf" data-slide-to="0" class="active"></li>
<li data-target="#lf" data-slide-to="1"></li>
<li data-target="#lf" data-slide-to="2"></li>
<li data-target="#lf" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="imgs/one.jpg" />
<div class="carousel-caption">
<p>【寒假/春節預售】北海道5日4晚自由行（早去午回航班+4晚東橫INN 札幌薄野南酒店住宿）</p>
</div>
</div>
<div class="item">
<img src="imgs/two.jpg" />
<div class="carousel-caption">
<p>【暢遊關西】大阪5日自由行（吉祥航空優選時刻★下午去晚上回★免費托執行李額46KG+贈送WIFI+逛古城+遊環球影城+心齋橋買不停）</p>
</div>
</div>
<div class="item">
<img src="imgs/three.jpg" />
<div class="carousel-caption">
<p>【春節寒假預售】九州6日自由行（往返機票+西瓜卡 回程行李額免費升級至25KG） </p>
</div>
</div>
<div class="item">
<img src="imgs/four.jpg" />
<div class="carousel-caption">
<p>【寒假/春節預售】大阪5日4晚自由行●宿4晚惠美須町親子主題公寓酒店（近心齋橋+40㎡空間+貼心設施+2018年新開業） </p>
</div>
</div>
<a class="left carousel-control" href="#lf" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#lf" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>效果圖如下：
製作圓角圖片案例
知識點：
柵格佈局
想想看，如果是你自己寫 CSS ，準備怎樣實現這個均等排列的效果？例如下面通過設定固定寬度/百分比來處理：
.item { float:left, width: 300px; /*或者 width: 33%*/ }- 1
如果一行要顯示4個、6個、或者更多呢？這樣計算起來就太不靈活了（100/6 等於 16.6666666……）。
其實我們並不關心每一份的寬度是多少畫素/百分比，我們只關心能不能自動地平均劃分成多少份， Bootstrap 的柵格系統佈局就是為了實現自動計算每一份的寬度而誕生的。
柵格可以理解為一個安全門，它的總長度可以拉長，可以縮短，但是總的間隔數量是不變的，並且所有間隔的寬度都一樣。
這個伸縮的過程，像不像我們把瀏覽器拉寬、變窄的操作？ Bootstrap 的柵格系統規定了每個頁面的寬度被平均劃分為 12 等份，不管整個頁面的寬度是 1000畫素，還是500畫素，都會自動計算每一份（1/12）的寬度是多少。
通過給柵格佈局內部的元素指定 class 為 col-md-份數 ，來告訴它的寬度佔據這12份裡面的幾份。
例如下面的程式碼中，有3個 div 的 class 為 col-md-4（先不管中間那個 -md- 是什麼，關注這個數字就好），算一算4 + 4 + 4 是不是正好等於 12？
<!-- 案例 -->
<div class="container">
<div class="row">
<div class="col-md-4">
<img alt="" src="imgs/a.jpg" class="img-circle img-size">
<p>日本三日遊！</p>
</div>
<div class="col-md-4">
<img alt="" src="imgs/b.jpg" class="img-circle img-size">
<p>泰國三日遊！</p>
</div>
<div class="col-md-4">
<img alt="" src="imgs/c.jpg" class="img-circle img-size">
<p>緬甸七日遊！</p>
</div>
</div>
</div>效果圖如下：
我的資源包裡面有完整的程式碼；
https://download.csdn.net/download/qq_37591637/10782314
原創部落格：https://blog.csdn.net/qq_14991385/article/details/60755620