簡介

Bootstrap2：支持廣泛瀏覽器，但功能有限，目前已放棄更新。

Bootstrap3（本文使用此版本）：放棄了IE7和Firefox3.x的支持；支持IE8，但其對CSS3的支持有限，效果不佳。

可以僅通過data屬性就能使用所有的Bootstrap插件，無需寫一行JavaScript代碼，這是Bootstrap的優勢。

注意：

1、Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入，就像在基本模版中所展示的一樣。在 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

2、Bootstrap不支持IE的兼容模式，在IE中運行最新的渲染模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

3、適配移動瀏覽器時，一般均需加入初始化移動瀏覽顯示：

<meta name="viewport" content="width=device-width, initial-scale=1">

上面這句代碼的含義：讓視口的寬度等於設備實際的物理分辨率。

width=device-width <!--頁面寬度=設備的寬度-->
initial-scale=1 <!--頁面首次載入的縮放比例-->

引入Bootstrap

準備工作

常用方法

我只試過這兩種方法：

1、官網下載Bootstrap文件，將HTML放置於Bootstrap的目錄，並在代碼中引入。文件結構如下：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

2、官網複製Bootstrap文件的鏈接，並在代碼中引入。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

注意：CSS放於<head>，JS放於<body>的最下方。

其他方法

1、通過 Bower 進行安裝

$ bower install bootstrap

2、通過 npm 進行安裝

$ npm install bootstrap@3

3、通過 Composer 進行安裝

$ composer require twbs/bootstrap

實現引入Bootstrap

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index</title>

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<style>
</style>
</head>
<body>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

注意

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

1、版本低於IE9時，第一個js：IE8對HTML5標籤進行支持；第二個js：IE8對媒體查詢進行支持。

2、html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作爲父節點包裹子元素，並且不能應用CSS樣式。讓CSS 樣式應用在未知元素上只需執行 document.createElement(elementName) 即可實現。html5shiv就是根據這個原理創建的。

Bootstrap的網頁製作

菜單響應式佈局

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <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>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

其中，這部分實現了菜單響應式佈局：

                ... ...

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

                ... ...

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

實現頁面

導航條

導航條依賴JavaScript，響應式導航條依賴摺疊（collapese）插件。

Collapse包含在Bootstrap中。

如果不支持JavaScript，那麼響應式導航條也就不被支持。

下拉菜單

下拉菜單的按鈕和功能

  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>

下拉菜單的內容

  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <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>

注意：divider爲分隔線的實現。

<li role="separator" class="divider"></li>

實現頁面

滾動廣告Carousel

翻頁（導航）

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

          ... ...

內容

            ... ...

<!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

            ... ...

輪播方向

            ... ...

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

            ... ...

柵格系統佈局

簡單來說，即頁面橫向等分爲12份。

柵格參數

使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。所有“列（column）必須放在 ” .row 內。如下圖所示。
引自：官方文檔

佈局容器

Bootstrap 需要爲頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類，分別爲.container和.container-fluid。注意，由於 padding 等屬性的原因，這兩種容器類不能互相嵌套。引自：官方文檔

.container 類用於固定寬度並支持響應式佈局的容器。

.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。

舉例

也正是以上這兩個部分，使得響應式佈局得以實現。

上圖界面佈局的實現代碼爲：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

分隔線（水平線）：

<hr>，以在哪一個container中來控制長度。

標籤頁 Tabs

不用寫JavaScript代碼，只需要將頁面元素指定data-toggle=“tab”，爲ul添加nav和nav-tabs class。

            ... ...

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

            ... ...

標籤的內容

            ... ...

<!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

            ... ...

彈出框（模態框）Modal

頭部（標題）

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      
            ... ...

內容

            ... ...

      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
  
            ... ...

底部（按鈕）

            ... ...

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

菜單定位

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

其他功能

詳細的可以參照官方幫助文檔，內容很豐富也很詳細。

在此提供一下大概的目錄，寫代碼時便於查找。

代碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>某管理系統</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
div{
    #border:solid 1px;
}

button{
    width:70px;
    height:30px;
}

.mytitle{
    font-size:26px;
    padding-top:20px;
}

.myhr{
    margin-top:0px;
}

.myright{
    float:right;
}

.mybtn{
    width:100px;
}

.mybtn2{
    width:120px;
}

.myprogress{
    
    margin-top:10px;
}

.mynavi{
    height:700px;
    background-color:lightgray;
    padding-top:20px;
}

.mynavi0{
    height:100%;
    margin-top:-20px;
    background-color:lightgray;
}
.mynavitop{
    #padding-bottom:0px;
    #background-color:black;
}
.myblack{
    background-color:#1C1C1C;
}
</style>
</head>
<body>
<div>
    <div class="mynavitop"><!--導航-->
        <nav class="navbar navbar-default myblack">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">...</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">某管理系統</a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">首頁 <span class="sr-only"> </span></a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">d</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">e</a></li>
                  </ul>
                </li>
                <li><a href="#">幫助</a></li>
              </ul>
              <form class="navbar-form navbar-right">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="用戶名">
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="密碼">
                </div>
                <button type="submit" class="btn btn-default">登錄</button>
              </form>
              <!--<ul class="nav navbar-nav navbar-right">
                <li><a href="#">首頁</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">d</a></li>
                  </ul>
                </li>
              </ul>-->
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    </div>
    <div class="mynavi0">
        <div class="mynavi col-md-3 "><!--左側導航-->
            <ul class="nav nav-pills nav-stacked">
              <li role="presentation" class="active"><a href="#">首頁</a></li>
              <li role="presentation"><a href="#"></a></li>
              <li role="presentation"><a href="#">信息建立</a></li>
              <li role="presentation"><a href="#">信息查詢</a></li>
              <li role="presentation"><a href="#">信息管理</a></li>
              <li role="presentation"><a href="#"></a></li>
              <li role="presentation"><a href="#">設置</a></li>
              <li role="presentation"><a href="#">幫助</a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div class="mytitle">管理控制檯<hr class="myhr"></div>
            <div style="margin-bottom:10px"><!-- 標籤 -->
                <!-- Standard button -->
                <button type="button" class="btn btn-default">操作1</button>
                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                <button type="button" class="btn btn-primary">操作2</button>
                <!-- Indicates a successful or positive action -->
                <button type="button" class="btn btn-success">操作3</button>
                <!-- Contextual button for informational alert messages -->
                <button type="button" class="btn btn-info">操作4</button>
                <!-- Indicates caution should be taken with this action -->
                <button type="button" class="btn btn-warning">操作5</button>
                <!-- Indicates a dangerous or potentially negative action -->
                <button type="button" class="btn btn-danger">操作6</button>
                <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
            </div>
            <div>
                <div>
                    <div class="col-md-6"><!--c1-->
                        <div class="panel panel-primary">
                            <div class="panel-heading">最新提醒</div>
                            <div class="panel-body">
                                <div class="alert alert-success" role="alert"><b>提示</b> 您的訂單（1234）已通過審覈！</div>
                                <div class="alert alert-danger" role="alert"><b>提示</b> 您的訂單（45678）已通過審覈！</div>
                                <div class="alert alert-warning" role="alert"><b>提示</b> 您的訂單（12121212）已通過審覈！</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"><!--c2-->
                        <div class="panel panel-primary">
                            <div class="panel-heading">我的任務</div>
                            <div class="panel-body">
                                <div class="alert alert-info" role="alert">訂單審批<span class="badge myright">42</span></div>
                                <div class="alert alert-info" role="alert">收款確認<span class="badge myright">20</span></div>
                                <div class="alert alert-info" role="alert">付款確認<span class="badge myright">10</span></div>
                            </div>
                        </div>
                        
                  </div>
                </div>
                <div>
                    <div class="col-md-6"><!--c3-->
                        <div class="panel panel-primary">
                            <div class="panel-heading">最新訂單</div>
                            <div class="panel-body">
                                  <!-- Table -->
                                  <table class="table table-striped">
                                      <tr>
                                          <th>#</th>
                                          <th>產品</th>
                                          <th>數量</th>
                                          <th>總金額</th>
                                          <th>業務員</th>
                                      </tr>
                                      <tr>
                                          <td>1</td>
                                          <td>Mac</td>
                                          <td>10</td>
                                          <td>10000</td>
                                          <td>張三</td>
                                      </tr>
                                      <tr>
                                          <td>2</td>
                                          <td>Apple</td>
                                          <td>20</td>
                                          <td>8000</td>
                                          <td>李四</td>
                                      </tr>
                                      <tr>
                                          <td>3</td>
                                          <td>Windows</td>
                                          <td>5</td>
                                          <td>5000</td>
                                          <td>王五</td>
                                      </tr>
                                  </table>
                                  <button type="button" class="btn btn-primary mybtn">查看詳情 >></button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"><!--c4-->
                        <div class="panel panel-primary">
                            <div class="panel-heading">工程進度</div>
                            <div class="panel-body">
                                <button type="button" class="btn btn-primary mybtn2">水井挖掘工程</button>
                                <div class="progress myprogress">
                                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                    <span class="sr-only"></span>
                                  </div>
                                </div>
                                <button type="button" class="btn btn-danger mybtn">基建工程</button>
                                <div class="progress myprogress">
                                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                    <span class="sr-only"></span>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

實現頁面

參考資料

內容及教程： https://www.imooc.com/learn/182

Bootstrap官方文檔：https://v3.bootcss.com/

有緣看到的小夥伴，給人家點個讚唄~麼麼噠❤

Bootstrap框架初體驗——管理系統界面

簡介

引入Bootstrap

準備工作

常用方法

其他方法

實現引入Bootstrap

注意

Bootstrap的網頁製作

菜單響應式佈局

實現頁面

導航條

下拉菜單

下拉菜單的按鈕和功能

下拉菜單的內容

實現頁面

滾動廣告Carousel

翻頁（導航）

內容

輪播方向

柵格系統佈局

柵格參數

佈局容器

舉例

分隔線（水平線）：

標籤頁 Tabs

標籤

標籤的內容

彈出框（模態框）Modal

頭部（標題）

內容

底部（按鈕）

菜單定位

其他功能

代碼

實現頁面

參考資料