注意：本文主要講解BootStrap常用的一些功能點，使用的idea開發工具，希望小伙伴們下去多加練習，

在這里插入圖片描述

文章目錄

回應式開發
- 回應式開發概念
- 回應式開發原理
- 回應式布局容器
BootStrap
- BootStrap 簡介
- 為什么使用 Bootstrap
- Bootstrap 包的內容
- BootStrap 初步使用
- 布局容器
- 格柵系統
- - 1.格柵系統引數
  - 2.格柵系統偏移
- 頁面排版
- - 1.副標題（small）
  - 2.標記（mark）
  - - 洗掉/無用文本標記
    - 字體加重傾斜標記
    - 字體加重傾斜標記（HTML）
    - 對齊標記
    - 縮略語
    - 無樣式/內斂串列
  - 3.表格
  - - 基本表格（ .table ）
    - 表格狀態（顏色）類
    - 條紋表格(.table-striped)
    - 帶邊框的表格(.table-bordered)
    - 滑鼠懸停表格(.table-hover)
    - 緊縮表格
    - 回應式表格
  - 4.表單
  - - 基本表單
    - 內斂表單
    - 水平排串列單
    - 被支持的控制元件
    - - 輸入框
      - 文本域
      - 禁用狀態
      - 只讀狀態
      - 效驗狀態
      - 控制元件尺寸
  - 5.按鈕
  - - 預定義樣式
    - 按鈕尺寸
    - 塊級按鈕
    - 按鈕禁用狀態

回應式開發

回應式布局等于流動網格布局，而自適應布局等于使用固定分割點來進行布局，自適應布局給了你更多設計的空間，因為你只用考慮幾種不同的狀態，而在回應式布局中你卻得考慮上百種不同的狀態，雖然絕大部分狀態差異較小，但仍然也算做差異，它使得把握設計最終效果變得更難，同樣讓回應式布局更加的難以測驗和預測，但同時說難，這也算是回應式布局美的所在，在考慮到表層級別不確定因素的程序中，你也會因此更好的掌握一些基礎知識，當然，要做到精確到像素級別的去預測設943*684像素視區里的樣子是很難的，但是你至少可以很輕松的確定它是能夠正常作業的，因為頁面的基本特性和布局結構都是根據語意結構來部署的，

在這里插入圖片描述

回應式開發概念

回應式開發是頁面布局可以「回應」不同尺寸螢屏的設計方法，通常我們說起回應式設計都是針對網頁設計的，同一個頁面，隨著螢屏尺寸的改變，自適應地改變頁面布局，

回應式開發原理

使用媒體查詢針對不同寬度進行布局和樣式的設定，從而適配不同的設備

設備劃分	尺寸區間
超小螢屏（手機）	<768px
小平設備（平板）	>= 768px~992px
中等螢屏（桌面顯示幕）	>=992px~1200px
寬屏設備（大桌面顯示幕）	>=1200px

回應式布局容器

回應式需要一個父級作為布局容器，來配合子集容器來實作效果
例如：1200時父級容器有三個子集div 分三列，當容器變小的時候這三列div變成三行來顯示

根據頁面寬度動態該變布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .container{
    width: 750px;
    margin: 0px auto;
  }
  .container ul{
    list-style: none;
  }
  .container ul li{
    text-align: center;
    float: left;
    width: 93.75px;
    height: 30px;
    background-color: green;
  }
  @media screen and (max-width: 768px){
    .container ul li{
      float: left;
      width: 33.3%;
    }
    .container{
      width: 100%;
    }
  }
  /*如果螢屏寬度小于992px,寬度設定為750*/
  @media screen and (min-width: 992px){
    .container{
      width: 750px;
    }
  }
  /*如果螢屏寬度小于1200px,寬度設定為1100px*/
  @media screen and (min-width: 1200px) {
    .container{
      width: 952px;
    }
  }
  /*如果螢屏寬度大于1200px,寬度設定為1100px*/
  @media screen and (min-width: 1200px) {
    .container{
      width: 1100px;
    }
  }
</style>
<body>
<div class="container">
  <ul>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
    <li>導航欄</li>
  </ul>
</div>
</body>
</html>

寬屏效果

小屏效果

BootStrap

官網：https://getbootstrap.com/
菜鳥教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
中文官網：https://www.bootcss.com/

在這里插入圖片描述

BootStrap 簡介

Bootstrap 是一個用于快速開發 Web 應用程式和網站的前端框架，Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，

為什么使用 Bootstrap

移動設備優先：自 Bootstrap 3 起，框架包含了貫穿于整個庫的移動設備優先的樣式，
瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap，
容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap，
回應式設計：Bootstrap 的回應式 CSS 能夠自適應于臺式機、平板電腦和手機，

它為開發人員創建介面提供了一個簡潔統一的解決方案，它包含了功能強大的內置組件，易于定制，它還提供了基于 Web 的定制，它是開源的，

Bootstrap 包的內容

基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構，
CSS：Bootstrap 自帶以下特性：全域的 CSS 設定、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統，
組件：Bootstrap 包含了十幾個可重用的組件，用于創建影像、下拉選單、導航、警告框、彈出框等等，
JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件，您可以直接包含所有的插件，也可以逐個包含這些插件，
定制：您可以定制 Bootstrap 的組件、LESS 變數和 jQuery 插件來得到您自己的版本，

BootStrap 初步使用

進入官網點擊入門把bootstrap核心復制到頁面（核心檔案放在竟在資源也可），

在這里插入圖片描述

點擊組件粘貼想要的樣式

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初步使用</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"></head>
<body>
一個放大鏡 <span class="glyphicon glyphicon-search"></span>
</body>
</html>

初步使用BootStrap初次使用效果顯示

在這里插入圖片描述
注意：下面還有很多組件可以復制，前提當前頁面要有bootstrap核心檔案

布局容器

固定寬度布局容器

<!-- 一個固定寬度的相應式布局的div-->
<div class="container"></div>

占據全部視口布局容器

<!-- 一個占據全部視口的回應式布局的div-->
<div class="container-fluid"></div>

兩種回應式布局頁面效果顯示

粉色為：container，黃色為：container-fluid

在這里插入圖片描述

格柵系統

1.格柵系統引數

不同螢屏解析度可以設定不同的格柵寬度，從而實作不同解析度下顯示不同布局

	超小螢屏手機 (<768px)	小螢屏平板 (≥768px)	中等螢屏桌面顯示幕 (≥992px)	大螢屏大桌面顯示幕 (≥1200px)
柵格系統行為	總是水平排列	開始是堆疊在一起的，當大于這些閾值時將變為水平排列C
`.container` 最大寬度	None （自動）	750px	970px	1170px
類前綴	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

格柵系統使用

<!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">
  <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
  <title>格柵系統</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <style>
    .container ul{
      list-style: none;
    }
    .container ul li{
      text-align: center;
      float: left;
      height: 30px;
      background-color:greenyellow;
    }
  </style>
</head>
<body>
<!--  一個固定寬度的相應式布局的div-->
<div class="container">
  <ul>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">導航欄</li>
  </ul>
</div>
</body>
</html>

格柵系統效果顯示

不同的螢屏寬度顯示不同的布局

在這里插入圖片描述

2.格柵系統偏移

格柵偏移引數：

xxxxxxxxxx class="col-md-offset-x" //x 是數字和格柵一樣最大12 相當于在兩個格柵中間加了一個空的格柵

格柵偏移使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格柵系統偏移</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <style>
    .container ul{
      list-style: none;
    }
    .container ul li{
      text-align: center;
      float: left;
      height: 30px;
      background-color:greenyellow;
    }
  </style>
</head>
<body>
<!--  一個固定寬度的相應式布局的div-->
<div class="container">
  <ul>
    <li class="col-md-4 col-lg-4">導航欄</li>
    <li class="col-md-4 col-lg-4  col-md-offset-4">導航欄</li>
  </ul>
</div>
</body>
</html>

格柵偏移校效果顯示

在這里插入圖片描述

頁面排版

1.副標題（small）

副標題使用

  <h1>這是個標題    <small>這是個副標題</small></h1>
  <h2>這是個標題    <small>這是個副標題</small></h2>
  <h3>這是個標題    <small>這是個副標題</small></h3>
  <h4>這是個標題    <small>這是個副標題</small></h4>

  <h1>這是個標題用class    <span class="small">這是個副標題</span></h1>
  <h2>這是個標題用class    <span class="small">這是個副標題</span></h2>
  <h3>這是個標題用class    <span class="small">這是個副標題</span></h3>
  <h4>這是個標題用class    <span class="small">這是個副標題</span></h4>

副標題使用效果顯示

在這里插入圖片描述

2.標記（mark）

標記使用

<h1>復制即用<mark>為初學者而生！</mark></h1>

標記效果顯示

在這里插入圖片描述

洗掉/無用文本標記

<h1><del>此方法已被洗掉</del></h1>
<h1><s>此方法已被廢棄</s></h1>

洗掉無用標記效果顯示

在這里插入圖片描述

字體加重傾斜標記

<!-- em傾斜 strong加粗 多個標記可以寫在一起組合使用-->
<h1><em><strong>加重字體</strong></em></h1>

字體加重傾斜標記效果顯示

在這里插入圖片描述

字體加重傾斜標記（HTML）

<p><b>ALYTS</b><br> 復制即用為初學者而生!</p>
<p><i>ALYTS</i><br> 復制即用為初學者而生!</p>
<p><i><b>ALYTS</b></i><br> 復制即用為初學者而生!</p>

字體加重傾斜標記效果顯示

在這里插入圖片描述

對齊標記

 <p class="text-left">左對齊</p>
 <p class="text-center">劇中對齊</p>
 <p class="text-right">右對齊</p>

對齊標記效果顯示

在這里插入圖片描述

縮略語

<!-- 普通縮略陳述句-->
<h1><abbr title="alyts">al</abbr></h1>
<!-- 首字母縮略陳述句-->
<h1><abbr title="ALYTS YMM" class="initialism">al</abbr></h1>

滑鼠懸停會顯示title里的資料，不方便截圖大家可以下去自行演示！

無樣式/內斂串列

<!--無樣式串列-->
<div class="container">
<ul class="list-unstyled">
<li>串列</li>
<li>串列</li>
<li>串列</li>
<li>串列</li>
<li>串列</li>
<li>串列</li>
</ul>
</div>
<!--內斂串列（橫向） 并添加少量的內邊距-->
<div class="container">
<ul class="list-inline">
<li>串列</li>
<li>串列</li>
<li>串列</li>
<li>串列</li>
<li>串列</li>
<li>串列</li>
</ul>
</div>

無樣式/內斂串列效果顯示

在這里插入圖片描述

3.表格

基本表格（ .table ）

<table class="table">
<tr>
  <th>序號</th>
  <th>姓名</th>
  <th>性別</th>
  <th>年齡</th>
</tr>
  <tr>
    <td>1</td>
    <td>王</td>
    <td>男</td>
    <td>24</td>
  </tr>
  <tr>
    <td>2</td>
    <td>林</td>
    <td>男</td>
    <td>24</td>
  </tr>
  <tr>
    <td>3</td>
    <td>峰</td>
    <td>男</td>
    <td>25</td>
  </tr>
</table>

基本表格效果顯示

在這里插入圖片描述

基本表格無樣式（.table）效果顯示

在這里插入圖片描述

表格狀態（顏色）類

Class	描述
.active	滑鼠懸停在行或單元格上時所設定的顏色
.success	標識成功或積極的動作
.info	標識普通的提示資訊或動作
.warning	標識警告或需要用戶注意
.danger	標識危隙訓潛在的帶來負面影響的動作

表格狀態使用

<table class="table table-condensed">
    <tr>
      <th class="active">序號</th>
      <th class="success">姓名</th>
      <th class="warning">性別</th>
      <th class="danger">年齡</th>
    </tr>
    <tr class="info">
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

表格狀態效果顯示

在這里插入圖片描述

條紋表格(.table-striped)

<table class="table table-striped">
    <tr>
      <th>序號</th>
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

條紋表格效果顯示

在這里插入圖片描述

帶邊框的表格(.table-bordered)

<table class="table table-bordered">
    <tr>
      <th>序號</th>
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

帶邊框表格效果顯示

在這里插入圖片描述

滑鼠懸停表格(.table-hover)

<table class="table table-hover">
    <tr>
      <th>序號</th>
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

滑鼠懸停表格效果顯示

在這里插入圖片描述

緊縮表格

<table class="table table-condensed">
    <tr>
      <th>序號</th>
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

緊縮表格效果顯示

在這里插入圖片描述

回應式表格

<table class="table table-responsive">
    <tr>
      <th>序號</th>
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
    </tr>
    <tr>
      <td>1</td>
      <td>王</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>2</td>
      <td>林</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>3</td>
      <td>峰</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </table>

回應式表格效果顯示

在這里插入圖片描述

4.表單

基本表單

<!--    for="id" 點擊此空間就相當于點擊目標控制元件-->
<!--    class="form-control" 會給當前空間一個寬度百分百的樣式-->
<!--    class="form-group" 會給一個上邊距-->
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">郵箱：</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密碼</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">上傳檔案</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block"></p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" checked="checked">復選框
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>

基本表單效果顯示

在這里插入圖片描述

內斂表單

<!--內斂表單-->
<div class="container">
    <!--    for="id" 點擊此空間就相當于點擊目標控制元件-->
    <!--    class="form-control" 會給當前空間一個寬度百分百的樣式-->
    <!--    class="form-group" 會給一個上邊距-->
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputEmail2">郵箱：</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword2">密碼</label>
            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile2">上傳檔案</label>
            <input type="file" id="exampleInputFile2">
            <p class="help-block"></p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" checked="checked">復選框
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

內斂表單效果顯示

在這里插入圖片描述

水平排串列單

<!--水平排串列單-->
<div class="container">
    <!--    for="id" 點擊此空間就相當于點擊目標控制元件-->
    <!--    class="form-control" 會給當前空間一個寬度百分百的樣式-->
    <!--    class="form-group" 會給一個上邊距-->
    <form class="form-horizontal">
        <div class="form-group">
            <label for="exampleInputEmail3">郵箱：</label>
            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword3">密碼</label>
            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile3">上傳檔案</label>
            <input type="file" id="exampleInputFile3">
            <p class="help-block"></p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" checked="checked">復選框
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

水平排串列單效果顯示

在這里插入圖片描述

被支持的控制元件

輸入框

包括大部分表單控制元件、文本輸入域控制元件，還支持所有 HTML5 型別的輸入控制元件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color，

文本域

<div class="container">
    <form>
        <!--rows="3" 表示文本域可以輸入的行數-->
        <label>文本域</label>
        <div class="form-group">
        <textarea class="form-control" rows="3" style="resize:none;"></textarea>
        </div>
    </form>
</div>

文本域效果顯示

在這里插入圖片描述

禁用狀態

	<form>
    	<!--通過disabled來控制控制元件的批量禁用-->
        <fieldset disabled>
            <div class="form-group">
                <label for="disabledTextInput">被禁用的input</label>
                <input type="text" id="disabledTextInput" class="form-control" placeholder="被禁用的input">
            </div>
            <div class="form-group">
                <label for="disabledSelect">被禁用的下拉框</label>
                <select id="disabledSelect" class="form-control">
                    <option>被禁用的 select</option>
                </select>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 被禁用的復選框
                </label>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </fieldset>
    </form>

禁用狀態效果顯示

在這里插入圖片描述

只讀狀態

    <form>
        <input class="form-control" type="text" placeholder="只讀" readonly>
    </form>

只讀狀態效果顯示

在這里插入圖片描述

效驗狀態

Bootstrap 對表單控制元件的校驗狀態，如 error、warning 和 success 狀態，都定義了樣式，使用時，添加 .has-warning、.has-error 或 .has-success 類到這些控制元件的父元素即可，任何包含在此元素之內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式，

效驗狀態使用

<div class="container">
    <form>
        <!--改變邊框字體顏色 has-success has-warning has-error-->
        <div class="form-group has-success">
            <label class="control-label" for="inputSuccess1">Input with success</label>
            <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
            <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
        <div class="form-group has-warning">
            <label class="control-label" for="inputWarning1">Input with warning</label>
            <input type="text" class="form-control" id="inputWarning1">
        </div>
        <div class="form-group has-error">
            <label class="control-label" for="inputError1">Input with error</label>
            <input type="text" class="form-control" id="inputError1">
        </div>
        <div class="has-success">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkboxSuccess" value="option1">
                    Checkbox with success
                </label>
            </div>
        </div>
        <div class="has-warning">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkboxWarning" value="option1">
                    Checkbox with warning
                </label>
            </div>
        </div>
        <div class="has-error">
            <div class="checkbox">
                <label>
                    <input type="checkbox" id="checkboxError" value="option1">
                    Checkbox with error
                </label>
            </div>
        </div>
    </form>
</div>

效驗狀態效果顯示

在這里插入圖片描述

控制元件尺寸

控制元件高度

<div class="container">
    <form>
        <input class="form-control input-lg" type="text" placeholder="變高">
        <input class="form-control" type="text" placeholder="默認高度">
        <input class="form-control input-sm" type="text" placeholder="變矮">
    </form>
</div>

控制元件高度效果顯示

在這里插入圖片描述

控制元件寬度

<div class="container">
    <form>
        <!--form-control會給一個內邊距-->
        <div class="col-xs-2">
            <input type="text" class="form-control" placeholder="寬度2">
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="寬度3">
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" placeholder="寬度4">
        </div>
    </form>
</div>

控制元件寬度效果顯示

在這里插入圖片描述

5.按鈕

可以作為按鈕使用的標簽或元素

代碼示例

<div class="container">
  <!--可以作為按鈕使用的標簽或元素  為<a>,<button> 或 <input>元素添加按鈕類-->  
  <a class="btn btn-default" href="#" role="button">Link</a>
  <button class="btn btn-default" type="submit">Button</button>
  <input class="btn btn-default" type="button" value="Input">
  <input class="btn btn-default" type="submit" value="Submit">
</div>

代碼效果顯示

在這里插入圖片描述

預定義樣式

<!--預定樣式-->
<div class="container">
    <!-- btn-default 為默認按鈕樣式 !注意如果不寫btn-default此按鈕就沒有任何樣式  -->
    <button type="button" class="btn btn-default">（默認樣式）Default</button>
    <!-- btn-primary 為首選項（深藍色）-->
    <button type="button" class="btn btn-primary">（首選項）Primary</button>
    <!-- btn-primary 為成功（綠色）-->
    <button type="button" class="btn btn-success">（成功）Success</button>
    <!-- btn-primary 一般資訊（天藍色）-->
    <button type="button" class="btn btn-info">（一般資訊）Info</button>
    <!-- btn-primary 為警告（橙色）-->
    <button type="button" class="btn btn-warning">（警告）Warning</button>
    <!-- btn-primary 為危險（紅色）-->
    <button type="button" class="btn btn-danger">（危險）Danger</button>
    <!-- btn-primary 為鏈接（和a標簽一樣）（深藍色）-->
    <button type="button" class="btn btn-link">（鏈接）Link</button>
</div>

代碼效果顯示

在這里插入圖片描述

按鈕尺寸

<!--可以作為按鈕的標簽元素-->
<div class="container">
    <p>
        <!--btn-lg給按鈕一個比較大的大小和內邊距-->
        <button type="button" class="btn btn-primary btn-lg">（大按鈕）</button>
        <button type="button" class="btn btn-default btn-lg">（大按鈕）</button>
    </p>
    <p>
        <button type="button" class="btn btn-primary">默認尺寸</button>
        <button type="button" class="btn btn-default">默認尺寸</button>
    </p>
    <p>
        <!--btn-sm給按鈕一個比較小的大小和內邊距-->
        <button type="button" class="btn btn-primary btn-sm">小按鈕</button>
        <button type="button" class="btn btn-default btn-sm">小按鈕</button>
    </p>
    <p>
        <!--btn-xs給按鈕一個超級小的大小和內邊距-->
        <button type="button" class="btn btn-primary btn-xs">超小尺寸</button>
        <button type="button" class="btn btn-default btn-xs">超小尺寸</button>
    </p>
</div>

代碼效果顯示

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-geDLZVXR-1630482054719)(C:\Users\wlf\AppData\Roaming\Typora\typora-user-images\1630467602311.png)]$

塊級按鈕

會占滿整個容器并把此按鈕變成塊級元素

<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（塊級元素）Block level button</button>

代碼效果顯示

在這里插入圖片描述

按鈕禁用狀態

普通按鈕禁用狀態

<!--禁用狀態按鈕-->
<div class="container">
    <button type="button" class="btn btn-lg btn-primary" disabled="disabled">禁用的首選項按鈕</button>
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用的按鈕</button>
</div>

代碼效果顯示

在這里插入圖片描述

鏈接按鈕禁用狀態

<!--禁用狀態按鈕-->
<!-- hidden能讓整個模塊隱藏-->
<div class="container hidden">
    <a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的首選項鏈接按鈕</a>
    <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用的鏈接按鈕</a>
</div>

代碼效果顯示

點擊沒有任何反應沒有禁用標識

在這里插入圖片描述

整合不易還請大家一鍵三連支持一下！

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/296919.html

標籤：其他

上一篇：WebSocket通信原理和在Tomcat中實作原始碼詳解（萬字爆肝）

下一篇：3??Jenkins從零到壹?? ：常用功能大全（JAVA 小虛竹）

一篇文章熟練使用BootStrap，用的時候翻一下百度都省了！

文章目錄

回應式開發

回應式開發概念

回應式開發原理

回應式布局容器

BootStrap

BootStrap 簡介

為什么使用 Bootstrap

Bootstrap 包的內容

BootStrap 初步使用

布局容器

格柵系統

1.格柵系統引數

2.格柵系統偏移

頁面排版

1.副標題（small）

2.標記（mark）

洗掉/無用文本標記

字體加重傾斜標記

字體加重傾斜標記（HTML）

對齊標記

縮略語

無樣式/內斂串列

3.表格

基本表格（ .table ）

表格狀態（顏色）類

條紋表格(.table-striped)

帶邊框的表格(.table-bordered)

滑鼠懸停表格(.table-hover)

緊縮表格

回應式表格

4.表單

基本表單

內斂表單

水平排串列單

被支持的控制元件

輸入框

文本域

禁用狀態

只讀狀態

效驗狀態

控制元件尺寸

5.按鈕

預定義樣式

按鈕尺寸

塊級按鈕

按鈕禁用狀態