[UI] 03 - Bootstrap: component
前言
1、框架體系
Bootstrap 是基於 HTML5、CSS3、JAVASCRIPT。css
教程被分爲：html
-
- Bootstrap 基本結構、
- Bootstrap CSS、
- Bootstrap 佈局組件
- Bootstrap 插件
2、資源
Goto: Bootstrap 可視化佈局系統！ 前端
Goto: 玩轉Bootstrap（基礎）【學習基於此視頻教程】html5
參考：[CSS] 01 - Basicsjquery
前端框架
1、簡介
官網：getbootstrap.comios
推薦的模板，詳情參考：https://www.imooc.com/code/2322ajax
<!doctype html> ＃html5 <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8">
# <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> # 虛擬的viewport,比屏幕寬；經過平移和縮放看網頁，在手機設備上。
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <title>Hello, world!</title> </head>
<body> <h1>Hello, world!</h1> <!-- Optional JavaScript -->
# 注意順序性
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> </body> </html>
2、排版
- 主標題、副標題
<!--Bootstrap中讓非標題元素和標題使用相同的樣式--> <div class="h1">Bootstrap標題一</div> <!--Bootstrap中使用了<small>標籤來製做副標題--> <h1>Bootstrap標題一<small>我是副標題</small></h1>
- 內容強調
[變大]bootstrap
<p class="lead">我是特地要突出的文本，個人樣子成這樣。我是特地要突出的文本，個人樣子長成這樣。</p>
也就意味着，在bootstrap.css中有定義好的.lead標記。前端框架
其餘‘突出’標記：<small>、<strong>、<em>【斜體】和<cite>。框架
[變粗]
b,strong {
font-weight: bold; /*文本加粗*/
}
[顏色強調]
<body> <div class="text-muted">.text-muted 效果</div> <div class="text-primary">.text-primary效果</div> <div class="text-success">.text-success效果</div> <div class="text-info">.text-info效果</div> <div class="text-warning">.text-warning效果</div> <div class="text-danger">.text-danger效果</div> <!--下面是任務部分--> <p>我是一段危險信息，請用Bootstrap框架中的危險風格顯示</p> </body>
- 對齊風格
[常規對齊]
<p class="text-left">我居左</p> <p class="text-center">我居中</p> <p class="text-right">我居右</p> <p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>
[嵌套對齊]
<h5>有序列表嵌套</h5> <ol> <li>有序列表</li> <li> 有序列表 <ol> <li>有序列表(2)</li> <li>有序列表(2)</li> </ol> </li> <li>有序列表</li> </ol>
效果：
-----------------------------------------
有序列表嵌套
-
-
- 有序列表
- 有序列表
- 有序列表(2)
- 有序列表(2)
- 有序列表
-
-----------------------------------------
[去點]
經過給無序列表添加一個類名「.list-unstyled」，這樣就能夠去除默認的列表樣式的風格。
[內聯]
本來的列變爲行：".list-inline"
- 列表
[垂直定義]
<dl> #定義列表 <dt>W3cplus</dt> # 定義title <dd>一個致力於推廣國內前端行業的技術博客</dd> ＃定義條目 <dt>慕課網</dt> <dd>一個真心在作教育的網站</dd> </dl>
[水平定義]
<dl class="dl-horizontal"> <dt>W3cplus</dt> <dd>一個致力於推廣國內前端行業的技術博客。它以探索爲己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd> <dt>慕課網</dt> <dd>一個專業的，真心實意在作培訓的網站</dd> <dt>我來測試一個標題，我來測試一個標題</dt> <dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd> </dl>
全屏後效果：【變窄後仍是變爲垂直效果】
- 代碼
用於顯示代碼的風格。在Bootstrap主要提供了三種代碼風格：
一、使用<code></code>來顯示單行內聯代碼
二、使用<pre></pre>來顯示多行塊代碼
三、使用<kbd></kbd>來顯示用戶輸入代碼
[code風格]
Bootstrap的代碼風格有三種：
<code>、
<pre>和
<kbd>
[pre風格]
<ul> <li>...</li> <li>...</li> <li>...</li> </ul>
[kbd風格]
請輸入
ctrl+c來複制代碼，而後使用
ctrl+v來粘貼代碼
請使用ctrl+x複製代碼，而後使用ctrl+shift+v將複製的代碼粘貼到須要的地方。
[滾動條]
有時候代碼太多，並且不想讓其佔有太大的頁面篇幅，就想控制代碼塊的大小。
<pre class='pre-scrollable'> <ol> <li>....</li> <li>....</li> <li>....</li> <li>....</li> # 若是後接上不少不少 </ol> </pre>
-
表格
[表格風格]
☑ .table：基礎表格
☑ .table-striped：斑馬線表格
☑ .table-bordered：帶邊框的表格
☑ .table-hover：鼠標懸停高亮的表格
☑ .table-condensed：緊湊型表格
☑ .table-responsive：響應式表格【隨着屏幕的變化而自動變化格式方便閱讀的表格】
[單元格 de 顏色強調]
<table class="table table-bordered"> <thead> <tr> <th>類名</th> <th>描述</th> </tr> </thead> <tbody> <tr class="active"> <td>.active</td> <td>表示當前活動的信息</td> </tr> <tr class="success"> <td>.success</td> <td>表示成功或者正確的行爲</td> </tr> <tr class="info"> <td>.info</td> <td>表示中立的信息或行爲</td> </tr> <tr class="warning"> <td>.warning</td> <td>表示警告，須要特別注意</td> </tr> <tr class="danger"> <td>.danger</td> <td>表示危險或者多是錯誤的行爲</td> </tr> </tbody> </table>
效果：
表單
表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。
對於基礎表單，Bootstrap並未對其作太多的定製性效果設計，僅僅對錶單內的fieldset、legend、label標籤進行了定製。
1、表單控件美化
<div class="form-group"> <label for="exampleInputPassword1">密碼</label> <input type="password"class="form-control" id="exampleInputPassword1" placeholder="請輸入您的郵箱密碼"> </div>
2、水平表單
相似上述的」列表水平定義「。
<form class="form-horizontal" role="form"> <div class="form-group">
[內聯表單]
變爲純粹的一行。
<form class="form-inline" role="form"> <div class="form-group">
3、下拉選擇框
<form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div>
<div class="form-group"> <select multiple class="form-control"> # 都顯示地顯現出來 <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form>
4、文本框
<form role="form"> <div class="form-group"> <textarea class="form-control" rows="3"></textarea> </div> </form>
[禁用]
<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>
[驗證風格]
<h3>示例1</h3> <form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告狀態</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">錯誤狀態</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"> </div> </form>
<h3>示例2</h3> <form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告狀態</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">錯誤狀態</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form>
第二種效果圖：
[驗證提示]
<span class="help-block">你輸入的信息是正確的</span>
5、複選框、單選按鈕
<form role="form"> <h3>案例1</h3> <div class="checkbox"> <label> <input type="checkbox" value=""> 記住密碼 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜歡 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜歡 </label> </div> </form>
[內聯模式]
一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」
二、若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」
6、按鈕
<tr> <td><button class="btn" href="#">Default</button></td> <td><code>btn</code></td> <td>Standard gray button with gradient</td> </tr>
按鈕顏色，參照 [單元格 de 顏色強調]
| Button | class="" | Description |
|---|---|---|
btn |
Standard gray button with gradient | |
btn btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info |
Used as an alternative to the default styles | |
btn btn-success |
Indicates a successful or positive action | |
btn btn-warning |
Indicates caution should be taken with this action | |
btn btn-danger |
Indicates a dangerous or potentially negative action | |
btn btn-inverse |
Alternate dark gray button, not tied to a semantic action or use |
補充：「btn btn-default」, 「btn btn-link」。
<button class="btn btn-default" type="button">默認按鈕</button> <button class="btn btn-link" type="button">連接按鈕.btn-link</button>
[激活其餘控件的‘按鈕」屬性]
<button class="btn btn-default" type="button">button標籤按鈕</button>
<input type="submit" class="btn btn-default" value="input標籤按鈕"/>
<a href="##" class="btn btn-default">a標籤按鈕</a>
<span class="btn btn-default">span標籤按鈕</span>
<div class="btn btn-default">div標籤按鈕</div>
[按鈕大小]
<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button> <button class="btn btn-primary" type="button">正常按鈕</button> <button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button> <button class="btn btn-primary btn-xs" type="button">超小型按鈕.btn-xs</button>
[block按鈕]
效果：與屏幕等寬。
<button class="btn btn-primary btn-lg btn-block" type="button">大型按鈕.btn-lg</button>
[按鈕禁用]
<button class="btn btn-primary btn-lg btn-block" type="button"disabled="disabled">經過disabled屬性禁用按鈕</button> <button class="btn btn-primary btn-block disabled" type="button">經過添加類名disabled禁用按鈕</button>
圖片
1、圖像
<img alt="140x140" src="http://placehold.it/140x140"> <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <img class="img-circle" alt="140x140" src="http://placehold.it/140x140"> <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140" />
圖像在網頁製做中也是常要用到的元素，在Bootstrap框架中對於圖像的樣式風格提供如下幾種風格：
一、img-responsive：響應式圖片，主要針對於響應式設計
二、img-rounded ：圓角圖片
三、img-circle ：圓形圖片
四、img-thumbnail ：縮略圖片
2、圖標
<body> <span class="glyphicon glyphicon-search"></span> <span class="glyphicon glyphicon-asterisk"></span> <span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span> </body>
詳見：https://getbootstrap.com/docs/3.3/components/
網格系統
1、拆分十二份
Bootstrap框架中的網格系統就是將容器平分紅12份。
具備彈性屬性。
<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>
2、文本框格子布局
格子布局：都是按一行12列來計算的, 6就是50%寬，4就是三分之一，2就是1/6。
<h1>案例2</h1> <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> <div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div> </div>
<div class="form-group"> <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div> <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div> </div>
<div class="form-group"> <div class="col-xs-5"> <input class="form-control input-sm" type="text" placeholder=".col-xs-5"> </div> <div class="col-xs-7"> <input class="form-control input-sm" type="text" placeholder=".col-xs-7"> </div> </div> </form>
效果圖：
3、表格格子布局
<body> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-3">.col-md-3</div> </div> </div> </body>
效果圖：
4、列偏移
<h4>列向右移動四列的間距</h4>
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div> </div> </div> <br />
<h4>發生行斷裂</h4>
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">列向右移動四列的間距</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div> </div> <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3 col-md-offset-3">col-md-offset-3</div> <div class="col-md-4">col-md-4</div> </div> </div>
5、列排序
「col-md-4」居左，「col-md-8」居右，若是要互換位置，須要將「col-md-4」向右移動８個列的距離，也就是8個offset ,也就是在「<div class=「col-md-4」>」添加類名「col-md-push-8」，調用其樣式。
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> </div>
6、列的嵌套
Bootstrap框架的網格系統還支持列的嵌套。你能夠在一個列中添加一個或者多個行（row）容器，而後在這個行容器中插入列（像前面介紹的同樣使用列）。但在列容器中的行容器（row），寬度爲100%時，就是當前外部列的寬度。
<body> <div class="container"> <div class="row"> <div class="col-md-8">
個人裏面嵌套了一個網格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div>
</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">
個人裏面嵌套了一個網格 <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div>
</div> </div> </div> </body>
效果圖：
相關文章
- 1. [Unity3D] 03 - Component of UI
- 2. UI Component
- 3. 03-Bootstrap學習
- 4. 【03】react 之 建立component
- 5. 【Bootstrap框架】——組件（Component）
- 6. sap ui/fiori 03
- 7. angular-ui-bootstrap (1)
- 8. UI Component in CRM WebUI and Hybris
- 9. Flask—03-bootstrap與表單
- 10. Bootstrap UI 編輯器
- 更多相關文章...
- • jQuery Mobile 按鈕圖標 - jQuery Mobile 教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • RxJava操作符（六）Utility
- • Github 簡明教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
