Bootstarp總結
Bootstrap
Bootstrap，一個前端的開發框架， 來自Twitter，基於HTML、CSS、JavaScript，方便前端開發。css
是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。html
固然，這個主用於響應式網頁的開發。前端
響應式佈局
響應式和自適應的區別？
響應式：1套代碼
示例網站：https://www.intel.cn/content/www/cn/zh/homepage.html
https://worktile.com/
自適應：多套代碼，根據不一樣的設備加載不一樣的代碼
示例網站：大部分的網站都有，由於如今的人用手機太多了html5
響應式網頁的不足：
內容不宜過多，只適合一些展現類網站，代碼量變大了，複雜了。不能有過於複雜的動畫jquery
響應式/自適應網頁的測試：
1.瀏覽器自帶的模擬器
優勢：簡單方便
缺點：結果要進一步肯定
2.真實物理設備測試
iphone 4 4s 5 5s 5c 6 6p 6s 6sp 7 7p 8 x xr xs
安卓 同樣買一個
pad ipad 同樣買一個
windows
winphonecss3
優勢：測試真實可靠
缺點：成本高，測試任務量極大
3.電腦上自帶的手機模擬器效果bootstrap
響應式網站如何編寫：
1.必須聲明viewport（重點重點）
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2.使用流式佈局
float:left , display:inline-block
3.文字，圖片，容器...使用相對尺寸（70%，em，rem），不要使用絕對尺寸（px）
em是一個相對單位，相對父元素
rem是一個相對單位，相對於頁面的根元素，即html
谷歌瀏覽器的最小號字體爲12px，若是不足12，所有顯示爲12，別的瀏覽器沒有限制
font-size: 62.5%; 大部分瀏覽器的默認字體爲16px，62.5就是10pxwindows
font-size: 100px;
4.最重要的原則：媒體查詢技術 css3中的內容 media query
寫響應式的時候通常不須要去管高度，高度讓其本身去變化，響應式確定是不會有橫向的滾動條，縱向就不必定了瀏覽器
css3中的媒體查詢
根據不一樣的設備，查詢到不一樣的代碼，而後執行，不須要刷新前端框架
全局css樣式
網格系統
Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。
工做原理：
行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。
使用行來建立列的水平組。
內容應該放置在列內，且惟有列能夠是行的直接子元素。
預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。
步驟：
定義容器，至關於HTML的table，容器分爲container（有固定的寬度）、container-fluid（100%的寬度）
定義行，至關於HTML的tr，樣式：row
定義元素，指定該元素在不一樣的設備上佔用的格子數，樣式：col-設備代號-格子數目
xs：超小屏幕，手機，如，col-xs-12
sm：小屏幕，平板
md：中等屏幕，桌面顯示器
lg：大屏幕，大桌面顯示器
<!DOCTYPE html>
<!-- 1.指定語言的類型 -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 2.設置meta標籤，爲了兼容老版本的IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 3.必須項，設置視口 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>柵格系統</title>
<!-- 4.引入bootstrap的主文件 -->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
<!-- 5.處理兼容性的js文件
cssHack 條件註釋法 -->
<!--[if lt IE 9]>
<script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
<![endif]-->
<style>
div{
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- 「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中 -->
<div class="container">
<!-- 一行中有一列 -->
<div class="row">
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">col-md-2</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-5">col-md-5</div>
</div>
<div class="row">
<div class="col-md-6">col-md-6</div>
</div>
<div class="row">
<div class="col-md-7">col-md-7</div>
</div>
<div class="row">
<div class="col-md-8">col-md-8</div>
</div>
<div class="row">
<div class="col-md-9">col-md-9</div>
</div>
<div class="row">
<div class="col-md-10">col-md-10</div>
</div>
<div class="row">
<div class="col-md-11">col-md-11</div>
</div>
<div class="row">
<div class="col-md-12">col-md-12</div>
</div>
<!-- 一行中有多列 -->
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
<!-- 針對不一樣的屏幕進行設計 -->
<div class="row">
<div class="col-lg-3">col-lg-3</div>
</div>
<div class="row">
<div class="col-md-3">col-md-3</div>
</div>
<div class="row">
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-xs-3">col-xs-3</div>
</div>
<!-- 變寬 -->
<!-- 大屏幕的時候佔一份 -->
<!-- 中等屏幕的時候佔三分 -->
<!-- 小屏幕的時候佔六分 -->
<!-- 超小屏幕的時候佔十分 -->
<div class="row">
<div class="col-lg-1 col-md-3 col-sm-6 col-xs-10">寬度是能夠變化的</div>
</div>
<!-- 列的偏移 使用的是margin-->
<div class="row">
<div class="col-md-2">LOGO</div>
<!-- <div class="col-md-3"></div> -->
<div class="col-md-3 col-md-offset-7">
<input type="text" style="width: 100%" placeholder="請輸入你想搜索的內容">
</div>
</div>
<!-- 列的排序 使用的是相對定位中的left，是不會影響其餘的列的-->
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
<!-- 列的顯示和隱藏 -->
<div class="row">
<div class="col-xs-5 hidden-xs">col-xs-5</div>
</div>
</div>
<!--
.col-xs- 超小屏幕 手機 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面顯示器 (≥992px)
.col-lg- 大屏幕 大桌面顯示器 (≥1200px) -->
<!-- 6.引入jquery，由於bootstrap是依賴於jquery，因此jquery必須放在前面先加載 -->
<!-- 最好使用bootstrap本身帶的jquery -->
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
<!-- 7.引入bootstrap中所須要用到的JavaScript插件 -->
<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
</body>
</html>
排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 做爲其默認的字體棧。
使用 Bootstrap 的排版特性，您能夠建立標題、段落、列表及其餘內聯元素。
代碼
第一種是 <code> 標籤。若是您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
第二種是 <pre> 標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼應該使用 <pre> 標籤
確保使用 <pre> 和 <code> 標籤時，開始和結束標籤使用了 unicode 變體： < 和 >。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 實例 - 代碼</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p><code><header></code> 做爲內聯元素被包圍。</p>
<p>若是須要把代碼顯示爲一個獨立的塊元素，請使用 <pre> 標籤：</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>
</body>
</html>
表格
Bootstrap 提供了一個清晰的建立表格的佈局。下表列出了 Bootstrap 支持的一些表格元素：
| 標籤 | 描述 |
|---|---|
| <table> | 爲表格添加基礎樣式。 |
| <thead> | 表格標題行的容器元素（<tr>），用來標識表格列。 |
| <tbody> | 表格主體中的表格行的容器元素（<tr>）。 |
| <tr> | 一組出如今單行上的表格單元格的容器元素（<td> 或 <th>）。 |
| <td> | 默認的表格單元格。 |
| <th> | 特殊的表格單元格，用來標識列或行（取決於範圍和位置）。必須在 <thead> 內使用。 |
| <caption> | 關於表格存儲內容的描述或總結。 |
表格類
下表樣式可用於表格中：
| 類 | 描述 |
|---|---|
| .table | 爲任意 <table> 添加基本樣式 (只有橫向分隔線) |
| .table-striped | 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) |
| .table-bordered | 爲全部表格的單元格添加邊框 |
| .table-hover | 在 <tbody> 內的任一行啓用鼠標懸停狀態 |
| .table-condensed | 讓表格更加緊湊 |
<tr>, <th> 和 <td> 類
下表的類可用於表格的行或者單元格：
| 類 | 描述 |
|---|---|
| .active | 將懸停的顏色應用在行或者單元格上 |
| .success | 表示成功的操做 |
| .info | 表示信息變化的操做 |
| .warning | 表示一個警告的操做 |
| .danger | 表示一個危險的操做 |
表單
Bootstrap 提供了下列類型的表單佈局：
垂直表單（默認）
內聯表單
水平表單
全部設置了 .form-control類的<input> 、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;。
將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。
內聯表單：爲 <form> 元素添加 .form-inline 類可以使其內容左對齊，表單元素在一行排列。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。
必定要添加 label 標籤
水平排列表單 ： 爲表單添加 .form-horizontal 類，能夠將 label 標籤和控件組水平並排佈局。
輸入框：括大部分表單控件、文本輸入域控件，還支持全部 HTML5。
類型的輸入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。（只有正確設置了type、屬性的輸入控件才能被賦予正確的樣式）
文本域：<textarea class="form-control" rows="3"></textarea> 能夠經過改變 row 屬性值改變文本域大小。
多選框和單選框：默認堆疊排列。經過將 .checkbox-inline或 .radio-inline 類應用到一系列的多選框（checkbox）或單選框（radio）控件上，可使這些控件排列在一行。
下拉列表：爲 <select>添加類 .form-control ，能夠顯示Bootstrap設置的默認樣式。對於標記了 multiple屬性的 <select>控件來講，默認顯示多選項。
靜態控件：若是須要在表單中將一行純文本和 label 元素放置於同一行，爲<p> 元素添加 .form-control-static 類。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." autofocus>
禁用狀態：
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
被禁用的 filedset ：爲<fieldset>設置 disabled 屬性,能夠禁用 <fieldset> 中包含的全部控件。
只讀狀態：
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
狀態檢驗：狀態包括 error ,warning , success 狀態。Bootstrap爲這些狀態都定義了默認樣式。使用時，.has-warning、.has-error 或 .has-success 類到這些控件的父元素便可。任何包含在此元素以內的 .control-label、.form-control 和.help-block元素都將接受這些校驗狀態的樣式.
添加額外的圖標: 設置相應的.has-feedback 類並添加正確的圖標.
控件尺寸：經過 .input-lg 相似的類能夠爲控件設置高度，經過.col-lg-* 相似的類能夠爲控件設置寬度。經過添加 .form-group-lg 或 .form-group-sm類，爲.form-horizontal 包裹的 label 元素和表單控件快速設置尺寸。
按鈕
如下樣式可用於<a>, <button>, 或 <input> 元素上：
| 類 | 描述 |
|---|---|
| .btn | 爲按鈕添加基本樣式 |
| .btn-default | 默認/標準按鈕 |
| .btn-primary | 原始按鈕樣式（未被操做） |
| .btn-success | 表示成功的動做 |
| .btn-info | 該樣式可用於要彈出信息的按鈕 |
| .btn-warning | 表示須要謹慎操做的按鈕 |
| .btn-danger | 表示一個危險動做的按鈕操做 |
| .btn-link | 讓按鈕看起來像個連接 (仍然保留按鈕行爲) |
| .btn-lg | 製做一個大按鈕 |
| .btn-sm | 製做一個小按鈕 |
| .btn-xs | 製做一個超小按鈕 |
| .btn-block | 塊級按鈕(拉伸至父元素100%的寬度) |
| .active | 按鈕被點擊 |
| .disabled | 禁用按鈕 |
下表列出了得到各類大小按鈕的 class：
| Class | 描述 |
|---|---|
| .btn-lg | 這會讓按鈕看起來比較大。 |
| .btn-sm | 這會讓按鈕看起來比較小。 |
| .btn-xs | 這會讓按鈕看起來特別小。 |
| .btn-block | 這會建立塊級的按鈕，會橫跨父元素的所有寬度。 |
下表列出了讓按鈕元素和錨元素呈禁用狀態的 class：
| 元素 | Class |
|---|---|
| 按鈕元素 | 添加 disabled 屬性 到 <button> 按鈕。 |
| 錨元素 | 添加 disabled class 到 <a> 按鈕。 |
圖片
.img-rounded：添加 border-radius:6px 來得到圖片圓角。
.img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
.img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
如下類可用於任何圖片中。
| 類 | 描述 |
|---|---|
| .img-rounded | 爲圖片添加圓角 (IE8 不支持) |
| .img-circle | 將圖片變爲圓形 (IE8 不支持) |
| .img-thumbnail | 縮略圖功能 |
| .img-responsive | 圖片響應式 (將很好地擴展到父元素) |
響應式圖片
經過在 <img> 標籤添加 .img-responsive 類來讓圖片支持響應式設計。 圖片將很好地擴展到父元素。
.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上：
輔助類
如下不一樣的類展現了不一樣的文本顏色。若是文本是個連接鼠標移動到文本上會變暗：
| 類 | 描述 |
|---|---|
| .text-muted | "text-muted" 類的文本樣式 |
| .text-primary | "text-primary" 類的文本樣式 |
| .text-success | "text-success" 類的文本樣式 |
| .text-info | "text-info" 類的文本樣式 |
| .text-warning | "text-warning" 類的文本樣式 |
| .text-danger | "text-danger" 類的文本樣式 |
插件概覽
在前面 佈局組件 章節中所討論到的組件僅僅是個開始。Bootstrap 自帶 12 種 jQuery 插件，擴展了功能，能夠給站點添加更多的互動。即便您不是一名高級的 JavaScript 開發人員，您也能夠着手學習 Bootstrap 的 JavaScript 插件。利用 Bootstrap 數據 API（Bootstrap Data API），大部分的插件能夠在不編寫任何代碼的狀況下被觸發。
站點引用 Bootstrap 插件的方式有兩種：
- 單獨引用：使用 Bootstrap 的個別的 *.js 文件。一些插件和 CSS 組件依賴於其餘插件。若是您單獨引用插件，請先確保弄清這些插件之間的依賴關係。
插件彈出框
<div class="container">
<button type="button" class="btn btn-lg btn-danger" data-trigger="hover" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?" >點我彈出/隱藏彈出框</button>
</div>
插件收放效果
<div class="container">
<a href="#Mytarget" data-toggle="collapse">展開和收起</a>
<button data-toggle="collapse" data-target="#Mytarget">展開/收起</button>
<div class="collapse" id="Mytarget">
<div class="well">
<p>HTML</p>
<p>css</p>
<p>JavaScript</p>
</div>
</div>
</div>
模態框
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
方法
modal(options)
將頁面中的某塊內容做爲模態框激活。接受可選參數object。
$('#myModal').modal({
keyboard: false
})
modal('toggle')
//手動打開或關閉模態框。在模態框顯示或隱藏以前返回到主調函數中（也就是，在觸發shown.bs.modal或hidden.bs.modal事件以前） $('#myModal').modal('toggle')
.modal('show')
手動打開模態框。在模態框顯示以前返回到主調函數中（也就是，在觸發shown.bs.modal事件以前）。
$('#myModal').modal('show')
.modal('hide')
//手動隱藏模態框。在模態框隱藏以前返回到主調函數中（也就是，在觸發hidden.bs.modal事件以前）。 $('#myModal').modal('hide')
輪播圖
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 輪播圖片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
</div>
</div>
<!-- 左右切換按鈕 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
- 1. BootStarp
- 2. Vue中引入jquery bootstarp bootstarp-table (vue 2.0)
- 3. Bootstarp-table入門
- 4. 初探bootstarp
- 5. bootstarp-select 級聯
- 6. BootStarp模版
- 7. bootstarp後臺皮膚
- 8. Bootstarp柵格佈局
- 9. bootstarp modal 寬度設置
- 10. BootStarp製作導航條demo
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • XML 總結 下一步學習什麼呢？ - XML 教程
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。