碼上快樂

相關內容    簡體    繁體

Python學習筆記第二十七周（Bootstrap）

本文轉載自   查看原文   2017-09-18 22:36   2817 

目錄：

　　全局樣式

　　一、柵格系統

　　二、表單

　　三、按鈕

 　  四、導航

　　五、按鈕組

　　六、面板

　　七、表格

　　八、分頁

　　九、排版

　　十、圖片

　　十一、輔助類

　　十二、響應式工具

　　組件

 

內容：

　　前言：

　　首先通過https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css 鏈接下載bootstrap.min.css保存到本地，然后執行下面操作

　　全局樣式：

　　一、柵格系統

　　　　柵格系統是頁面布局使用，是區分列布局使用的，一般bootstrap將整個頁面分為12份，可以任意組合自己想要的列分割方式，在div標簽中使用col-XX的方式來實現，該方式有幾種方法：

    1. col-md-XX   其中md表示中等距離，XX表示一共分幾分，例如，四個div標簽，如果想並排且等分，可以使用class=‘col-md-3’來實現
    2. col-sm-XX   sm表示小，XX同上
    3. col-xs-XX   xs表示極小，XX同上

　　例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
     col代表列的意思，md表示樣式，默認分成12分，4代表三個元素每個占3分之一
    <div class="col-md-3">Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
    <div class="col-md-3">Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
    <div class="col-md-3">Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
    <div class="col-md-3">Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
     <!--小使用sm-->
    <div class="col-sm-3">Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
    <div class="col-sm-3">Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
    <div class="col-sm-3">Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
    <div class="col-sm-3">Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>

    #布局實例，左面和右面是兩份，中間是8份,一共12份
    <div class="col-sm-2">
        <h3>主側欄</h3>
        Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
    <div class="col-sm-8">
        <h3>內容</h3>
        Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>
    <div class="col-sm-2">
        <h3>右側欄</h3>
        Bootstrap （當前版本 v3.3.7）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。
        繼續閱讀下面的內容，看看哪種方式適合你的需求吧。</div>


</body>
</html>
柵格系統

 

 

　　二、表單

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<form class="container container-small">
    <div class="form-inline">
        <h1>注冊</h1>
        <div class="form-group has-error">
            <label class="control-label">姓</label>
            <input type="text" class="form-control input-lg">
        </div>
        <div class="form-group has-success">
            <label class="control-label">名</label>
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="form-group ">
        <label class="control-label">充值金額</label>
        <div class="input-group">
            <div class="input-group-addon input-sm">￥</div>
            <input type="text" class="form-control"></div>
    </div>
    <div class="form-group">
        <label>Other</label>
        <select class="form-control ">
            <option value="1">雙刀</option>
            <option value="2">山丹</option>
            <option value="3">貝貝</option>
        </select>
    </div>
    <div class="row">
        <div class="col-md-4 ">
            <input type="text" class="form-control">
        </div>
        <div class="col-md-4 ">
            <input type="text" class="form-control">
        </div>
        <div class="col-md-4 ">
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <input type="submit" class="form-control">
        </div>
    </div>
</form>

<!--textarea模式-->
<form action="" class="container">
    <div class="form-group">
        <label for="">留言</label>
        <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
    </div>

    <!--select模式-->
    <div class="form-group">
        <select name="" id="" class="form-control">
            <option value="">北京</option>
            <option value="">北京</option>
            <option value="">北京</option>
        </select>
    </div>
    <div class="form-group">
        <label for="">選擇題</label>
        <div class="radio">
            <label >
                <input type="radio" name="aaa">籃球
            </label>
        </div>
        <div class="radio">
            <label >
                <input type="radio" name="aaa">籃球
            </label>
        </div>
        <div class="radio">
            <label >
                <input type="radio" name="aaa">籃球
            </label>
        </div>
    </div>
    <div class="form-group">
        <label for="">選擇題</label>
        <div class="radio">
            <label >
                <input type="checkbox" name="aaa"> 籃球
            </label>
        </div>
        <div class="radio">
            <label >
                <input type="checkbox" name="aaa"> 籃球
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="checkbox" name="aaa"> 籃球
            </label>
        </div>
    </div>
</form>

</body>
</html>
View Code

　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div class="container">
<form action="" class="form-horizaontal">
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">用戶名：</label>
        <div class="col-sm-10">
            <input type="text" class="form-control">
        </div>
    </div>
    <br>
    <br>

    <div class="form-group">
        <label for="" class="col-sm-2 control-label">密碼：</label>
        <div class="col-sm-10">
            <input type="text" class="form-control">
        </div>
    </div>
    <br>
    <br>
    
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input value="ok" type="submit" class=" btn btn-primary">
            
            <input value="reset" type="reset" class=" btn btn-danger">
        </div>
    </div>
</form>
    </div>
</body>
</html>
表單水平排列

form-control能支持的控件：

1、input

2、textarea

如果支持多行，可以根據需要改變rows屬性

<textarea class="form-control" rows=3></textarea>

3、select

 

單選多選放在同一行：

class="checkbox-inline"或 radio-inline

 

靜態控件：

<form action="" class="form-horizaontal">
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">用戶名：</label>
        <div class="col-sm-10">
            <p class="form-control-static">小金</p><!-- 通過form-control-static方式將值固定 -->
        </div>
    </div>
View Code

 

全部禁用表單

 <!--如果要求全部禁用，可以使用fieldset來完成-->
    <form action="" class="form-horizaontal">
        <fieldset disabled>
    <div class="form-group">
        <label for="" class="col-sm-2 control-label">用戶名：</label>
        <div class="col-sm-10">
            <p class="form-control-static">小金</p><!-- 通過form-control-static方式將值固定 -->
        </div>
    </div>
    <br>
    <br>

    <div class="form-group">
        <label for="" class="col-sm-2 control-label">密碼：</label>
        <div class="col-sm-10">
            <input type="text" class="form-control">
        </div>
    </div>
    <br>
    <br>

    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input value="ok" type="submit" class=" btn btn-primary">

            <input value="reset" type="reset" class=" btn btn-danger">
        </div>
    </div>
</form>
    </fieldset>
View Code

 在表單內添加文字型圖標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>

    <form action="" class="form-horizontal">
        <!--如果要在表單內添加文字圖片，可以使用has-feedback-->
        <div class="form-group has-success has-feedback">
            <label for="" class="col-sm-2 control-label">用戶名：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control"/>
                <!--在span內需要添加form-control-feedback-->
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
        </div>

        <div class="form-group has-error has-feedback">
            <label for="" class="col-sm-2 control-label">密碼：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control"/>
                <span class="glyphicon glyphicon glyphicon-remove form-control-feedback"></span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <input value="ok" type="submit" class=" btn btn-primary">
                <input value="reset" type="reset" class=" btn btn-danger">
            </div>
        </div>
    </form>

</body>
</html>
View Code

 

添加幫助信息

<form action="" class="form-horizontal">
        <!--如果要在表單內添加文字圖片，可以使用has-feedback-->
        <div class="form-group has-success has-feedback">
            <label for="" class="col-sm-2 control-label">用戶名：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control"/>
                <!--在span內需要添加form-control-feedback-->
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                <!--help-block添加幫助信息-->
                <span class="help-block">glyphicon glyphicon-ok form-control-feedback</span>
            </div>

        </div>
View Code

 

　

　　三、按鈕

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
   <!--well類就表示一個邊距-->
<div class="well">
    <!--btn方式可以讓按鈕的四個角變圓滑，后面的btn-default是按鈕的樣式-->
    <button class="btn btn-default">戳我</button>
    <button class="btn btn-primary">戳我</button>
    <button class="btn btn-danger">戳我</button>
    <button class="btn btn-warning">戳我</button>
    <button class="btn btn-info">戳我</button>
    <!--可以對鏈接也加上btn和btn-XX樣式，可以使超鏈接變成想要的樣式-->
    <a href="http://www.baidu.com" class="btn btn-danger">斷網測試</a>
    <input type="submit" class="btn btn-primary" value="戳我"/>


    <hr>
    <!--通過btn-lg來擴大按鈕大小，btn-sm表示小，btn-xs表示極小-->
    <button class="btn btn-default btn-lg">戳我</button>
    <button class="btn btn-default ">戳我</button>
    <button class="btn btn-primary btn-sm">戳我</button>
    <button class="btn btn-danger btn-xs">戳我</button>
    <hr>
    <!--btn-block大小占據母元素整個邊界-->
    <button class="btn  btn-block">戳我</button>
    <hr>
    <!--active表示選中 disabled=disabled表示禁用-->
    <button class="btn btn-default active">戳我</button>
    <button class="btn  btn-default ">戳我</button>
    <button disabled="disabled" class="btn btn-default ">戳我</button>
</div>
</body>
</html>
View Code

 

　　四、導航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="nav nav-tabs nav-justified">
    <!--橫排顯示 平均分布-->
    <li class="active"><a href="#">登錄</a></li>
    <li><a href="#">注冊</a></li>
    <li><a href="#">忘記密碼</a></li>
</ul>
<div>
    <h1>登錄</h1>
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
</div>
<br>

<ul class="nav nav-pills nav-stacked ">
    <li class="active"><a href="#">登錄</a></li>
    <li><a href="#">注冊</a></li>
    <li><a href="#">忘記密碼</a></li>
</ul>
<div>
    <h1>登錄</h1>
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
</div>
<br>
<!--側欄顯示-->
<div class="row">
<div class="col-xs-4">
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">登錄</a></li>
    <li><a href="#">注冊</a></li>
    <li><a href="#">忘記密碼</a></li>
</ul>
        </div>

<div class="col-xs-8">
    <h1>登錄</h1>
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
    </div>
</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar navbar-default">
    <!--container來約束內容的位置-->
    <div class="container">
        <div class="navbar-header">
            <!--標題logo使用navabar-brand來顯示，表示一個連接-->
            <a href="#" class="navbar-brand">修大花</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#">首頁</a></li>
            <li><a href="#">產品</a></li>
            <li><a href="#">聯系我們</a></li>
        </ul>
        <!--添加搜索欄，navbar-left要求向左浮動-->
        <form  class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control">
        </div>
        <button  type="submit" class="btn btn-default">搜索</button>
            </form>
        <!--navbar-right表示靠后浮動-->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">登錄</a></li>
            <li><a href="#">注冊</a></li>

        </ul>
    </div>
</div>
<div class="container">
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>
</body>
</html>
全局導航

 

　　五、按鈕組　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="well">
    <!--btn-toolbar將btn組分組-->
    <div class=" btn-toolbar">
        <!--三個按鈕連接在一起，形成控制按鈕組-->
        <div class=" btn-group btn-group-lg">
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
        </div>
        <div class=" btn-group ">
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
        </div>
        <div class=" btn-group btn-group-sm">
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
        </div>
        <div class=" btn-group btn-group-xs">
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
        </div>
        <br>
        <!--橫向-->
        <div class=" btn-group-vertical">
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
            <button class="btn btn-default">點擊</button>
        </div>
    </div>
</div>
</body>
</html>
View Code

 　　六、面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--這個例子需要結合main.css里的body{max-width:400px； padding： 20px auto}-->
<div class="panel panel-default">
    <div class="panel-heading">
        <!--title表示更醒目-->
        <div class="panel-title">
            用戶統計
        </div>
        <div class="small text-muted">每日用戶統計</div>
    </div>
    <div class="panel-body">
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    </div>
    <div class="panel-footer">
        <!--底部描述要求字符小，而且類似於禁用模式-->
        <div class="small text-muted">數據更新於5秒前</div>

    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <!--title表示更醒目-->
        <div class="panel-title">
            用戶統計
        </div>
        <div class="small text-muted">每日用戶統計</div>
    </div>
    <div class="panel-body">
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    </div>
    <div class="panel-footer">
        <!--底部描述要求字符小，而且類似於禁用模式-->
        <div class="small text-muted">數據更新於5秒前</div>

    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <!--title表示更醒目-->
        <div class="panel-title">
            用戶統計
        </div>
        <div class="small text-muted">每日用戶統計</div>
    </div>
    <div class="panel-body">
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    </div>
    <div class="panel-footer">
        <!--底部描述要求字符小，而且類似於禁用模式-->
        <div class="small text-muted">數據更新於5秒前</div>
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <!--title表示更醒目-->
        <div class="panel-title">
            用戶統計
        </div>
        <div class="small text-muted">每日用戶統計</div>
    </div>
    <div class="panel-body">
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    </div>
    <div class="panel-footer">
        <!--底部描述要求字符小，而且類似於禁用模式-->
        <div class="small text-muted">數據更新於5秒前</div>

    </div>
</div>
</body>
</html>
View Code

 

　　七、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<table class="table">
    <thead>
    <tr>
        <th>姓名</th>
        <th>郵箱</th>
        <th>注冊於</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>修大花</td>
        <td>xdh@163.com</td>
        <td>2048-10-04</td>
    </tr>
    <tr>
        <td>大大大</td>
        <td>ddd@163.com</td>
        <td>2048-10-03</td>
    </tr>
    <tr>
        <td>小小小</td>
        <td>sss@163.com</td>
        <td>2048-09-03</td>
    </tr>
    </tbody>
</table>
<!--單復數行顯示不同加table-striped-->
<table class="table table-striped">
    <thead>
    <tr>
        <th>姓名</th>
        <th>郵箱</th>
        <th>注冊於</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>修大花</td>
        <td>xdh@163.com</td>
        <td>2048-10-04</td>
    </tr>
    <tr>
        <td>大大大</td>
        <td>ddd@163.com</td>
        <td>2048-10-03</td>
    </tr>
    <tr>
        <td>小小小</td>
        <td>sss@163.com</td>
        <td>2048-09-03</td>
    </tr>
    </tbody>
</table>
<!--table-hover在鼠標划上去的時候會有着重顯示-->
<table class="table table-hover">
    <thead>
    <tr>
        <th>姓名</th>
        <th>郵箱</th>
        <th>注冊於</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>修大花</td>
        <td>xdh@163.com</td>
        <td>2048-10-04</td>
    </tr>
    <tr>
        <td>大大大</td>
        <td>ddd@163.com</td>
        <td>2048-10-03</td>
    </tr>
    <tr>
        <td>小小小</td>
        <td>sss@163.com</td>
        <td>2048-09-03</td>
    </tr>
    </tbody>
</table>
<!--加邊框用table-bordered-->
<table class="table table-bordered">
    <thead>
    <tr>
        <th>姓名</th>
        <th>郵箱</th>
        <th>注冊於</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>修大花</td>
        <td>xdh@163.com</td>
        <td>2048-10-04</td>
    </tr>
    <tr>
        <td>大大大</td>
        <td>ddd@163.com</td>
        <td>2048-10-03</td>
    </tr>
    <tr>
        <td>小小小</td>
        <td>sss@163.com</td>
        <td>2048-09-03</td>
    </tr>
    </tbody>
</table>
<!--對於特殊用戶特殊對待，用danger，warning、success，info-->
<table class="table table-striped">
    <thead>
    <tr>
        <th>姓名</th>
        <th>郵箱</th>
        <th>注冊於</th>
    </tr>
    </thead>
    <tbody>
    <tr class="danger">
        <td>修大花</td>
        <td>xdh@163.com</td>
        <td>2048-10-04</td>
    </tr>
    <tr class="success">
        <td>大大大</td>
        <td>ddd@163.com</td>
        <td>2048-10-03</td>
    </tr>
    <tr class="warning">
        <td>小小小</td>
        <td>sss@163.com</td>
        <td>2048-09-03</td>
    </tr>
    </tbody>
</table>
<!--響應式表格,需要列多才可以撐開-->
<div class="container">
<div class="table-responsive">
    <table class="table ">
        <tr>
            <th>姓名</th>
            <th>郵箱</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
            <th>注冊於</th>
        </tr>


        <tr class="danger">
            <td>修大花</td>
            <td>xdh@163.com</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
            <td>2048-10-04</td>
        </tr>
        <tr class="success">
            <td>大大大</td>
            <td>ddd@163.com</td>
            <td>2048-10-03</td>
            <td>2048-10-03</td>
            <td>2048-10-03</td>
            <td>2048-10-03</td>
            <td>2048-10-03</td>
            <td>2048-10-03</td>
            <td>2048-10-03</td>
        </tr>
        <tr class="warning">
            <td>小小小</td>
            <td>sss@163.com</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
            <td>2048-09-03</td>
        </tr>

    </table>
    </div>
</div>
</body>
</html>
View Code

　　八、分頁

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>
    <!--alert提醒-->
    <div class="alert alert-danger">嗯</div>
    <div class="alert alert-success">嗯</div>
</div>
<div class="breadcrumb">
    <li><a href="#">首頁</a></li>
    <li><a href="#">文字列表</a></li>
    <!--在下面添加徽章，表示有多少閱讀量-->
    <li class="active">文字地址<span class="badge ">50k</span></li>
</div>
<h1>Yo, world</h1>
<p>
    <!--顯示副標題-->
    <div class="label label-success">面霜</div>
    <div class="label label-danger">water baby</div>
    <div class="label label-warning">http</div>
</p>
<div>
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<span class="label label-success">ZZZZZ</span>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
    ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
</div>
<button class="btn btn-primary">贊 <span class="badge"> 50</span></button>
<div>
    <!--投票列表-->
    <div class="list-group">
        <a href="" class="list-group-item">item</a>
        <a href="" class="list-group-item">item</a>
        <a href="" class="list-group-item">item</a>
        <a href="" class="list-group-item">item</a>
        <a href="" class="list-group-item">item</a>
    </div>
</div>
<div>
<ul class="pagination">
    <!--當前頁-->
    <li class="active"><a  href="#">上一頁</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">下一頁</a></li>
</ul>
<ul class="pager">
    <li><a href="#">上一頁</a></li>
    <!--disabled表示禁用-->
    <li class="disabled"><a  href="#">下一頁</a></li>
</ul>
    </div>
</body>
</html>
View Code

 　　九、排版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="css/jquery.js"></script>
    <scrtipt  src="css/bootstrap.js"></scrtipt>
</head>
<body>
<div class="container">
    <h1 class="page-header">Bootstrap前端框架</h1>
    <!--kbd顯示為黑色背景-->
    <p>linux is <kbd> ctrl+shift</kbd> very muck!</p>
    <!--var顯示為斜體-->
    <p>linux is <var> ctrl+shift</var> very muck!</p>
    
    
</div>
</body>
</html>
View Code

　　  十、圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="css/jquery.js"></script>
    <scrtipt  src="css/bootstrap.js"></scrtipt>
</head>
<body>
    <div class="container">
        <h1>Bootstrap圖片</h1>
        <div>
            <!--正方形，四個角帶弧度-->
            <img src="css/tu.jpg" width="200px" class="img-rounded">
            <!--變為圓形-->
            <img src="css/tu.jpg" width="200px" class="img-circle">
            <!--修改背景為白色-->
            <img src="css/tu.jpg" width="200px" class="img-thumbnail">

        </div>
    </div>
</body>
</html>
View Code

　　 十一、輔助類　 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="css/jquery.js"></script>
    <scrtipt  src="css/bootstrap.js"></scrtipt>
</head>
<body>
    <!--文本顏色-->
    <p class="text-muted">Liunx is very much</p>
    <p class="text-success">Liunx is very much</p>
    <p class="text-danger">Liunx is very much</p>
    <p class="text-warning">Liunx is very much</p>
    <p class="text-info">Liunx is very much</p>
    <p class="text-primary">Liunx is very much</p>
    <!--背景顏色-->
    <p class="bg-danger">Liunx is very much</p>
    <p class="bg-warning">Liunx is very much</p>
    <p class="bg-info">Liunx is very much</p>
    <p class="bg-primary">Liunx is very much</p>
    <!--對該段添加關閉按鈕通過class=close添加-->
    <p class="bg-primary">Liunx is very much <span class="close">&times;</span></p>
    <!--添加小三角-->
    <!--向右浮動 pull-right pull-left向左浮動  clearfix清除浮動-->
    <h2 class="bg-primary">Liunx is very much  <button class="btn btn-primary  pull-right">更多 <span class="caret"></span></button></h2>
    <!--塊標簽居中也就是margin：0 auto-->
    <p class="text-info center-block">Liunx is very much</p>

    <!--hide和show是顯示和隱藏-->
    <p class="text-info hide">Liunx is very muchabc</p>
    <p class="text-info show">Liunx is very muchaaaaa</p>
</body>
</html>
View Code

 　　十二、響應式工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/boostrap.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="css/jquery.js"></script>
    <scrtipt  src="css/bootstrap.js"></scrtipt>
</head>
<body>
    <div class="container">
        <h1>Bootstrap響應式工具</h1>
        <div>
            img-responsive響應式圖片
            <img src="css/tu.jpg"  class="img-rounded img-responsive">


        </div>
    </div>
</body>
</html>
View Code

 

　

　組件

 　一、圖標字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <scrtipt  src="../bootstrap/js/bootstrap.js"></scrtipt>
</head>
<body>
    <p><span class="glyphicon glyphicon-euro"></span>Linux is very much</p>
    <p><span class="glyphicon glyphicon-asterisk"></span>Linux is very much</p>

    <button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-left"></span></button>
    <button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-right"></span></button>
    <button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-bottom"></span></button>
    <button class="btn btn-primary">更多<span class="glyphicon glyphicon-triangle-top"></span></button>
</body>
</html>
View Code

　　二、下拉菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-primary" data-toggle="dropdown">更多課程 <span class="glyphicon glyphicon-triangle-bottom"></span></button>
        <ul class="dropdown-menu">
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
        </ul>
    </div>

    <!--在下拉菜單中通過dropdown-header添加標題，通過divider分割事項-->


    <div class="dropdown ">
        <button class="btn btn-primary" data-toggle="dropdown">更多課程 <span class="glyphicon glyphicon-triangle-bottom"></span></button>
        <ul class="dropdown-menu  ">
            <li class="dropdown-header">周一事項</li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">周二事項</li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
        </ul>
    </div>


<div class="dropdown pull-right">
        <button class="btn btn-primary" data-toggle="dropdown">更多課程 <span class="glyphicon glyphicon-triangle-bottom"></span></button>
        <ul class="dropdown-menu  dropdown-menu-right">
            <li class="dropdown-header">周一事項</li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">周二事項</li>
            <li><a href="">aaaa</a></li>
            <li><a href="">aaaa</a></li>
        </ul>
    </div>







</div>
</body>
</html>
View Code

　　三、按鈕組

　　1、普通按鈕組、按鈕工具箱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <scrtipt src="../bootstrap/js/bootstrap.js"></scrtipt>
</head>
<body>
<div class="container">
    <div class="btn-toolbar">
        <div class="btn-group">
            <button class="btn btn-primary">百度</button>
            <button class="btn btn-danger">百度</button>
            <button class="btn btn-info">百度</button>
            <button class="btn btn-warning">百度</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-primary">百度</button>
            <button class="btn btn-danger">百度</button>
            <button class="btn btn-info">百度</button>
            <button class="btn btn-warning">百度</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-primary">百度</button>
            <button class="btn btn-danger">百度</button>
            <button class="btn btn-info">百度</button>
            <button class="btn btn-warning">百度</button>
        </div>
    </div>
</div>
</body>
</html>
View Code

　　2、按鈕組尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <scrtipt src="../bootstrap/js/bootstrap.js"></scrtipt>
</head>
<body>
<div class="container">
    <div class="btn-toolbar">
        <div class="btn-group btn-group-lg">
            <button class="btn btn-primary">百度</button>
            <button class="btn btn-danger">百度</button>
            <button class="btn btn-info">百度</button>
            <button class="btn btn-warning">百度</button>
        </div>
        <div class="btn-group btn-group-sm">
            <button class="btn btn-primary">百度</button>
            <button class="btn btn-danger">百度</button>
            <button class="btn btn-info">百度</button>
            <button class="btn btn-warning">百度</button>
        </div>
        <div class="btn-group btn-group-xs">
            <button class="btn btn-primary">百度</button>
            <button class="btn btn-danger">百度</button>
            <button class="btn btn-info">百度</button>
            <button class="btn btn-warning">百度</button>
        </div>
    </div>
</div>
</body>
</html>
View Code

　　3、嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <div class="btn-group">
        <button class="btn btn-primary">百度</button>
        <button class="btn btn-danger">百度</button>
        <div class="btn-group dropdown">
            <!--保證下拉菜單也是帶圓弧的，需要添加drop-toggle的class屬性-->
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">百度 <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">aaa</a></li>
                <li><a href="#">aaa</a></li>
                <li><a href="#">aaa</a></li>
                <li><a href="#">aaa</a></li>
            </ul>
        </div>

    </div>
</div>



</div>
</body>
</html>
View Code

　　4、垂直排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <!--添加btn-group-vertical垂直排列-->
    <div class="btn-group btn-group-vertical">
        <button class="btn btn-primary">百度</button>
        <button class="btn btn-danger">百度</button>
        <div class="btn-group dropdown">
            <!--保證下拉菜單也是帶圓弧的，需要添加drop-toggle的class屬性-->
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">百度 <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="#">aaa</a></li>
                <li><a href="#">aaa</a></li>
                <li><a href="#">aaa</a></li>
                <li><a href="#">aaa</a></li>
            </ul>
        </div>

    </div>
</div>



</div>
</body>
</html>
View Code

　　5、兩端對齊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">

    <div class="btn-group  btn-group-justified">
        <div class="btn-group">
            <button class="btn btn-primary">百度</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-primary">百度</button>
        </div>
        <div class="btn-group">
            <button class="btn btn-primary">百度</button>
        </div>
    </div>
</div>



</body>
</html>
View Code

　　6、分列式下拉菜單

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
View Code

 

　　四、輸入框旁邊添加額外的樣式符號

<form action="" >
            <!--input-group下輸入input-group-addon的模式來顯示-->
            <div class="input-group input-group-lg">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control">
                <div class="input-group-addon">.00</div>
            </div>
            <div class="input-group input-group-sm">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control">
                <div class="input-group-addon">.00</div>
            </div>
            <div class="input-group ">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control">
                <div class="input-group-addon">.00</div>
            </div>
            
        </form>
View Code

　　五、作為額外元素的按鍵

<form action="" >
            

                <!--添加額外的元素按鈕-->
            <div class="input-group ">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-primary" value="GO">
                </div>
                <input type="text" class="form-control">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-primary" value="GO">
                </div>
            </div>
        </form>
View Code

 

　　六、導航

　　1、標簽頁式導航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>
        .row{
            padding: 15px 15px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-header">Bootstrap</h1>
        <ul class="nav nav-tabs">
            <li class="">
                <a href="">Linux</a>
            </li>
            <li class="">
                <a href="">Linux</a>
            </li>
            <li class="">
                <a href="">Linux</a>
            </li>
        </ul>
        <div class="row">
            <p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
            linux is ver much
            linux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
        </p>
        </div>
        <div class="row">
            <p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
            linux is ver much
            linux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
        </p>
        </div>
        <div class="row">
            <p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
            linux is ver much
            linux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
        </p>
        </div>
    </div>
    <script>
        $('li').mouseenter(function () {
            $(this).addClass('active');
            $('li').not($(this)).removeClass('active');
            idx = $(this).index('li');
            $('.row').eq(idx).show();
            $('.row').not($('.row').eq(idx)).hide();
        });
        $('.row').eq(0).show();

    </script>
</body>
</html>
View Code

　　2、膠囊式導航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>
        .row{
            padding: 15px 15px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-header">Bootstrap</h1>
        <!--nav-pills表示膠囊式導航索引-->
        <ul class="nav nav-pills">
            <li class="">
                <a href="">Linux</a>
            </li>
            <li class="">
                <a href="">Linux</a>
            </li>
            <li class="">
                <a href="">Linux</a>
            </li>
        </ul>
        <div class="row">
            <p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
            linux is ver much
            linux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
        </p>
        </div>
        <div class="row">
            <p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
            linux is ver much
            linux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
        </p>
        </div>
        <div class="row">
            <p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much
            linux is ver much
            linux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
            linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
        </p>
        </div>
    </div>
    <script>
        $('li').mouseenter(function () {
            $(this).addClass('active');
            $('li').not($(this)).removeClass('active');
            idx = $(this).index('li');
            $('.row').eq(idx).show();
            $('.row').not($('.row').eq(idx)).hide();
        });
        $('.row').eq(0).show();

    </script>
</body>
</html>
View Code

　　3、豎排膠囊方式導航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>
        .navs {
            padding: 15px 0;
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">Bootstrap</h1>
    <!--nav-pills表示膠囊式導航索引,nav-stacked表示 側欄堆疊，同時引入col-md方式水平排列-->
    <div class="row">
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li class="">
                    <a href="">Linux</a>
                </li>
                <li class="">
                    <a href="">Linux</a>
                </li>
                <li class="">
                    <a href="">Linux</a>
                </li>
            </ul>
        </div>
        <div class="col-md-10">
            <div class="navs">
                <p>linux is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is
                    ver
                    much
                    linux is ver much
                    linux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver
                    much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                </p>
            </div>
            <div class="navs">
                <p>php is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver
                    much
                    linux is ver much
                    linux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver
                    much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                </p>
            </div>
            <div class="navs">
                <p>java is ver much linux is ver much linux is ver much linux is ver much linux is ver much linux is ver
                    much
                    linux is ver much
                    linux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver muchlinux is ver
                    much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                    linux is ver muchlinux is ver muchlinux is ver muchlinux is ver much
                </p>
            </div>
        </div>
    </div>
</div>
<script>
    $('li').mouseenter(function () {
        $(this).addClass('active');
        $('li').not($(this)).removeClass('active');
        idx = $(this).index('li');
        $('.navs').eq(idx).stop().show(1000);
        $('.navs').not($('.navs').eq(idx)).stop().hide(100);
    });
    $('.navs').eq(0).show(100);

</script>
</body>
</html>
View Code

 

　　七、導航條

　　1、基礎導航條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>

</div>

<script>

</script>
</body>
</html>
View Code

　　2、inverse反色導航條

<nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>
View Code

　　3、導航條中直接button搜索而沒有input框使用navbar-btn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>
<!--inverse代表反色-->
<nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <!--導航條中直接放按鈕而沒有input輸入，使用navbar-btn-->
        <input type="button" class="btn btn-default navbar-btn" value="搜索">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>

</div>

<script>

</script>
</div></body>
</html>
View Code

　　4、在導航條內放文字使用navbar-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>
<!--inverse代表反色-->
<nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <!--導航條中直接放按鈕而沒有input輸入，使用navbar-btn-->
        <input type="button" class="btn btn-default navbar-btn" value="搜索">
        <!--在導航條內放文字使用navbar-text-->
        <p class="navbar-text">小小網站</p>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>

</div>

<script>

</script>
</div></div></div></body>
</html>
View Code

　　5、導航條中的鏈接，使用navbar-link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>
<!--inverse代表反色-->
<nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <!--導航條中直接放按鈕而沒有input輸入，使用navbar-btn-->
        <input type="button" class="btn btn-default navbar-btn" value="搜索">
        <!--在導航條內放文字使用navbar-text-->
        <!--導航條中的鏈接，使用navbar-link-->
        <p class="navbar-text">小小<a href="" class="navbar-link">網站</a></p>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>

</div>

<script>

</script>
</div></div></div></body>
</html>
View Code

 　　6、固定在頂部使用nav內的navbar-fixed-top,底部使用navbar-fixed-bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container"
<h1 class="page-header">Bootstap</h1>
<!--固定在頂部使用nav內的navbar-fixed-top-->
<nav class="navbar navbar-default  navbar-fixed-top">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>
<!--inverse代表反色-->
<nav class="navbar navbar-inverse ">
    <div class="navbar-header">
        <a href="" class="navbar-brand">Bootstrap</a>
        <button class="navbar navbar-toggle collapsed" data-toggle="collapse" data-target="#mynavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="mynavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">起步</a></li>
            <li><a href="">全局CSS樣式</a></li>
            <li><a href="">組件</a></li>
            <li><a href="">JavaScript插件</a></li>
            <li><a href="">定制</a></li>
            <li><a href="">網站實例</a></li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <input type="button" class="btn btn-default" value="GO">
                </div>
            </div>
        </form>
        <!--導航條中直接放按鈕而沒有input輸入，使用navbar-btn-->
        <input type="button" class="btn btn-default navbar-btn" value="搜索">
        <!--在導航條內放文字使用navbar-text-->
        <!--導航條中的鏈接，使用navbar-link-->
        <p class="navbar-text">小小<a href="" class="navbar-link">網站</a></p>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="">Bootstrap網站</a></li>
        </ul>

    </div>
</nav>

</div>

<script>

</script>
</div></div></div></body>
</html>
View Code

　　7、路徑導航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
    <!--路徑導航使用breadcrumb-->
<ol class="breadcrumb">
    <li><a href="">Linux</a></li>
    <li><a href="">Linux</a></li>
    <li class="active">Linux</li>
</ol>

<script>

</script>
</div></div></div></body>
</html>
View Code

 

　　八、分頁

　　1、基礎分頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
    <!--路徑導航使用breadcrumb-->
<ol class="breadcrumb">
    <li><a href="">Linux</a></li>
    <li><a href="">Linux</a></li>
    <li class="active">Linux</li>
</ol>

    <ul class="pagination">
        <li><a href="">&laquo;</a></li>
        <li><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>
<script>

</script>
</div></div></div></body>
</html>
View Code

　　2、激活與禁用，普通上下頁，兩端對齊的上下頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
    <!--路徑導航使用breadcrumb-->
<ol class="breadcrumb">
    <li><a href="">Linux</a></li>
    <li><a href="">Linux</a></li>
    <li class="active">Linux</li>
</ol>

    <ul class="pagination">
        <li><a href="">&laquo;</a></li>
        <li><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>
    <ul class="pagination">
        <li class="active"><a href="">&laquo;</a></li>
        <li><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 class="disabled"><a href="">&raquo;</a></li>
    </ul>
    <br>
    <!--尺寸使用pagination-lg和sm表示-->
    <ul class="pagination pagination-lg">
        <li><a href="">&laquo;</a></li>
        <li><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>
    <br>
    <ul class="pagination pagination-sm">
        <li><a href="">&laquo;</a></li>
        <li><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>
    <br>
    <ul class="pagination">
        <li><a href="">&laquo;</a></li>
        <li><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>
    <br>
    <!--上下頁-->
    <ul class="pager">
        <li><a href="">Previous</a></li>
        <li><a href="">Next</a></li>
    </ul>
    <!--兩端對齊 使用li中使用兩個類表示-->
    <ul class="pager">
        <li class="previous"><a href="">上一頁</a></li>
        <li class="next"><a href="">上一頁</a></li>
    </ul>
<script>

</script>
</div></div></div></body>
</html>
View Code

　　

　　九、標簽與徽章

<h1> linux is very much  <span class="label label-danger">300</span></h1>
    <h1> linux is very much  <span class="badge">300</span></h1>
    <button class="btn btn-primary">Message <span class="badge">200</span></button>
View Code

　　

　　十、巨幕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
<h1 class="page-header">Bootstap</h1>
    <div class="jumbotron">
        <h1>演示</h1>
        <p>
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
            linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
        </p>
    </div>

<script>
</script>
</div>
</body>
</html>
View Code

 

　　十一、縮略圖和自定義內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">Bootstap</h1>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-3 ">
            <!--縮略圖在a上添加thumbnail屬性-->
            <a href="" class="thumbnail">
                <img src="holder.js/100px200">
            </a>
        </div>
        <div class="col-md-3 ">
            <a href="" class="thumbnail">
                <img src="holder.js/100px200">
            </a>
        </div>
        <div class="col-md-3 ">
            <a href="" class="thumbnail">
                <img src="holder.js/100px200">
            </a>
        </div>
        <div class="col-md-3 ">
            <a href="" class="thumbnail">
                <img src="holder.js/100px200">
            </a>

        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="holder.js/100px200" alt="">
                <div class="caption">
                    <h2>Linux 技術</h2>
                    <p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
                        is very muchLinux is very much
                        Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
                        is very muchLinux is very much
                    </p>
                    <input type="button" class="btn btn-primary" value="OK">
                    <input type="button" class="btn btn-danger" value="Cancel">

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="holder.js/100px200" alt="">
                <div class="caption">
                    <h2>Linux 技術</h2>
                    <p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
                        is very muchLinux is very much
                        Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
                        is very muchLinux is very much

                    </p>
                    <input type="button" class="btn btn-primary" value="OK">
                    <input type="button" class="btn btn-danger" value="Cancel">
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="holder.js/100px200" alt="">
                <div class="caption">
                    <h2>Linux 技術</h2>
                    <p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
                        is very muchLinux is very much
                        Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
                        is very muchLinux is very much

                    </p>
                    <input type="button" class="btn btn-primary" value="OK">
                    <input type="button" class="btn btn-danger" value="Cancel">
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="holder.js/100px200" alt="">
                <div class="caption">
                    <h2>Linux 技術</h2>
                    <p>Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
                        is very muchLinux is very much
                        Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux
                        is very muchLinux is very much

                    </p>
                    <input type="button" class="btn btn-primary" value="OK">
                    <input type="button" class="btn btn-danger" value="Cancel">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
</script>

</body>
</html>
View Code

　　

　　十二、進度條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">Bootstap</h1>
    <div class="alert alert-success">
        <p>
            <!--data-dismiss里添加標記，原理是找到它父標簽然后隱藏，就可以使關閉-->
            <span class="close" data-dismiss="alert">&times;</span>
            Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
            Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
        </p>
    </div>
    <div class="alert alert-danger">
        <!--在a標簽中添加alert-link屬性可以變成鏈接-->
        <p><a href="#" class="alert-link">Linux is ver much</a>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
            Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
        </p>
    </div>
    <div class="alert alert-warning">
        <p>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
            Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
        </p>
    </div>
    <div class="alert alert-info">
        <p>Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
            Linux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver muchLinux is ver much
        </p>
    </div>
</div>

<script>
</script>

</body>
</html>
View Code

　　

　　十三、進度條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">Bootstap</h1>
    <!--progress-bar progress代表進度條，progress-sucess代表顏色，style里加width代表進度，progress-bar-striped代表條紋-->
    <!--加active代表動畫效果-->
    <div  class="progress">
        <div class="progress-bar progress-success progress-bar-striped active" style="width:90%">90%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%">50%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info progress-bar-striped" style="width:30%">30%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">10%</div>
    </div>
    <!--多個疊加有堆疊效果-->
    <div class="progress">
        <div class="progress-bar progress-bar-warning progress-bar-striped" style="width:10%">10%</div>
        <div class="progress-bar progress-bar-info progress-bar-striped" style="width:30%">30%</div>
        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:50%">50%</div>

    </div>
    <!--動態進度條-->
    <div  class="progress">
        <div id="a" class="progress-bar progress-success progress-bar-striped active" style="width:5%">0%</div>
    </div>
</div>

<script>
    s=0;
    v=2;
    sobj = setInterval(function () {
        s+=v;
        if(s>=100){
            clearInterval(sobj);
        }
        $('#a').text(s+'%').css({'width':s+'%'});
    },100)
</script>

</body>
</html>
View Code

　　

　　十四、媒體對象

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">Bootstap</h1>
    <div class="media">
        <!--左評論 使用media-top可以頭像和頂部對齊-->
        <div class="media-left media-top">
            <div class="media-object">
            <img src="holder.js/100x100" alt="">
                </div>
        </div>
        <div class="media-body">
            <div class="media-heading">
                <h2>linux技術</h2>
                <p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                </p>
            </div>
        </div>
        <br>
        <!--頭像與內容底部對齊-->
        <div class="media-left media-bottom">
            <div class="media-object">
            <img src="holder.js/100x100" alt="">
                </div>
        </div>
        <div class="media-body">
            <div class="media-heading">
                <h2>linux技術</h2>
                <p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                </p>
            </div>
        </div>
        <br>
        <div class="media-left media-middle">
            <div class="media-object">
            <img src="holder.js/100x100" alt="">
                </div>
        </div>
        <div class="media-body">
            <div class="media-heading">
                <h2>linux技術</h2>
                <p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                </p>
            </div>
        </div>
        <br>
        <div class="media-body">
            <div class="media-heading">
                <h2>linux技術</h2>
                <p>linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much
                linux is very muchlinux is very muchlinux is very muchlinux is very muchlinux is very much</p>
            </div>
        </div>
        <!--右評論-->
        <div class="media-right">
            <div class="media-object">
            <img src="holder.js/100x100" alt="">
                </div>
        </div>
    </div>
View Code

　　

　　十五、列表組與面板結合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">Bootstap</h1>
    <!--列表組-->
    <ul class="list-group">
        <li class="list-group-item">Linux</li>
        <li class="list-group-item">Linux</li>
        <li class="list-group-item">Linux</li>
        <li class="list-group-item">Linux</li>
    </ul>
    <br>
    <!--鏈接列表組-->
    <div class="list-group">
        <a href="" class="list-group-item active">Linux</a>
        <!--添加顏色-->
        <a href="" class="list-group-item list-group-item-success">Linux</a>
        <a href="" class="list-group-item list-group-item-danger">Linux</a>
        <a href="" class="list-group-item list-group-item-warning">Linux</a>
        <a href="" class="list-group-item list-group-item-info">Linux</a>
        <!--加上disable后，使用jquery變為不可用-->
        <a href="" class="list-group-item disabled">Linux</a>
    </div>
    <br>
    <!--新聞類網站使用-->
    <div class="col-md-6">
        <div class="list-group">
            <a href="" class="list-group-item active">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                </p>
            </a>
            <a href="" class="list-group-item">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                </p>
            </a>
        </div>
    </div>
    <div class="col-md-6">
        <div class="list-group">
            <a href="" class="list-group-item active">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                </p>
            </a>
            <a href="" class="list-group-item">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                </p>
            </a>
        </div>
    </div>

    <div class="page-header">
        <h1>帶面板的列表組</h1>
    </div>
    <div class="col-md-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h1>百度新聞</h1>
                </div>
            </div>

            <a href="" class="list-group-item">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                </p>
            </a>
            <a href="" class="list-group-item">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                </p>
            </a>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h1>百度新聞</h1>
                </div>
            </div>

            <a href="" class="list-group-item">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                </p>
            </a>
            <a href="" class="list-group-item">
                <h4 class="list-group-item-heading">List group item heading</h4>
                <p class="list-group-item-text">
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                    Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is
                    very muchLinux is very muchLinux is very much
                </p>
            </a>
        </div>
    </div>
    <div class="page-header">
        <h1>帶表格的面板</h1>

    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                Linux
            </div>
        </div>
        <div class="panel-body">
            <table class="table table-hover table-sctriped table-bordered">
                <tr>
                    <th>ID</th>
                    <th>ID</th>
                    <th>ID</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>AAA</td>
                    <td>AAA</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="page-header">
        <h1>無縫對接表格面板去掉panel-body</h1>

    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title text-center">
                Linux
            </div>
        </div>

        <table class="table table-hover table-sctriped table-bordered">
            <tr>
                <th>ID</th>
                <th>ID</th>
                <th>ID</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
            </tr>
        </table>

    </div>
</div>


</div>

<script>
    $('.disabled').click(function () {
        return false;
    })
</script>

</body>
</html>
View Code

　　

　　十六、iframe嵌入其他頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">嵌入其他頁面</h1>
    <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.163.com"></iframe>
</div>
</div>
<script>
</script>
</body>
</html>
View Code

 

　　十七、well

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">嵌入其他頁面</h1>
    <div class="well well-lg">
        linux is very much!
    </div>
    <div class="well">
        linux is very much!
    </div>
    <div class="well well-sm">
        linux is very much!
    </div>
</div>
<script>
</script>
</body>
</html>
View Code

 

 　　

　　JavaScript插件

　　一、模態框

　　1、基礎模態框，使用data-toggle來指定動作為彈出，使用data-target來指定彈出模態框的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">模態框</h1>
    <!--data-toggle方法為modal方式，目標是mymodal-->
    <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">Launch demo modal</button>
    <!--modal是和上面data-toggle對應，fade表示淡入效果-->
    <div id="mymodal" class="modal fade" >
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <span class="close" data-dismiss="modal">&times;</span>
                   <h4 class="text-center">Linux技術文章</h4>
               </div>
               <div class="modal-body">
                    <div class="container">
                        <div class="col-md-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <h5 class="text-center">Linux</h5>
                                    </div>
                                </div>
                                <div class="list-group">
                                    <a href="" class="list-group-item">
                                        <div class="list-group-heading">
                                            <div class="list-group-title">
                                                Linuxssssss
                                            </div>
                                        </div>
                                        <div class="list-group-text">
                                            Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <h5 class="text-center">Linux</h5>
                                    </div>
                                </div>
                                <div class="list-group">
                                    <a href="" class="list-group-item">
                                        <div class="list-group-heading">
                                            <div class="list-group-title">
                                                Linuxssssss
                                            </div>
                                        </div>
                                        <div class="list-group-text">
                                            Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
               <div class="modal-footer">
                   <input type="button" class="btn btn-primary" value="save" >
                   <input type="button" class="btn btn-default" value="close" data-dismiss="modal">
               </div>
           </div>
       </div>
    </div>

</div>
<script>
</script>
</body>
</html>
View Code

　　2、不使用data-toggle，使用js方式里的show和hide函數來實現彈出與關閉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">模態框</h1>
    <!--去掉data-toggle，使用js中show函數完成同樣彈出的功能-->
    <button class="btn btn-primary smodal" >Launch demo modal</button>
    <!--modal是和上面data-toggle對應，fade表示淡入效果-->
    <div id="mymodal" class="modal fade" >
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <span class="close" data-dismiss="modal">&times;</span>
                   <h4 class="text-center">Linux技術文章</h4>
               </div>
               <div class="modal-body">
                    <div class="container">
                        <div class="col-md-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <h5 class="text-center">Linux</h5>
                                    </div>
                                </div>
                                <div class="list-group">
                                    <a href="" class="list-group-item">
                                        <div class="list-group-heading">
                                            <div class="list-group-title">
                                                Linuxssssss
                                            </div>
                                        </div>
                                        <div class="list-group-text">
                                            Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <h5 class="text-center">Linux</h5>
                                    </div>
                                </div>
                                <div class="list-group">
                                    <a href="" class="list-group-item">
                                        <div class="list-group-heading">
                                            <div class="list-group-title">
                                                Linuxssssss
                                            </div>
                                        </div>
                                        <div class="list-group-text">
                                            Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
               <div class="modal-footer">
                   <input id="save" type="button" class="btn btn-primary save"  value="save"/>
                   <input type="button" class="btn btn-default" data-dismiss="modal" value="close"/>
               </div>
           </div>
       </div>
    </div>

</div>
<script>
   $('.save').click(function () {
       //把modal隱藏 modal('hide')表示隱藏  modal（"show'）表示顯示
       $('#mymodal').modal('toggle');
   });
    $('.smodal').click(function () {
        $('#mymodal').modal('toggle');
    });
    //打開模態框前變為紅色
   $('#mymodal').on('shown.bs.modal', function () {
       $('body').css({'background':'#33f'})
   });
    //打開模態框后桌面變成藍色
    $('#mymodal').on('shown.bs.modal', function (e) {
       $('body').css({'background':'#aaf'})
    });
    //關閉時模態框為顏色
     $('#mymodal').on('hide.bs.modal', function () {
       $('body').css({'background':'#2ff'})
   });
    //關閉后模態框后桌面變成藍色
    $('#mymodal').on('hidden.bs.modal', function (e) {
       $('body').css({'background':'#f23'})
    });
</script>
</body>
</html>
View Code

　　3、將button變為a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">模態框</h1>
    <!--去掉data-toggle，使用js中show函數完成同樣彈出的功能-->
    <a href="#mymodal" class="btn btn-primary smodal" >Launch demo modal</a>
    <!--modal是和上面data-toggle對應，fade表示淡入效果-->
    <div id="mymodal" class="modal fade" >
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <span class="close" data-dismiss="modal">&times;</span>
                   <h4 class="text-center">Linux技術文章</h4>
               </div>
               <div class="modal-body">
                    <div class="container">
                        <div class="col-md-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <h5 class="text-center">Linux</h5>
                                    </div>
                                </div>
                                <div class="list-group">
                                    <a href="" class="list-group-item">
                                        <div class="list-group-heading">
                                            <div class="list-group-title">
                                                Linuxssssss
                                            </div>
                                        </div>
                                        <div class="list-group-text">
                                            Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <h5 class="text-center">Linux</h5>
                                    </div>
                                </div>
                                <div class="list-group">
                                    <a href="" class="list-group-item">
                                        <div class="list-group-heading">
                                            <div class="list-group-title">
                                                Linuxssssss
                                            </div>
                                        </div>
                                        <div class="list-group-text">
                                            Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
               <div class="modal-footer">
                   <input id="save" type="button" class="btn btn-primary save"  value="save"/>
                   <input type="button" class="btn btn-default" data-dismiss="modal" value="close"/>
               </div>
           </div>
       </div>
    </div>

</div>
<script>
   $('.save').click(function () {
       //把modal隱藏 modal('hide')表示隱藏  modal（"show'）表示顯示
       $('#mymodal').modal('toggle');
   });
    $('.smodal').click(function () {
        $('#mymodal').modal('toggle');
    });
    //打開模態框前變為紅色
   $('#mymodal').on('shown.bs.modal', function () {
       $('body').css({'background':'#33f'})
   });
    //打開模態框后桌面變成藍色
    $('#mymodal').on('shown.bs.modal', function (e) {
       $('body').css({'background':'#aaf'})
    });
    //關閉時模態框為顏色
     $('#mymodal').on('hide.bs.modal', function () {
       $('body').css({'background':'#2ff'})
   });
    //關閉后模態框后桌面變成藍色
    $('#mymodal').on('hidden.bs.modal', function (e) {
       $('body').css({'background':'#f23'})
    });
</script>
</body>
</html>
View Code

　　4、模態框大小調整 modal-sm和modal-lg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/main.css">
    <script src="../css/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/holder.js"></script>
    <style>

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-header">模態框</h1>

    <a href="#mymodal" class="btn btn-primary smodal" >Launch demo modal</a>

    <div id="mymodal" class="modal fade" >
        <!--modal-sm和modal-lg兩種對話框大小-->
       <div class="modal-dialog modal-sm">
           <div class="modal-content">
               <div class="modal-header">
                   <span class="close" data-dismiss="modal">&times;</span>
                   <h4 class="text-center">Linux技術文章</h4>
               </div>
               <div class="modal-body">
                    <div class="container">
                        <div class="col-md-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <h5 class="text-center">Linux</h5>
                                    </div>
                                </div>
                                <div class="list-group">
                                    <a href="" class="list-group-item">
                                        <div class="list-group-heading">
                                            <div class="list-group-title">
                                                Linuxssssss
                                            </div>
                                        </div>
                                        <div class="list-group-text">
                                            Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="panel-title">
                                        <h5 class="text-center">Linux</h5>
                                    </div>
                                </div>
                                <div class="list-group">
                                    <a href="" class="list-group-item">
                                        <div class="list-group-heading">
                                            <div class="list-group-title">
                                                Linuxssssss
                                            </div>
                                        </div>
                                        <div class="list-group-text">
                                            Linux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very muchLinux is very much
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
               <div class="modal-footer">
                   <input id="save" type="button" class="btn btn-primary save"  value="save"/>
                   <input type="button" class="btn btn-default" data-dismiss="modal" value="close"/>
               </div>
           </div>
       </div>
    </div>

</div>
<script>
   $('.save').click(function () {
       //把modal隱藏 modal('hide')表示隱藏  modal（"show'）表示顯示
       $('#mymodal').modal('toggle');
   });
    $('.smodal').click(function () {
        $('#mymodal').modal('toggle');
    });
    //打開模態框前變為紅色
   $('#mymodal').on('shown.bs.modal', function () {
       $('body').css({'background':'#33f'})
   });
    //打開模態框后桌面變成藍色
    $('#mymodal').on('shown.bs.modal', function (e) {
       $('body').css({'background':'#aaf'})
    });
    //關閉時模態框為顏色
     $('#mymodal').on('hide.bs.modal', function () {
       $('body').css({'background':'#2ff'})
   });
    //關閉后模態框后桌面變成藍色
    $('#mymodal').on('hidden.bs.modal', function (e) {
       $('body').css({'background':'#f23'})
    });
</script>
</body>
</html>
View Code

 

 

 

 

 

　　

　　

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 深入淺出計算機組成原理學習筆記：第二十七講 第二十七篇 -- QTreeWidget總結 第二十七章 springboot + zipkin（brave-okhttp實現） Bootstrap<基礎二十七> 多媒體對象（Media Object） [傅里葉變換及其應用學習筆記] 二十七. 高維傅里葉變換，復習 Bootstrap3.0學習第二十五輪(JavaScript插件——折疊) Bootstrap3.0學習第二十一輪(JavaScript插件——工具提示) Bootstrap3.0學習第二十三輪(JavaScript插件——警告框) Salesforce LWC學習(二十七) File Upload Hadoop學習之路（二十七）MapReduce的API使用（四）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM