文章目錄

Bootstrap 簡介

Bootstrap 是最受歡迎的響應式、移動設備優先的門戶和應用前端框架，能夠做到快速開發 Web 應用程序和網站

爲什麼使用 Bootstrap

移動設備優先: 自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式
瀏覽器支持: 所有的主流瀏覽器都支持 Bootstrap
響應式設計: Bootstrap 的響應式 CSS 能夠自適應臺式機，平板電腦和手機
爲開發人員創建接口提供了一個簡潔統一的解決方案
包含功能強大的內置組件，易於定製
提供了基於 Web 的定製
容易上手
開源

Bootstrap 包的內容

基本結構: Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構
CSS: Bootstrap 自帶以下特性：全局的 CSS 設置，定義基本的 HTML 元素樣式，可擴展的 class，以及一個先進的網格系統
組件: Bootstrap 包含了十幾個可重用的組件，用於創建圖像，下拉菜單，導航，警告框，彈出框等
JavaScript插件: Bootstrap包含了十幾個自定義的 jQuery 插件
定製: 可以定製 Bootstrap 的組件，LESS 變量和jQuery 插件來得到你自己的版本

Bootstrap 環境安裝

1. 下載文件

可以從 https://getbootstrap.net/ 下載指定的版本的 Bootstrap，然後在 HTML 文件中引入使用

2. CDN

<!-- Bootstrap 3.3.7 css 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery 1.9.1，務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>

<!-- Bootstrap 3.3.7 js 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

柵格系統

Bootstrap 提供了一套響應式，移動設備優先的流式柵格系統，隨着屏幕或視口( viewport )尺寸的增加，系統會自動分爲最多 12 列，柵格系統用於通過一系列的行(row) 與列(column) 的組合來創建頁面佈局，你的內容就可以放入這些創建好的佈局中。下面就介紹以下 Bootstrap 柵格系統的工作原理：

行必須放置在 .container class 內，以便獲得適當的對齊和內邊框
使用行來創建列的水平組
內容應該放置在列內，且唯有列可以是行的直接子元素
預定義的網格類，比如 .row 和 .col-xs-4，可用於快速創建網格佈局
列通過內邊距（padding）來創建列內容之間的間隙。該內邊距是通過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移
網格系統是通過指定您想要橫跨的十二個可用的列來創建的。例如，要創建三個相等的列，則使用三個 .col-xs-4
如果一行中包含的列大於 12 ，多餘的列所在的元素將被作爲一個整體另起一行排列

柵格參數

	超小設備手機(<768px)	小型設備平板電腦(>=768px)	中型設備臺式電腦(>=992px)	大型設備(>=1200px)
網格行爲	一直是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的	以摺疊開始，斷點以上是水平的
最大容器寬度	None (auto)	750px	970px	1170px
class前綴	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列數量	12	12	12	12
最大列寬	Auto	60px	78px	95px
間隙寬度	30px（一個列的每邊分別 15px）	30px（一個列的每邊分別 15px	30px（一個列的每邊分別 15px	30px（一個列的每邊分別 15px
可嵌套	√	√	√	√
偏移量	√	√	√	√
列排序	√	√	√	√

基本的網格結構

<div class="container-fluid">
    <div class="row">
        <div class="col-md-5 col-xs-5">
            <h3>這裏是第一列，沒錯就是第一列了，是的呢，就是第一列啦，就是這裏，確實是第一列</h3>
        </div>
        <div class="col-md-3 col-xs-3">
            <h3>這裏是第一列，沒錯就是第一列了，是的呢，就是第一列啦，就是這裏，確實是第一列</h3>
        </div>
        <div class="col-md-4 col-xs-4">
            <h3>這裏是第一列，沒錯就是第一列了，是的呢，就是第一列啦，就是這裏，確實是第一列</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-5">
            <h3>第二列啊</h3>
        </div>
        <div class="col-xs-3">
            <h3>第二列啊</h3>
        </div>
        <div class="col-xs-4">
            <h3>第二列啊</h3>
        </div>
    </div>
</div>

柵格系統需要放在一個容器中
container 固定寬度並支持響應式佈局
container-fluid 類似於 100% 寬度，佔據整個視口 (viewport) 的容器
柵格系統使用 .row 劃分一行
所有列 col-md-* 必須放在 .row 內
一行分爲 12份，每一列可以指定佔據的份數
如果小於等於 12 佔一行，如果大於 12 換行

導航欄

導航欄在網站中作爲導航頁頭的基礎組件，包括了站點名稱和基本的導航定義樣式

創建一個默認的導航欄的步驟如下：

向 <nav> 標籤添加 class .navbar, .navbar-default
向上面的元素添加 role="navigation"，有助於增加可訪問性
向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class .navbar-brand 的 <a> 元素，這樣會讓文本看起來更大一號
爲了嚮導航欄添加鏈接，只需要簡單地添加帶有 class .nav,.navbar-nav 的無序列表即可
將導航欄移動到右邊使用 navbar-right 或 pull-right 即可

<nav class="navbar navbar-default" role="navigation">
    <!-- 導航欄 -->
    <div class="container">
        <!-- 導航欄左邊 -->
        <div class="navbar-header">
            <a href="#" class="navbar-brand">宗宗宗在路上</a>
        </div>
        <!-- 導航欄右邊 -->
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li class="active">
                    <a href="">登錄</a>
                </li>
                <li>
                    <a href="">註冊</a>
                </li>
                <li>
                    <a href="">登出</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

more : https://www.runoob.com/bootstrap/bootstrap-navbar.html

標籤頁

創建標籤頁

以一個帶有 class .nav 的無需列表開始
添加 class .nav-tabs

<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Python</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">JavaScript</a></li> 
    </ul>
</div>

設置標籤頁對應的內容

<div class="container">
    <!-- 選項卡 -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#menu1" data-toggle="tab">Python</a></li>
        <li><a href="#menu2" data-toggle="tab">Java</a></li>
        <li><a href="#menu3" data-toggle="tab">PHP</a></li>
    </ul>

    <!-- 對應的面板 -->
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>首頁</h3>
            <p>Day Day Study Good Good up!</p>
        </div>
        <div id="menu1" class="tab-pane fade">
            <h3>menu1</h3>
            <p>這裏是菜單1</p>
        </div>
        <div id="menu2" class="tab-pane fade">
            <h3>menu2</h3>
            <p>這裏是菜單2</p>
        </div>
        <div id="menu3" class="tab-pane fade">
            <h3>menu3</h3>
            <p>這裏是菜單3</p>
        </div>
    </div>
</div>

more: https://www.runoob.com/bootstrap/bootstrap-navigation-elements.html

面板

面板 (Pabels) 用於把 DOM 組件插入到一個盒子中

基本的面板

只需要向 <div> 元素添加 class .panel 和 class .panel-default

面板標題

使用 .panel-heading class 可以簡單地向面板添加標題容器
使用 .panel-title class 的 <h1> - <h6> 來添加預定義樣式的標題

面板腳註

在面板中添加腳註，只需要把按鈕或文本放在帶有 class .panel-footer 的 div 中即可

帶語境的面板

使用語境狀態類 panel-primary，panel-success，panel-info，panel-warning，panel-danger 來設置帶語境色彩的面板

<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">success 面板</h3>
    </div>
    <div class="panel-body">
        <h1>面板內容</h1>
    </div>
    <div class="panel-footer">
        面板腳註
    </div>
</div>

more: https://www.runoob.com/bootstrap/bootstrap-panels.html

表單

Bootstrap 通過一些簡單的 HTML 標籤和擴展的類即可創建出不同樣式的表單

Bootstrap 提供了以下類型的表單佈局

(1) 基本 (垂直) 表單

向父 <form> 元素添加 role="form"
把標籤和控件放在一個帶有 class .form-group 的 <div> 中
向所有的文本元素 <input>，<textarea> 和 <select> 添加 class form-control

(2) 內聯表單

向父 <form> 元素添加 class form-inline

(3) 水平表單

向父 <form> 元素添加 class form-horizontal

<form action="#" class="form-horizontal" role="form">
    <div class="form-group row">
        <label for="name" class="control-label col-md-2">名稱:</label>
        <div class="col-md-10">
            <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
        </div>
    </div>

    <div class="form-group">
        <label for="file_upload" class="control-label col-md-2">文件上傳:</label>
        <div class="col-md-10">
            <input type="file" class="form-control" id="file_upload">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button class="btn btn-info">提交</button>
        </div>
    </div>
</form>

more: https://www.runoob.com/bootstrap/bootstrap-forms.html

輸入框組

輸入框組擴展自表單，使用輸入框組，可以很容易地向基於文本的輸入框添加作爲前綴和後綴的文本或按鈕

步驟如下：

把前綴或後綴元素放在一個帶有 class .input-group 的 <div> 中
在相同的 div 內，在 class 爲 .input-group-addon 的 span 內放置額外的文本
在相同的 div 內，在 class 爲 .input-group-btn 的 span 內放置額外的按鈕
把該 span 放置在 input 元素前面或者後面

<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button class="btn btn-primary">搜&nbsp;&nbsp;&nbsp;索</button>
    </span>
</div>
<br>
<div class="input-group">
    <span class="input-group-addon">￥</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control">
</div>

more: https://www.runoob.com/bootstrap/bootstrap-input-groups.html

表格

Bootstrap 提供了一個清晰的創建表格的佈局，下表列出了 Bootstrap 支持的一些表格元素

標籤	描述
`<table>`	爲表格添加基礎樣式
`<thead>`	表格標題行的容器元素 `<tr>`，用來標識表格列
`<tbody>`	表格主體中的表格行的容器元素 `<tr>`
`<tr>`	一組出現在單行上的表格單元格的容器元 `<td>` 或 `<th>`
`<td>`	默認的表格單元格
`<th>`	特殊的表格單元格，用來標識列或行（取決於範圍和位置）,必須在 `thead` 內使用
`<caption>`	關於表格存儲內容的描述或總結

表格類
下表樣式可用於表格中

類	描述
.table	爲任意 `table` 添加基本樣式 (只有橫向分隔線)
.table-striped	在 `tbody` 內添加斑馬線形式的條紋
.table-bordered	爲所有表格的單元格添加邊框
.table-hover	在 `tbody` 內的任一行啓用鼠標懸停狀態
.table-condensed	讓表格更加緊湊

tr, th 和 td 類
下表的類可用於表格的行或者單元格

類	描述
.active	將懸停的顏色應用在行或者單元格上
.success	表示成功的操作
.info	表示信息變化的操作
.warning	表示一個警告的操作
.danger	表示一個危險的操作

<table class="table table-bordered">
    <caption>改變表格行或指定單元格背景顏色</caption>
    <thead>
        <tr>
            <th>序號</th>
            <th>名字</th>
        </tr>
    </thead>
    <tbody>
        <tr class="info">
            <th>1</th>
            <th>Python</th>
        </tr>
        <tr>
            <th>2</th>
            <th class="danger">JavaScript</th>
        </tr>
        <tr class="success">
            <th>3</th>
            <th>PHP</th>
        </tr>
    </tbody>
</table>

more: https://www.runoob.com/bootstrap/bootstrap-tables.html

列表組

列表組件用於以列表形式呈現複雜的和自定義的內容，創建一個基本的列表組步驟如下：

向元素 ul 添加 class .list-group
向元素 li 添加 class .list-group-item

<ul class="list-group">
    <li class="list-group-item active">常用語言</li>
    <li class="list-group-item">Python</li>
    <li class="list-group-item">JavaScript</li>
    <li class="list-group-item">HTML</li>
    <li class="list-group-item">CSS</li>
</ul>

more: https://www.runoob.com/bootstrap/bootstrap-list-group.html

分頁

分頁是一種無序列表，Bootstrap 像處理其它界面元素一樣處理分頁

下表列出了 Bootstrap 提供的處理分頁的 class

class	描述
.pagination	添加該 class 在頁面上顯示分頁
.disabled	定義不可點擊鏈接
.active	指示當前選中頁面

<ul class="pagination">
    <li class="disabled"><a href="">上一頁</a></li>
    <li class="active"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">下一頁</a></li>
</ul>

縮略圖

使用 Bootstrap 創建縮略圖的步驟如下：

創建一個含有 class .thumbnail 的 div 標籤
在 div 中添加圖片
添加其它內容

<div class="thumbnail">
    <a href=""><img src="./1.jpg"></a>
    <div class="caption">
        <h3 style="text-align: center;">emmm...</h3>
    </div>
</div>

more: https://www.runoob.com/bootstrap/bootstrap-thumbnails.html

模態框

模態框是覆蓋在父窗體上的子窗體。可以在不離開父窗體的情況下有一些互動，子窗體可以提供信息，交互等

你可以使用以下方法，顯示模態框：

通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，同時設置 data-target="#id" 來指定要切換的特定的模態框
通過 JavaScript: $('#id').modal(options)

<button class="btn btn-success" data-toggle="modal" data-target="#myModal">激活</button>

<!-- 模態框：當觸發事件後，激活一個對話框 -->
<div class="modal fade" id="myModal">
    <!-- 模態框 -->
    <div class="modal-dialog">
        <!-- 模態框內容 -->
        <div class="modal-content">
            <!-- 模塊框頭部 -->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="model-title">刪除用戶？</h4>
            </div>
            <!-- 模態框body -->
            <div class="modal-body">
                是否確認刪除？
            </div>
            <!-- 模態框頁腳 -->
            <div class="modal-footer">
                <button class="btn btn-danger" data-dismiss="modal">是</button>
                <button class="btn btn-info" data-dismiss="modal">否</button>
            </div>
        </div>
    </div>
</div>

more: https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

輪播圖

Bootstrap輪播插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是圖像，內嵌框架，視頻或者其它你想要放置的任何內容

<!-- data-ride="carousel" 代表頁面加載的時候  自動輪播 默認時間爲5s-->
<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <!--小點部分
        carousel-indicators   小點
        data-target   -> 目標
        data-slide-to  控制那一張圖片，通過索引控制，從0開始
    -->
    <ol class="carousel-indicators">
        <li data-target="#mycarousel" data-slide-to="0"></li>
        <li data-target="#mycarousel" data-slide-to="1"></li>
        <li data-target="#mycarousel" data-slide-to="2"></li>
        <li data-target="#mycarousel" data-slide-to="3"></li>
    </ol>
    <!-- 圖片部分 carousel-inner -->
    <div class="carousel-inner">
        <!-- item 代表圖片部分的每一張圖片  activa 當前顯示的圖片-->
        <div class="item active">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="item">
            <img src="./img/2.jpg" alt="">
        </div>
        <div class="item">
            <img src="./img/3.jpg" alt="">
        </div>
    </div>
    <!--控制部分-->
    <!--  上一張
        herf 值爲 當前輪播圖的id
        data-slide -> 控制獲取上一張 下一張圖片，接受兩個值： prev（上一張）  next（下一張）
    -->
    <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
        <!-- 左箭頭圖標 -->
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <!--下一張-->
    <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
        <!-- 右箭頭圖標 -->
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

more: https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

圖標

點擊查看圖標列表

<span class="glyphicon glyphicon-search"></span>

<button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-user"></span> User
</button>

參考文檔

https://www.runoob.com/bootstrap/bootstrap-tutorial.html
http://w3c.3306.biz/bootstrap_v3/
https://doc.yonyoucloud.com/doc/wiki/project/bootstrap/index.html

從零到一，Bootstarp框架常用模塊簡介

文章目錄

Bootstrap 簡介

柵格系統

柵格參數

基本的網格結構

導航欄

標籤頁

面板

表單

輸入框組

表格

列表組

分頁

縮略圖

模態框

輪播圖

圖標

參考文檔

Web框架 Flask 之 Jinja2 模板引擎

BUG 小記：Flask使用自定義裝飾器

Web 框架 Flask 入門

Web框架 Flask 之請求方式 & 會話

Web框架 Flask 之路由

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結