Bootstrap-06(/2019/6/2)

Bootstrap

Bootstrap 特點
1、簡潔废膘、直觀竹海、強悍的前端開發(fā)框架， html丐黄、 css斋配、 javascript 工具集，讓
web 開發(fā)更迅速灌闺、簡單艰争。
2、基于 html5桂对、 css3 的 bootstrap甩卓，具有大量的誘人特性：友好的學習曲線，
卓越的兼容性蕉斜，響應式設計逾柿， 12 列格網缀棍，樣式向導文檔。
3机错、自定義 JQuery 插件爬范，完整的類庫， bootstrap3 基于 Less弱匪， bootstrap4
基于 Sass 的 CSS 預處理技術
4青瀑、 Bootstrap 響應式布局設計,讓一個網站可以兼容不同分辨率的設備。
Bootstrap 響應式布局設計痢法，給用戶提供更好的視覺使用體驗狱窘。
5、豐富的組件

一.使用Bootstrap

html 中模板為

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!--使用 X-UA-Compatible 來設置 IE 瀏覽器兼容模式 最新的渲染模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--
             viewport 表示用戶是否可以縮放頁面财搁；
             width 指定視區(qū)的邏輯寬度提茁；
             device-width 指示視區(qū)寬度應為設備的屏幕寬度；
             initial-scale 指令用于設置 Web 頁面的初始縮放比例
             initial-scale=1 則將顯示未經縮放的 Web 文檔
         -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 的 HTML 標準模板</title>
        <!--引入BootStrap的核心css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        
        <h1>Hello, world!</h1>
        
    </body>
    <!--注：如果需要使用Bootstrap的組件或插件稍浆，則需要引入Jquery和bootstrap的js文件，且jquery必須在bootstrap之前引入-->
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

</html>

說明：
（1） ViewPort <meta>標記用于指定用戶是否可以縮放 Web 頁面
（2） width 和 height 指令分別指定視區(qū)的邏輯寬度和高度。他們的值
要么是以像素為單位的數(shù)字队橙，要么是一個特殊的標記符號贮匕。
（3） width 指令使用 device-width 標記可以指示視區(qū)寬度應為設備
的屏幕寬度。
（4） height 指令使用 device-height 標記指示視區(qū)高度為設備的屏
幕高度疯特。
（5） initial-scale 指令用于設置 Web 頁面的初始縮放比例葫男。默認的
初始縮放比例值因智能手機瀏覽器的不同而有所差異。通常情況下設備會在
瀏覽器中呈現(xiàn)出整個 Web 頁面债鸡，設為 1.0 則將顯示未經縮放的 Web 文檔镊屎。

二、布局容器

Bootstrap 需要為頁面內容和柵格系統(tǒng)包裹一個 .container 容器鲁森。我們
提供了兩個作此用處的類榜晦。注意缩宜，由于 padding 等屬性的原因捂龄，這兩種容器
類不能互相嵌套轮傍。
1姑廉、 .container 類用于固定寬度并支持響應式布局的容器届谈。

2、 .container-fluid 類用于 100% 寬度购岗，占據(jù)全部視口（viewport）的容器。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>布局容器</title>
        <!--引入BootStrap的核心css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        <!--
            布局容器
                Bootstrap 需要為頁面內容和柵格系統(tǒng)包裹一個 .container 容器巨税。我們提供了兩個作此用處的類。注意，由于 padding 等屬性的原因犯犁，這兩種 容器類不能互相嵌套。
                1涣澡、.container 類用于固定寬度并支持響應式布局的容器。
                    <div class="container">
                     ...
                    </div>
                2抗愁、.container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器逢捺。
                    <div class="container-fluid">
                     ...
                    </div>
            
            
        -->
        
        <!--默認的DIV-->
        <div style="background-color: pink;height: 30px;"></div>
        
        <!--1、.container 類用于固定寬度并支持響應式布局的容器志于。 -->
        <div class="container" style="background-color: cyan;height: 30px;"> </div>
        
        <!--2、 .container-fluid 類用于 100% 寬度奈应，占據(jù)全部視口（viewport）的容器。-->
        <div class="container-fluid" style="background-color: cyan;height: 30px;"> </div>
        
    </body>

</html>

三、柵格網格系統(tǒng)(Grid System)

Bootstrap 提供了一套響應式歌殃、移動設備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加匀泊，系統(tǒng)會自動分為最多 12 列。柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局躲因，你的內容就可以放入這些創(chuàng)建好的布局中搞监。網格系統(tǒng)的實現(xiàn)原理非常簡單，僅僅是通過定義容器大小绝淡，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常見的)，再調整內外邊距潘拨，最后結合媒體查詢，就制作出了強大的響應式網格系統(tǒng)琅束。 Bootstrap 框架中的網格系統(tǒng)就是將容器平分成 12 份。

注意: 網格系統(tǒng)必須使用到 css
container、 row 屿岂、 xs (xsmall phones), sm (small tablets), md
(middle desktops) lg (larger desktops) 即: 超小屏(自動)，小屏
(750px)运授，中屏(970px)和大屏(1170px)
數(shù)據(jù)行(.row)必須包含在容器（.container）中柒室，以便為其賦予合適的對
齊方式和內距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作為行容
器(.row)的直接子元素府怯，但列數(shù)之和不能超過平分的總列數(shù)则涯，比如 12粟判。如果大于
12,則自動換到下一行。
具體內容應當放置在列容器（column）之內

image.png

1、列組合
列組合簡單理解就是更改數(shù)字來合并列（原則：列總和數(shù)不能超 12，大于
12,則自動換到下一行栅受。），有點類似于表格的 colspan 屬性。

2蔚出、列偏移稀余、列排序
（1）列偏移
如果我們不希望相鄰的兩個列緊靠在一起，但又不想使用 margin
或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現(xiàn)辟癌。使用列偏
移也非常簡單，只需要在列元素上添加類名"col-md-offset-*"(其中星號代表
要偏移的列組合數(shù))，那么具有這個類名的列就會向右偏移昵济。例如囱挑，你在列元素
上添加"col-md-offset-8"平挑，表示該列向右移動 8 個列的寬度(要保證列與偏移
列的總數(shù)不超過 12唆涝，不然會致列斷行|換行顯示)。
（2）列排序
列排序其實就是改變列的方向亡驰，就是改變左右浮動戒职，并且設置浮動的距離。
在 Bootstrap 框架的網格系統(tǒng) 中是通過添加類名
"col-md-push-*" 和
"col-md-pull-*" (其中星號代表移動的列組合數(shù))。往前 pull，往后 push。

3、列嵌套
Bootstrap 框架的網格系統(tǒng)還支持列的嵌套仰担。你可以在一個列中添加一個或
者多個行（row）容器愉耙，然后在這個行容器中插入列.

<!DOCTYPE html>
<html>
    <head>
        <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>柵格網格系統(tǒng)</title>
        <!--引入BootStrap的核心css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        <!--
            注意: 網格系統(tǒng)必須使用到 css 
                container猜谚、row 、xs (xsmall phones), sm (small tablets), md (middle desktops) lg (larger desktops) 即: 超小屏(自動)，小屏(750px)沧竟，中屏(970px)和大屏(1170px) 
                數(shù)據(jù)行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內距(padding)桩撮。
                在行(.row)中可以添加列(.column), 只有列（column）才可以作為行容器(.row)的直接子元素鞠呈，但列數(shù)之和不能超過平分的總列數(shù)旱爆，比如 12。如果大于 12,則自動換到下一行。
                具體內容應當放置在列容器（column）之內
                
                
            1桑孩、列組合
                列組合簡單理解就是更改數(shù)字來合并列（原則：列總和數(shù)不能超 12明也，大于12,則自動換到下一行安岂。），有點類似于表格的 colspan 屬性败许。
        
            2、列偏移、列排序
                （1）列偏移
                如果我們不希望相鄰的兩個列緊靠在一起，但又不想使用 margin 或者其他的技術手段來。這個時候就可以使用列偏移（offset）功能來實現(xiàn)窘面。使用列偏
                移也非常簡單险毁，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表
                要偏移的列組合數(shù))，那么具有這個類名的列就會向右偏移。例如吵瞻，你在列元素
                上添加“col-md-offset-8”济舆，表示該列向右移動 8 個列的寬度(要保證列與偏移
                列的總數(shù)不超過 12签夭，不然會致列斷行|換行顯示)齐邦。
                （2）列排序
                列排序其實就是改變列的方向，就是改變左右浮動第租，并且設置浮動的距離措拇。
                在 Bootstrap 框架的網格系統(tǒng)中是通過添加類名 ”col-md-push-*” 和
                “col-md-pull-*” (其中星號代表移動的列組合數(shù))慎宾。往前 pull丐吓，往后 push。
                
            3璧诵、列嵌套
                Bootstrap 框架的網格系統(tǒng)還支持列的嵌套汰蜘。你可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列.
        
        
        -->
        <!--容器布局-->
        <div class="container" >
            
            <!--列組合-->
            <!--定義數(shù)據(jù)行 row-->
            <div class="row">
                <!--設置柵格網格系統(tǒng)-->
                <div class="col-md-1 col-sm-1 col-xs-1" style="background-color: rosybrown;">1</div>
                <div class="col-md-2 col-sm-2 col-xs-2" style="background-color: azure;">2</div>
                <div class="col-md-8 col-sm-8 col-xs-8" style="background-color: tomato;">8</div>
                <div class="col-md-2 col-sm-2 col-xs-2" style="background-color: brown;">2</div>
            </div>
            <div class="row">
                <!--設置柵格網格系統(tǒng)-->
                <div class="col-md-1 col-sm-1 col-xs-1" style="background-color: blanchedalmond;">1</div>
                <div class="col-md-2 col-sm-2 col-xs-2" style="background-color: cornflowerblue;">2</div>
                <div class="col-md-8 col-sm-8 col-xs-8" style="background-color: khaki;">8</div>
                <div class="col-md-1 col-sm-1 col-xs-1" style="background-color: lawngreen;">2</div>
            </div>
            <!--列組合-->
            
            <div style="height: 20px;"></div>
            
            <!--列偏移-->
            <div class="row">
                <div class="col-md-4" style="background-color: blanchedalmond;">4</div>
                <div class="col-md-2 col-md-offset-1" style="background-color: cornflowerblue;">2</div>
                <div class="col-md-1" style="background-color: blueviolet;">1</div>
            </div>
            <div class="row">
                <div class="col-md-4" style="background-color: burlywood;">4</div>
                <div class="col-md-2 col-md-offset-10" style="background-color: cadetblue;">2</div>
                <div class="col-md-1" style="background-color: indianred;">1</div>
            </div>
            <!--列偏移-->
            
            <div style="height: 20px;"></div>
            
            <!--列排序-->
            <div class="row">
                <div class="col-md-4" style="background-color: blanchedalmond;">4</div>
                <div class="col-md-2" style="background-color: cornflowerblue;">2</div>
                <div class="col-md-1 col-md-pull-3" style="background-color: blueviolet;">1</div>
            </div>
            <div class="row">
                <div class="col-md-4" style="background-color: rosybrown;">4</div>
                <div class="col-md-2 col-md-push-3" style="background-color: bisque;">2</div>
                <div class="col-md-1" style="background-color: tomato;">1</div>
            </div>
            <!--列排序-->
            
            <div style="height: 20px;"></div>
            
            <!--列嵌套-->
            <div class="row">
                <div class="col-md-6" style="background-color: rosybrown;">
                    6
                    <div class="row">
                        <div class="col-md-4" style="background-color: burlywood;">4</div>
                        <div class="col-md-4" style="background-color: sandybrown;">4</div>
                        <div class="col-md-4" >4</div>
                    </div>
                </div>
                <div class="col-md-6" style="background-color: thistle;">
                    6
                </div>
            </div>
            <!--列嵌套-->
            
            
        </div>
        
    </body>
</html>

四之宿、排版
1族操、標題
Bootstrap 和普通的 HTML 頁面一樣，定義標題都是使用標簽<h1>到<h6>,
只不過 Bootstrap 覆蓋了其默認的樣式比被，使用其在所有瀏覽器下顯示的效果一
樣色难。為了讓非標題元素和標題使用相同的樣式，還特意定義了.h1~.h6
六個類名等缀。
同時后面可以緊跟著一行小的副標題<small></small>或使用.small

2枷莉、段落
段落是排版中另一個重要元素之一。通過.lead 來突出強調內容(其作用就
是增大文本字號尺迂，加粗文本笤妙，而且對行高和 margin 也做相應的處理≡朐＃可以使用
以下標簽給文本做突出樣式處理：
<small>:小號字
<b><strong>:加粗
<i><em>:斜體

3蹲盘、引用
<blockquote>：標簽定義摘自另一個源的塊引用，
使用.blockquote-reverse膳音，實現(xiàn)右對齊召衔。
<footer>:腳注
<cite>：表示對某個參考文獻的引用

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>排版</title>
        <!--引入BootStrap的核心css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    </head>
    <body>
        <!--
            排版
                標簽
                    h1-h6:bootstrap定義了樣式覆蓋了原來的標題效果
                    其他 標簽使用.h1-.h6樣式，也可以有h1-h6的效果
                    <small></small>:小號字體祭陷，或者設置.small屬性
                    
                段落
                    段落是排版中另一個重要元素之一苍凛。通過.lead 來突出強調內容(其作用就是增大文本字號，加粗文本兵志，而且對行高和 margin 也做相應的處理醇蝴。可以使用
                    以下標簽給文本做突出樣式處理：
                        <small>:小號字
                        <b><strong>:加粗
                        <i><em>:斜體
                引用
                    <blockquote>：標簽定義摘自另一個源的塊引用想罕，
                    使用.blockquote-reverse悠栓，實現(xiàn)右對齊。
                    <footer>:腳注
                    <cite>：表示對某個參考文獻的引用
        -->
        
        <!--標題-->
        <h1>標題1<small>副標題</small></h1>
        <h2>標題2<span class="small">副標題</span></h2>
        <h3>標題3</h3>
        <h4>標題4</h4>
        <h5>標題5</h5>
        <h6>標題6</h6>
        <p class="h2">標簽</p>
        
        <hr />
        <!--段落-->
        <p>以后的你會感謝現(xiàn)在的自己</p>
        <p class="lead">以后的你會感謝現(xiàn)在的自己</p>
        <p class="lead"><b>以后</b><em>的</em><small>你</small>會<i>感謝</i>現(xiàn)在的<strong>自己</strong></p>
        
        
        <hr />
        
        <blockquote class="blockquote">
            好好學習 Java！
            <footer>本文出自大師之手</footer> 
            <cite>thinking in java</cite> 
        </blockquote>
        
    </body>
</html>

4闸迷、強調
定義了一套類名嵌纲，這里稱其為強調類名，這些強調類都是通過顏色來表示強
調腥沽，具本說明如下：
.text-muted：提示逮走，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功今阳，使用淺綠色(#3c763d)
.text-info：通知信息师溅，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）

.text-danger：危險盾舌，使用褐色（#a94442）

5墓臭、文本對齊
在 CSS 中常常使用 text-align 來實現(xiàn)文本的對齊風格的設置。
其中主要有四種風格：
左對齊妖谴，取值 left ;
居中對齊窿锉，取值 center;
右對齊，取值 right ;
兩端對齊膝舅，取值 justify嗡载。
為了簡化操作，方便使用仍稀， Bootstrap 通過定義四個類名來控制文本的對齊
風格： .text-left：左對齊 .text-center：居中對齊 .text-right：右對
齊 .text-justify：兩端對齊洼滚。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>強調文本對齊</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<!--
         排版
            強調
                .text-muted：提示，使用淺灰色（#999）
                .text-primary：主要技潘，使用藍色（#428bca）
                .text-success：成功遥巴，使用淺綠色(#3c763d)
                .text-info：通知信息，使用淺藍色（#31708f）
                .text-warning：警告享幽，使用黃色（#8a6d3b）
                .text-danger：危險铲掐，使用褐色（#a94442）
            文本對齊
               使用 text-align 來實現(xiàn)文本的對齊風格的設置。
                  其中主要有四種風格：
                  左對齊琉闪，取值 left ;
                  居中對齊迹炼，取值 center;
                  右對齊砸彬，取值 right ;
                  兩端對齊颠毙，取值 justify。
                  為了簡化操作砂碉，方便使用蛀蜜，Bootstrap 通過定義四個類名來控制文本的對齊
                  風格： .text-left：左對齊
                      .text-center：居中對齊
                      .text-right：右對齊
                      .text-justify：兩端對齊。
      -->
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危險效果</div>

<hr />
<div>
    Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于:HTML增蹭、CSS滴某、JavaScript 開發(fā)的簡潔、直觀、強悍的前端開發(fā)框架霎奢，使得 Web 開發(fā)更加快捷户誓。
</div>
<div style="text-align: center;">
    Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于:HTML、CSS幕侠、JavaScript 開發(fā)的簡潔帝美、直觀、強悍的前端開發(fā)框架晤硕，使得 Web 開發(fā)更加快捷
</div>
<hr />
<div style="text-align: justify;">
    Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于:HTML悼潭、CSS、JavaScript 開發(fā)的簡潔舞箍、直觀舰褪、強悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷疏橄。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范占拍，它即是由動態(tài)CSS語言Less寫成。
</div>

<hr />
<div class="text-justify">
    Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于:HTML捎迫、CSS刷喜、JavaScript 開發(fā)的簡潔、直觀立砸、強悍的前端開發(fā)框架掖疮，使得 Web 開發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范颗祝，它即是由動態(tài)CSS語言Less寫成浊闪。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目螺戳，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目搁宾。
</div>
</body>

</html>

6. 列表
在 HTML 文檔中，列表結構主要有三種：
無序列表(<ul><li>...</li></ul>)倔幼、
有序列表(<ol><li>...</li></ol>)盖腿、
定義列表(<dl><dt>...</dt><dd>...</dd></dl>)。
bootstrap 根據(jù)平時的使用情形提供了六種形式的列表:( 普通列表损同、有序
列表翩腐、去點列表、內聯(lián)列表膏燃、描述列表茂卦、水平描述列表）。在樣式方面
Bootstrap
只是在原有的基礎上做了一些細微的優(yōu)化(margin 調整),其他差別不大组哩，加入
了一些樣式:
（1）去點列表:
class="list-unstyled"

<ul class="list-unstyled">
<li>無序項目列表一</li>
<li>無序項目列表二</li>
</ul>

（2）內聯(lián)列表:
class=" list-inline" 簡單點說就是把垂直列表換成水平列表等龙，而且去
掉項目符號（編號）处渣，保持水平顯示。也可以說內聯(lián)列表就是為制作水平導航而生蛛砰。

（3）定義列表:
在原有的基礎加入了一些樣式罐栈，使用樣式
class=".dl-horizontal"制作水平定義列表 : 當標題寬度超過
160px時，將會顯示三個省略號 bootstrap4
貌似有問題泥畅，看樣子還是不穩(wěn)定悠瞬， bootstrap3 中的 css 沒有問題。

7涯捻、代碼
一般在個人博客上使用的較為頻繁浅妆，用于顯示代碼的風格。在 Bootstrap
主要提供了三種代碼風格：
（1）使用<code></code>來顯示單行內聯(lián)代碼
（2）使用 <pre></pre>來顯示多行塊代碼障癌，樣式 :
pre-scrollable
(height,max-height 高度固定,為 340px,超過存在滾動條)
（3）使用<kbd></kbd>來顯示用戶輸入代碼,如快捷鍵
不管使用哪種代碼風格凌外，在代碼中碰到小于號（<）要使用硬編碼"<"來
替代，大于號(>)使用">"來替代涛浙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>列表代碼</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<!--
         排版
            列表
               在 HTML 文檔中康辑，列表結構主要有三種：
                  無序列表(<ul><li>…</li></ul>)、
                  有序列表(<ol><li>…</li></ol>)轿亮、
                  定義列表(<dl><dt>…</dt><dd>…</dd></dl>)疮薇。
                  bootstrap 根據(jù)平時的使用情形提供了六種形式的列表:( 普通列表、有序
                  列表我注、去點列表按咒、內聯(lián)列表、描述列表但骨、水平描述列表）励七。在樣式方面 Bootstrap
                  只是在原有的基礎上做了一些細微的優(yōu)化(margin 調整),其他差別不大，加入
                  了一些樣式:
                  （1）去點列表:
                     class="list-unstyled"
                  （2）內聯(lián)列表:
                     class=” list-inline” 簡單點說就是把垂直列表換成水平列表奔缠，而且去掉項目符號（編號）掠抬，保持水平顯示。也可以說內聯(lián)列表就是為制作水平導航而生校哎。
                  （3）定義列表:
                     在原有的基礎加入了一些樣式两波，使用樣式 class=“.dl-horizontal”制作
                     水平定義列表 : 當標題寬度超過160px時，將會顯示三個省略號 bootstrap4
                     貌似有問題闷哆，看樣子還是不穩(wěn)定腰奋，bootstrap3 中的 css 沒有問題

            代碼
               主要提供了三種代碼風格：
                  （1）使用<code></code>來顯示單行內聯(lián)代碼
                  （ 2 ） 使 用 <pre></pre> 來 顯 示 多 行 塊 代 碼 阳准， 樣 式 : pre-scrollable
                  (height,max-height 高度固定,為 340px,超過存在滾動條)
                  （3）使用<kbd></kbd>來顯示用戶輸入代碼,如快捷鍵
                  不管使用哪種代碼風格氛堕，在代碼中碰到小于號（<）要使用硬編碼“&lt;”來
                  替代馏臭，大于號(>)使用“&gt;”來替代野蝇。

      -->
<body>
<ul>
    <li>等你下課</li>
    <li>我不配</li>
</ul>
<ul class="list-unstyled">
    <li>等你下課</li>
    <li>我不配</li>
</ul>
<ul class="list-inline">
    <li>等你下課</li>
    <li>我不配</li>
</ul>
<br />
<dl>
    <dt>尚學堂</dt>
    <dd>中國最有良心的培訓機構</dd>
    <dd>中國最有良心的培訓機構</dd>
    <dt>速學堂</dt>
    <dd>o2o 在線學習平臺</dd>
    <dd>o2o 在線學習平臺</dd>
</dl>
<dl >
    <dt>尚學堂 使用 bootstrap3 的 css 哦</dt>
    <dd>中國最有良心的一站式的 o2o 培訓機構</dd>
    <dt>測試標題不能超過 160px 的寬度,否則 2 個點</dt>
    <dd>我在寫一個水平定義列表的效果讼稚，我在寫一個水平定義列表的效果</dd>
</dl>

<dl class="dl-horizontal">
    <dt>尚學堂 使用 bootstrap3 的 css 哦</dt>
    <dd>中國最有良心的一站式的 o2o 培訓機構</dd>
    <dt>測試標題不能超過 160px 的寬度,否則 2 個點</dt>
    <dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd>
</dl>

<br />
<hr />

<code>
    private void test() {
    System.out.println("Hello");
    }
</code>

<pre>
   private void test() {
      System.out.println("Hello");
   }
</pre>

<pre class="pre-scrollable">
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }
   private void test() {
      System.out.println("Hello");
   }

   &lt;h2&gt;NIHAO&lt;/h2&gt;
</pre>

<div>使用<kbd>ctrl</kbd> + <kbd>s</kbd> 快捷鍵保存</div>

<div style="height: 100px;background-color: #1b6d85"></div>

</body>
</html>


  --------------------------------------------------------------------------------------------------------------------------------------------

8绕沈、表格

（1）樣式:
Bootstrap 為表格提供了 1 種基礎樣式和 4 種附加樣式以及 1 個支持響應式
的表格锐想。在使用 Bootstrap 的表格過程中，只需要添加對應的類名就可以得到
不同的表格風格：
基礎樣式
1） .table：基礎表格
附加樣式\

.table-striped：斑馬線表格\
.table-bordered：帶邊框的表格\
.table-hover：鼠標懸停高亮的表格
4). table-condensed：緊湊型表格乍狐，單元格沒內距或者內距較其他表格
的內距更小
（2） <tr>提供了五種不同的類名赠摇，每種類名控制了行的不同背景顏色

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表格</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<table style="width: 800px;" class="table table-striped table-hover table-bordered table-condensed" >
    <tr >
        <th>分類ID</th>
        <th>分類名稱</th>
        <th>分類描述</th>
        <th>操作</th>
    </tr>
    <tr class="active">
        <td>1</td>
        <td>手機數(shù)碼</td>
        <td>手機數(shù)碼類商品</td>
        <td><a href="">修改</a>|<a href="">刪除</a></td>
    </tr>
    <tr class="info">
        <td>1</td>
        <td>手機數(shù)碼</td>
        <td>手機數(shù)碼類商品</td>
        <td><a href="">修改</a>|<a href="">刪除</a></td>
    </tr>
    <tr class="danger">
        <td>2</td>
        <td>電腦辦公</td>
        <td>電腦辦公類商品</td>
        <td><a href="">修改</a>|<a href="">刪除</a></td>
    </tr>
    <tr class="success">
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包類商品</td>
        <td><a href="">修改</a>|<a href="">刪除</a></td>
    </tr>
    <tr class="warning">
        <td>4</td>
        <td>家居飾品</td>
        <td>家居飾品類商品</td>
        <td><a href="">修改</a>|<a href="">刪除</a></td>
    </tr>
</table>


<div style="height: 100px;"></div>

</body>
</html>

五、表單
表單主要功能是用來與用戶做交流的一個網頁控件浅蚪，良好的表單設計能夠讓
網頁與用戶更好的溝通藕帜。表單中常見的元素主要包括：文本輸入框、下拉選擇框惜傲、
單選按鈕洽故、復選按鈕、文本域和按鈕等时甚。
1、表單控件
.form-control .input-lg（較大） .input-sm（較械段堋）
（1）輸入框
.form-control
（2）下拉選擇框 select
多行選擇設置： multiple="multiple"
（3）文本域 textarea

<textarea class="form-control" rows="3"></textarea>
（4）復選框 checkbox
.checkbox，水平顯示： .checkbox-inline

（5）單選擇按鈕
.radio帐要，水平顯示： .radio-inline

（6）按鈕
1）使用 button 實現(xiàn)
基礎樣式: btn
附加樣式： btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2）多標簽支持:使用 a div 等制作按鈕

3）按鈕大小
使用 .btn-lg、 .btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕

4）按鈕禁用
方法 1：在標簽中添加 disabled 屬性
方法 2：在元素標簽中添加類名"disabled"
在 class 屬性中添加 disabled 只是樣式上禁用了，并不是真正的禁用
了此按鈕期揪！

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表單1</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<!--布局容器-->
<div class="container">
    <!--文本框-->
    <div class="row">
        <div class="col-md-4">
            <label for="uname">姓名：</label>
            <input type="text" id="uname" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">姓名：</label>
            <input type="text" id="uname" class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">姓名：</label>
            <input type="text" id="uname" class="form-control input-lg" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">姓名：</label>
            <input type="text" id="uname" class="form-control input-sm" />
        </div>
    </div>
    <hr />
    <!--下拉框-->
    <div class="row">
        <div class="col-md-4">
            <label for="uname">城市：</label>
            <select>
                <option>-請選擇-</option>
                <option>北京</option>
                <option>上海</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">城市：</label>
            <select class="form-control">
                <option>-請選擇-</option>
                <option>北京</option>
                <option>上海</option>
            </select>
        </div>
    </div>

    <hr />
    <!--文本域-->
    <div class="row">
        <div class="col-md-4">
            <label for="uname">簡介：</label>
            <textarea  rows="5" cols="40"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">簡介：</label>
            <textarea class="form-control"  rows="5" cols="40"></textarea>
        </div>
    </div>
    <hr />

    <!--復選框-->
    <div class="row">
        <div class="col-md-4">
            <label for="uname">愛好：</label>
            <input type="checkbox" name="hobby" /> 唱歌
            <input type="checkbox" name="hobby"  /> 跳舞
            <input type="checkbox" name="hobby"  /> Rap
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">愛好：</label>
            <div class="checkbox">
                <label><input type="checkbox" >游戲1</label>
                <label><input type="checkbox" >游戲2</label>
            </div>
            <div>
                <label class="checkbox-inline">
                    <input type="checkbox" >游戲1
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" >游戲2
                </label>
            </div>
        </div>
    </div>
    <hr />

    <!--單選框-->
    <div class="row">
        <div class="col-md-4">
            <label for="usex">性別：</label>
            <input type="radio" name="usex" /> 男
            <input type="radio" name="usex"  /> 女
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <label for="uname">性別：</label>
            <div class="radio">
                <label><input type="radio" >男</label>
                <label><input type="radio" >女</label>
            </div>
            <div>
                <label class="radio-inline">
                    <input type="radio" >男
                </label>
                <label class="radio-inline">
                    <input type="radio" >女
                </label>
            </div>
        </div>
    </div>
    <hr />

    <!--按鈕-->
    <div class="row">
        <div class="col-md-4">
            <input type="button" value="按鈕1" />
            <button>按鈕2</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <input type="button" value="按鈕2" class="btn" />
            <button class="btn">按鈕2</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <input type="button" value="按鈕1" class="btn btn-default" />
            <button class="btn btn-primary">按鈕2</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <input type="button" value="按鈕1" class="btn btn-default btn-xs" />
            <button class="btn btn-primary btn-lg">按鈕2</button>
            <button class="btn btn-danger btn-sm">按鈕2</button>
            <button class="btn btn-success btn-sm">按鈕2</button>
            <button class="btn btn-info btn-sm">按鈕2</button>
            <button class="btn btn-warning btn-sm">按鈕2</button>
            <button class="btn btn-link btn-sm">按鈕2</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="btn btn-info">按鈕</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <button class="btn btn-danger" onclick="alert(1);" disabled="disabled">按鈕</button>
            <button class="btn btn-warning disabled" onclick="alert(1);" >按鈕</button>
        </div>
    </div>
    
</div>

<div style="height: 100px;"></div>
</body>
</html>

2. 表單案例

（1）水平表單:

同一行顯示 form-horizontal

配合 Bootstrap 框架的網格系統(tǒng)

（2）內聯(lián)表單：將表單的控件都在一行內顯示 form-inline

注意 label 不會顯示，存在的意義: 如果沒有為輸入控件設置 label 標簽，

屏幕閱讀器將無法正確識別镀钓。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>表單</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<!--水平表單-->
<form class="form-horizontal">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">郵箱</label>
        <div class="col-sm-2">
            <input type="email" class="form-control" placeholder="請輸入郵箱" />
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="control-label col-sm-2">密碼</label>
        <div class="col-sm-2">
            <input type="password" class="form-control" placeholder="請輸入密碼" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class=" checkbox">
                <label> <input type="checkbox" />記住密碼 </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-4">
            <button class="btn btn-default">提交</button>
        </div>
    </div>
</form>

<hr />

<!--內聯(lián)表單-->
<form class="form-inline">
    <div class="form-group">
        <label for="email">郵箱</label>
        <input type="email" class="form-control" placeholder="請輸入郵箱" />
    </div>
    <div class="form-group">
        <label for="password">密碼</label>
        <input type="password" class="form-control" placeholder="請輸入密碼" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" />記住密碼</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>
</body>
</html>

六唧瘾、下拉菜單
在使用 Bootstrap 框架的下拉菜單時，必須使用兩個 js

要點:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>下拉菜單</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<!--
         下拉菜單
            1、 使用一個類名為 dropdown 或 btn-group 的 div 包裹整個下拉框:
             <div class="dropdown"></div>
            2、 默認向下 dropdown犹赖，向上彈起加入 . dropup 即可
            3麸折、 使用 button 作為父菜單，使用類名: dropdown-toggle 和自定義 data-toggle 屬性
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            4芭析、 在 button 中 使用 font 制作下拉箭頭
               <span class="caret"></span>
            5芍秆、 下拉菜單項使用一個 ul 列表，并且定義一個類名為“dropdown-menu
            6霉颠、 分組分割線: <li>添加類名“divider”來實現(xiàn)添加下拉分隔線的功能
            7克伊、 分組標題: li 添加類名 “dropdown-header” 來實現(xiàn)分組的功能
            8酥郭、 對齊方式:
            1)、dropdown-menu-left 左對齊 默認樣式
            2)愿吹、dropdown-menu-right 右對齊
            8不从、激活狀態(tài)（.active）和禁用狀態(tài)（.disabled）
      -->
<body>
<div class="dropdown">
    <!--2、 使用 button 作為父菜單椿息，使用類名: dropdown-toggle 和自定義 data-toggle 屬性-->
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        歌曲
        <!--3痒给、在 button 中 使用 font 制作下拉箭頭-->
        <font class="caret"></font>
    </button>
    <!--4、下拉菜單項使用一個 ul 列表，并且定義一個類名為“dropdown-menu”-->
    <ul class="dropdown-menu">
        <!--分組標題: li 添加類名 “dropdown-header” 來實現(xiàn)分組的功能-->
        <li class="dropdown-header">----周杰倫----</li>
        <li class="active"><a href="#">等你下課</a></li>
        <li><a href="#">龍卷風</a></li>
        <li><a href="#">夜曲</a></li>
        <!--分組分割線: <li>添加類名“divider”來實現(xiàn)添加下拉分隔線的功能-->
        <li class="divider"></li>
        <li class="dropdown-header">----林俊杰----</li>
        <li><a href="#">江南</a></li>
        <li><a href="#">可惜沒如果</a></li>
        <li><a href="#">醉赤壁</a></li>
        <!--分組分割線: <li>添加類名“divider”來實現(xiàn)添加下拉分隔線的功能-->
        <li class="divider"></li>
        <li class="dropdown-header">----陳奕迅----</li>
        <li><a href="#">十年</a></li>
        <li><a href="#">好久不見</a></li>
        <li class="disabled"><a href="#">你的背包</a></li>
    </ul>
</div>
</body>
</html>

七按鈕組

同上引入 js侠鳄，需要引入 bootstrap 的 fonts 文件夾。
要點:

1、使用一個類名為 btn-group 的 div 包裹整個按鈕組
2周蹭、使用標簽 button 耍休、 a束亏、 span 制作按鈕揣炕，需要指定類名.btn
3、使用 span 制作圖標
4奉狈、大小分類: btn-group-lg btn-group btn-group-sm btn-group-xs
5、等分按鈕: 自適應分組按鈕 btn-group-justified
6、默認為水平翘魄，使用 btn-group-vertical 制作垂直按鈕組
7鼎天、按鈕工具欄: 在外層套用 .btn-toolbar 即可
8、注意： btn-group-lg 僅僅是放大按鈕，不能將所有的按鈕作為連接在一起的按鈕組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>按鈕組</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
         按鈕組
            1、 使用一個類名為 btn-group 的 div 包裹整個按鈕組
            2芭届、 使用標簽 button 拄丰、a、span 制作按鈕扬蕊，需要指定類名.btn
            3、 使用 span 制作圖標
            4、 大小分類: btn-group-lg btn-group btn-group-sm btn-group-xs
            5桑包、 等分按鈕: 自適應分組按鈕 btn-group-justified
            6、 默認為水平纺非，使用 btn-group-vertical 制作垂直按鈕組
            7哑了、 按鈕工具欄: 在外層套用 .btn-toolbar 即可
            8、 注意：btn-group-lg 僅僅是放大按鈕烧颖，不能將所有的按鈕作為連接在一起的按鈕組
      -->
<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">下拉鏈接 1</a></li>
            <li><a href="#">下拉鏈接 2</a></li>
        </ul>
    </div>
</div>

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">下拉鏈接 1</a></li>
            <li><a href="#">下拉鏈接 2</a></li>
        </ul>
    </div>
</div>

</body>
</html>

八弱左、導航
使用下拉與按鈕組合可以制作導航
要點:

1、基本樣式: .nav 與 "nav-tabs"炕淮、 "nav-pills"組合制作導航
2拆火、分類:
1)、標簽型 (nav-tabs)導航
2)涂圆、膠囊形(nav-pills)導航
3)们镜、堆棧(nav-stacked)導航
4)、自適應(nav-justified)導航
5)乘综、面包屑式(breadcrumb)導航憎账，單獨使用樣式，不與 nav 一起使用,直接加入到 ol卡辰、 ul 中即可胞皱，
一般用于導航邪意，主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置（當前位置）
3、狀態(tài):
1)反砌、選中狀態(tài) active 樣式
2)雾鬼、禁用狀態(tài): disable
4、二級菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>導航</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
         1宴树、 基本樣式: .nav 與 “nav-tabs”策菜、“nav-pills”組合制作導航
         2、 分類:
            1)酒贬、標簽型 (nav-tabs)導航
            2)又憨、膠囊形(nav-pills)導航
            3)、堆棧(nav-stacked)導航
            4)锭吨、自適應(nav-justified)導航
            5)蠢莺、面包屑式(breadcrumb)導航 ，單獨使用樣式零如，不與 nav 一起使用,直接加入到 ol躏将、ul 中即可，
            一般用于導航考蕾，主要是起的作用是告訴用戶現(xiàn)在所處頁面的位置（當前位置）
         3祸憋、狀態(tài):
            1)、選中狀態(tài) active 樣式
            2)肖卧、禁用狀態(tài): disable
         4蚯窥、二級菜單


         面包屑式導航

         分頁導航
            頁碼導航:ul 標簽上加 pagination [pagination-lg | pagination-sm]
            翻頁導航: ul 標簽上加 pager

      -->

<p>標簽式的導航菜單</p>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>
<hr />
<p>基本的膠囊式導航菜單</p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>
<hr />
<p>垂直的膠囊式導航菜單</p>
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>
<hr />
<p>面包屑式導航</p>
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>

<hr />
<p>分頁導航</p>
<ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
<hr />
<p>翻頁導航</p>
<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

</body>
</html>

九、縮略圖: thumbnail

**
**縮略圖在電商類的網站很常見喜命，最常用的地方就是產品列表頁面沟沙。縮略圖的
實現(xiàn)是配合網格系統(tǒng)一起使用壁榕。同時還可以讓縮略圖配合標題、描述內容赎瞎，按鈕等牌里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>縮略圖</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <!--引入Jquery的核心js文件-->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <!--引入BootStrap的核心js文件-->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/gyy.jpg" alt="...">
                <h3>高圓圓</h3>
                <p>出生于北京市，中國內地影視女演員务甥、模特牡辽。</p>
                <button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜歡</button>
                <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 評論</button>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/gyy.jpg" alt="...">
                <h3>高圓圓</h3>
                <p>出生于北京市，中國內地影視女演員敞临、模特态辛。</p>
                <button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜歡</button>
                <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 評論</button>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/gyy.jpg" alt="...">
                <h3>高圓圓</h3>
                <p>出生于北京市，中國內地影視女演員挺尿、模特奏黑。</p>
                <button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜歡</button>
                <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 評論</button>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/gyy.jpg" alt="...">
                <h3>高圓圓</h3>
                <p>出生于北京市炊邦，中國內地影視女演員、模特熟史。</p>
                <button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜歡</button>
                <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 評論</button>
            </div>
        </div>
    </div>
</div>


</body>
</html>

十馁害、面板

默認的 .panel 組件所做的只是設置基本的邊框（border）和內補
（padding）來包含內容。
.panel-default：默認樣式
.panel-heading：面板頭
.panel-body：面板主體內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>面板</title>
    <!--引入BootStrap的核心css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>

<!--
    默認的 .panel 組件所做的只是設置基本的邊框（border）和內補 （padding）來包含內容蹂匹。
    .panel-default：默認樣式
    .panel-heading：面板頭
    .panel-body：面板主體內容
-->
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">
            帶有 title 的面板標題
        </h3>
    </div>
    <div class="panel-body">
        <div style="height: 300px;">
            我是內容
            <ul class="list-group">
                <li class="list-group-item">免費域名注冊</li>
                <li class="list-group-item active">免費 Window 空間托管</li>
                <li class="list-group-item">圖像的數(shù)量</li>
                <li class="list-group-item">24*7 支持</li>
                <li class="list-group-item">每年更新成本</li>
            </ul>
        </div>

    </div>
</div>


</body>
</html>

最后編輯于：2019.06.03 23:28:46

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末碘菜，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子限寞，更是在濱河造成了極大的恐慌忍啸，老刑警劉巖，帶你破解...
沈念sama閱讀 217,277評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件履植，死亡現(xiàn)場離奇詭異吊骤，居然都是意外死亡，警方通過查閱死者的電腦和手機静尼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,689評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門白粉，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人鼠渺，你說我怎么就攤上這事鸭巴。” “怎么了拦盹？”我有些...
開封第一講書人閱讀 163,624評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵鹃祖，是天一觀的道長。經常有香客問我普舆，道長恬口，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,356評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任沼侣，我火速辦了婚禮祖能，結果婚禮上，老公的妹妹穿的比我還像新娘蛾洛。我一直安慰自己养铸，他們只是感情好，可當我...
茶點故事閱讀 67,402評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布轧膘。她就那樣靜靜地躺著钞螟，像睡著了一般。火紅的嫁衣襯著肌膚如雪谎碍。梳的紋絲不亂的頭發(fā)上鳞滨，一...
開封第一講書人閱讀 51,292評論 1贊 301
城市分裂傳說
那天，我揣著相機與錄音蟆淀，去河邊找鬼拯啦。笑死澡匪，一個胖子當著我的面吹牛，可吹牛的內容都是我干的提岔。我是一名探鬼主播仙蛉，決...
沈念sama閱讀 40,135評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼碱蒙！你這毒婦竟也來了荠瘪？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 38,992評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤赛惩，失蹤者是張志新（化名）和其女友劉穎哀墓，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體喷兼，經...
沈念sama閱讀 45,429評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡篮绰，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,636評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了季惯。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吠各。...
茶點故事閱讀 39,785評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖勉抓，靈堂內的尸體忽然破棺而出贾漏，到底是詐尸還是另有隱情，我是刑警寧澤藕筋，帶...
沈念sama閱讀 35,492評論 5贊 345
?日本核電站爆炸內幕
正文年R本政府宣布纵散，位于F島的核電站，受9級特大地震影響隐圾，放射性物質發(fā)生泄漏伍掀。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,092評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一暇藏、第九天我趴在偏房一處隱蔽的房頂上張望蜜笤。院中可真熱鬧，春花似錦叨咖、人聲如沸瘩例。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,723評論 0贊 22
一樁弒父案甸各，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至焰坪，卻和暖如春趣倾，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背某饰。一陣腳步聲響...
開封第一講書人閱讀 32,858評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工儒恋，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留善绎，地道東北人。一個月前我還...
沈念sama閱讀 47,891評論 2贊 370
代替公主和親
正文我出身青樓诫尽，卻偏偏與公主長得像禀酱，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子牧嫉，可洞房花燭夜當晚...
茶點故事閱讀 44,713評論 2贊 354

Bootstrap-06(/2019/6/2)

Bootstrap

三、 柵格網格系統(tǒng)(Grid System)

推薦閱讀更多精彩內容

三、柵格網格系統(tǒng)(Grid System)