BootStrap-表單--樂字節前端

表單

​ 表單主要功能是用來與用戶作交流的一個網頁控件，良好的表單設計可以讓網頁與用戶更好的溝通。表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。

表單控件

​ .form-control .input-lg（較大） .input-sm（較小）

輸入框 text

​ .form-control

<div class="col-sm-3">
    <input type="text" name="" id="" class="form-control" />
    <input type="text" name="" id="" class="form-control input-lg" />
    <input type="text" name="" id="" class="form-control input-sm" />
</div>

下拉選擇框 select

​ 多行選擇設置：multiple="multiple"

<div class="col-sm-3">
    <select class="form-control">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <select class="form-control" multiple="multiple">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>

文本域 textarea

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

複選框 checkbox

​ 垂直顯示： .checkbox

​ 水平顯示： .checkbox-inline

<!-- 垂直顯示 -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" >遊戲</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" >學習</label>
    </div>
</div>
<!-- 水平顯示 -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" >遊戲
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" >學習
    </label>
</div>

單選框 radio

​ 垂直顯示： .radio

​ 水平顯示： .radio-inline

<!-- 垂直顯示 -->
<div>
    <div class="radio">
        <label><input type="radio" >男</label>
    </div>
    <div class="radio">
        <label><input type="radio" >女</label>
    </div>
</div>
<!-- 水平顯示 -->
<div>
    <label class="radio-inline">
        <input type="radio" >男
    </label>
    <label class="radio-inline">
        <input type="radio" >女
    </label>
</div>

按鈕

1）使用 button 實現

​ 基礎樣式： btn

<button class="btn">按鈕</button>

​ 附加樣式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-danger">按鈕</button>
<button class="btn btn-primary">按鈕</button>
<button class="btn btn-info">按鈕</button>
<button class="btn btn-success">按鈕</button>
<button class="btn btn-default">按鈕</button>
<button class="btn btn-warning">按鈕</button>
<button class="btn btn-link">按鈕</button>

2）多標籤支持：使用 a div 等製做按鈕

<a href="##" class="btn btn-info">a標籤按鈕</a>
<span class="btn btn-success">span標籤按鈕</span>
<div class="btn btn-warning">div標籤按鈕</div>

3）按鈕大小

​ 使用 .btn-lg、.btn-sm 或 .btn-xs 就能夠得到不一樣尺寸的按鈕

<button class="btn btn-primary btn-xs">超小按鈕.btn-xs</button>
<button class="btn btn-primary btn-sm">小型按鈕.btn-sm</button>
<button class="btn btn-primary">正常按鈕</button>
<button class="btn btn-primary btn-lg">大型按鈕.btn-lg</button>

4）按鈕禁用

​ 方法1：在標籤中添加disabled屬性

<button class="btn btn-danger" disabled="disabled">禁用按鈕</button>

​ 方法2：在元素標籤中添加類名"disabled"

<button class="btn btn-danger disabled">禁用按鈕</button>

​ 在class屬性中添加disabled只是樣式上禁用了，並非真正的禁用了此按鈕！

表單佈局

​ 基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了建立基本表單的步驟：

• 向父 <form> 元素添加 role="form"。
• 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
• 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

水平表單

​ 同一行顯示form-horizontal

​ 配合Bootstrap框架的網格系統

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">郵箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="請輸入郵箱"/>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-sm-2">密碼</label>
        <div class="col-sm-10">
            <input type="pwd" class="form-control" placeholder="請輸入密碼" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class=" checkbox">
                <label>
                    <input type="checkbox" />記住密碼
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default">提交</button>
        </div>
    </div>
</form>

內聯表單

​ 將表單的控件都在一行內顯示form-inline

​ 注意label不會顯示，存在的意義：若是沒有爲輸入控件設置label標籤，屏幕閱讀器將沒法正確識別。

<form class="form-inline">
    <div class="form-group">
        <label for="email" >郵箱</label>
        <input type="email" class="form-control" placeholder="請輸入郵箱"/>
    </div>
    <div class="form-group">
        <label for="pwd" >密碼</label>
            <input type="pwd" class="form-control" placeholder="請輸入密碼" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" />記住密碼</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>

縮略圖

​ 縮略圖在電商類的網站很常見，最經常使用的地方就是產品列表頁面。縮略圖的實現是配合網格系統一塊兒使用。同時還可讓縮略圖配合標題、描述內容，按鈕等。

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/IMG_0131.JPG" alt="...">
                <h3>高圓圓</h3>
                <p>出生於北京市，中國內地影視女演員、模特。</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>喜歡</button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>評論
                </button>
            </div>
        </div>
    </div>
</div>

面板

​ 默認的 .panel組件所作的只是設置基本的邊框（border）和內補（padding）來包含內容。

​ .panel-default：默認樣式

​ .panel-heading：面板頭

​ .panel-body：面板主體內容

<div class="panel panel-success">
    <div class="panel-heading">
        ......
    </div>
    <div class="panel-body">
        ......
    </div>
</div>

BootStrap 插件

導航

​ 使用下拉與按鈕組合能夠製做導航

​ 要點:

一、基本樣式: .nav 與 「nav-tabs」、「nav-pills」組合製做導航
二、分類: 
    1)、標籤型 (nav-tabs)導航
    2)、膠囊形(nav-pills)導航
    3)、堆棧(nav-stacked)導航
    4)、自適應(nav-justified)導航
    5)、麪包屑式(breadcrumb)導航 ，單獨使用樣式，不與nav一塊兒使用,直接加入到ol、ul中便可，通常用於導航，主要是起的做用是告訴用戶如今所處頁面的位置（當前位置）
三、狀態:
    1)、選中狀態 active 樣式
    2)、禁用狀態: disable
四、二級菜單

標籤式導航

<p>標籤式的導航菜單</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

膠囊式導航

<p>基本的膠囊式導航菜單</p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

分頁導航

​ 分頁隨處可見，分爲頁碼導航和翻頁導航

​ 頁碼導航：ul標籤上加pagination [pagination-lg | pagination-sm]

​ 翻頁導航：ul標籤上加pager

分頁

<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="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

下拉菜單

​ 在使用Bootstrap框架的下拉菜單時，必須使用兩個js

<!-- 若是要使用Bootstrap的js插件，必須先調入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括全部bootstrap的js插件或者能夠根據須要使用的js插件調用　-->
<script src="js/bootstrap.min.js"></script>

​ 要點：

一、使用一個類名爲dropdown 或btn-group的div 包裹整個下拉框: 
   <div class="dropdown"></div>
二、默認向下dropdown，向上彈起加入 . dropup 便可
三、使用button做爲父菜單，使用類名: dropdown-toggle 和自定義data-toggle屬性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
四、在button中 使用font 製做下拉箭頭
    <span class="caret"></span>
五、下拉菜單項使用一個ul列表，而且定義一個類名爲「dropdown-menu
六、分組分割線: <li>添加類名「divider」來實現添加下拉分隔線的功能
七、分組標題: li 添加類名 「dropdown-header」 來實現分組的功能
八、對齊方式:
    1)、dropdown-menu-left  左對齊 默認樣式
    2)、dropdown-menu-right   右對齊
九、激活狀態（.active）和禁用狀態（.disabled）

<!--使用一個類名爲dropdown,默認向下dropdown，向上彈起加入 . dropup 便可-->
<div class="dropdown ">
    <!--使用button做爲父菜單，使用類名: dropdown-toggle 和自定義data-toggle屬性-->
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        喜歡頻道 <span class="caret"></span><!--下拉箭頭-->
    </button>
    <!--下拉菜單項使用一個ul列表，而且定義一個類名爲「dropdown-menu-->
    <ul class="dropdown-menu">   <!--dropdown-menu-right右對齊-->
        <!--分組標題: li 添加類名 「dropdown-header」 來實現分組的功能-->
        <li class="dropdown-header">----科普----</li>
        <li>
            <a href="#">人與天然</a>
        </li>
        <!--分組分割線: <li>添加類名「divider」來實現添加下拉分隔線的功能-->
        <li class="divider"></li>
        <li class="dropdown-header">----搞笑----</li>
        <li>
            <a href="#">歡樂喜劇人</a>
        </li>
        <li>
            <a href="#">快樂大本營</a>
        </li>
        <li class="divider"></li>
        <li class="disabled">   <!--禁用狀態-->
            <a href="#">生活大爆炸</a>
        </li>
    </ul>
</div>

模態框

​ 模態框（Modal）是覆蓋在父窗體上的子窗體。一般，目的是顯示來自一個單獨的源的內容，能夠在不離開父窗體的狀況下有一些互動。子窗體可提供信息、交互等。

用法

1. 經過 data 屬性：在控制器元素（好比按鈕或者連接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）。
2. 經過 JavaScript：使用這種技術，能夠經過 JavaScript 來調用帶有 id="identifier" 的模態框：

$('#identifier').modal(options);

實例

<h2>建立模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    開始演示模態框
</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
            </div>
            <div class="modal-body">在這裏添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

方法

方法	描述	實例
Toggle: .modal('toggle')	手動切換模態框。	$('#identifier').modal('toggle');
Show: .modal('show')	手動打開模態框。	$('#identifier').modal('show');
Hide: .modal('hide')	手動隱藏模態框。	$('#identifier').modal('hide');

想要更多Java，前端，大數據，微服務等資料<a href="https://i.loli.net/2020/06/22/zbPOtKIqDjo45Mw.png">點我掃碼領取</a>;