WEB前端第五十一課——BootStrap組件（三）dropdown、form、modal、pagination

1.Dropdown下拉按鈕

　　⑴ 基本樣式

　　　　外層容器div，

　　　　button元素，在一般按鈕的基礎上增加“.dropdown-toggle”類和 data-toggle="dropdown"屬性、“id”

　　　　　　　　　　“.btn-secondary”樣式也可以改換成其他類，如“.btn-success”……

　　　　下拉選單，

　　　　下拉選項，，可以用<a>，也可以是<span>、<button>、<h*>等元素

　　　　　　　　　下拉選項之間可以插入分隔，<div ></div>

    <div >
        <button  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div  aria-labelledby="dropdownMenuButton">
            <a  href="https://www.cnblogs.com/husa/p/#">Action</a>
            <a  href="https://www.cnblogs.com/husa/p/#">Another action</a>
            <a  href="https://www.cnblogs.com/husa/p/#">Something else here</a>
        </div>
    </div>

　　⑵ 分裂按鈕

　　　　本質是將基本樣式中的按鈕與下拉選單分開為兩個按鈕，

　　　　因此，分裂按鈕是一個按鈕組，其中一個是普通按鈕，另一個是下拉按鈕，

　　　　設定按鈕大小、外觀樣式，需要針對普通按鈕和下拉按鈕分別設定，

　　　　與基本樣式不同的是，下拉按鈕需要增加“.dropdown-toggle-split”類，

    <div >
<!--    普通按鈕    -->
        <button type="button" >Action</button>
<!--    下拉按鈕    -->
        <button type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span >Toggle Dropdown</span>
        </button>
<!--    下拉選單    -->
        <div >
            <a  href="https://www.cnblogs.com/husa/p/#">Action</a>
            <a  href="https://www.cnblogs.com/husa/p/#">Another action</a>
            <a  href="https://www.cnblogs.com/husa/p/#">Something else here</a>
<!--       下拉選項分隔     -->
            <div ></div>
            <a  href="https://www.cnblogs.com/husa/p/#">Separated link</a>
        </div>
    </div>

　　⑶ 選單方向

　　　　按鈕選單除了下拉也可以向上、向右、向左，

　　　　下拉選單使用的是/"btn-group"，

　　　　但其他三個方向都必須使用".btn-group"和特定方向類，

　　　　　　dropup，向上

　　　　　　dropright，向右

　　　　　　dropleft，向左

　　　　而且，特定方向類只需要設定".btn-group"容器即可，其他內部元素樣式與下拉按鈕相同，

　　⑷ 選單選項

　　　　".dropdown-header"，用于設定選單選項表頭，將其賦予<h*>元素

　　　　".dropdown-item-text"類，用于將選單選項定義為文本格式，可以使用<span>元素

　　　　".active"類，用于設定選單活動選項

　　　　".disable"類，禁用選單選項

　　　　純文本形式的選單內容，示例如下：　　　　　　

　　　　　　<div style="max-width: 200px;">
　　　　　　　　<p>
　　　　　　　　　　Some example text that's free-flowing within the dropdown menu.
　　　　　　　　</p>
　　　　　　　　<p >
　　　　　　　　　　And this is more example text.
　　　　　　　　</p>
　　　　　　</div>

　　　　另外，form表單也可以作為選單的內容呈現，

　　⑸ 選單容器

　　　　".dropdown-menu-right"，賦予選單容器，定義選單右對齊

　　　　回應式對齊，即符合某個條件時采用指定對齊方式，需設定<button>屬性 data-display="static"，

　　　　　　　　　　同時，設定dropdown選單容器特定樣式類，如“.dropdown-menu-lg-right”或者

　　　　　　　　　　".dropdown-menu-right"和“.dropdown-menu-lg-left”，

　　⑹ 選單事件　　　　

　　　　show.bs.dropdown
　　　　shown.bs.dropdown
　　　　hide.bs.dropdown
　　　　hidden.bs.dropdown

　　　　呼叫示例：

　　　　　　$('#myDropdown').on('show.bs.dropdown', function () {
　　　　　　　　// do something...
　　　　　　})

2.Form表單

　　除普通表單外，可以給<form>元素添加“.form-inline”定義行內表單，

　　每一對<label><input>標簽都被一個“.form-group”類的div包裹，

　　input元素的 class樣式為“.form-control”，可以添加通過“.form-control-sm/lg”定義 form控制元件大小，

　　　　input元素中添加“readonly”屬性，定義只讀文本，

　　　　將“.form-control”替換為“.form-control-plaintext”去掉邊框背景等樣式

　　input type="checkbox"時，，label

　　⑴ 基本表單示例：

    <form>
        <div >
            <label for="exampleInputEmail1">Email address</label>
            <input type="email"  id="exampleInputEmail1" aria-describedby="emailHelp">
            <small id="emailHelp" >We'll never share your email with anyone else.</small>
        </div>
        <div >
            <label for="exampleInputPassword1">Password</label>
            <input type="password"  id="exampleInputPassword1">
        </div>
        <div >
            <input type="checkbox"  id="exampleCheck1">
            <label  for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" >Submit</button>
    </form>

　　　　ps：<small>標簽用于定義小一號字體的文本，如果字體達到模型支持的最小字號，

　　　　　　則<small>標簽將不起任何作用，其與<big>標簽相對應，

　　⑵ 下拉選單 form-group

　　　　<select>可以定義“multiple”屬性，同時顯示多項，

　　　　同樣，可以添加通過“.form-control-sm/lg”定義 form控制元件大小，

        <div >
            <label for="exampleFormControlSelect">Example select</label>
            <select  id="exampleFormControlSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>

　　⑶ input type="file"（檔案輸入框）

　　　　此時，input 

　　　　　　<div >
　　　　　　　　<label for="exampleFormControlFile">Example file input</label>
　　　　　　　　<input type="file" id="exampleFormControlFile">
　　　　　　</div>

　　⑷ 回應式 form-group

　　　　“.form-group”容器添加“.row”類

　　　　將<input>元素用<div>包裹，定義為“.col-* ”

        <div >
            <label for="staticEmail" >Email</label>
            <div >
                <input type="text" readonly  id="staticEmail" value="https://www.cnblogs.com/husa/p/[email protected]">
            </div>
        </div>

　　⑸ input type="range"（范圍輸入框）

　　　　此時，input 

        <div >
            <label for="formControlRange">Example Range input</label>
            <input type="range"  id="formControlRange">
        </div>

　　⑹ “.form-group”改換為".form-check"

　　　　".form-check"類的 div容器用于定義“checkbox”和“radio”表單元素

　　　　同時添加".form-check"類和".form-check-inline"類，表示form-check行內樣式，

<!--    復選框控制元件    -->
        <div >
            <input  type="checkbox" value="" id="defaultCheck">
            <label  for="defaultCheck">
                Default checkbox
            </label>
        </div>
<!--    單選按鈕控制元件    -->
        <div >
        <input  type="radio" name="exampleRadios" id="exampleRadios" value="https://www.cnblogs.com/husa/p/option">
        <label  for="exampleRadios">
            Second default radio
        </label>
        </div>

　　⑺ 更多復雜的表單設計

　　　　參考資料：https://v4.bootcss.com/docs/components/forms/?

3.Modal模態框

　　類似于 js中的Alert對話框，但Modal功能要強大的多，

　　⑴ 基礎Modal

　　　示例如下：

    <div  tabindex="-1" role="dialog">
        <div >
            <div >
                <div >
                    <h5 >Modal title</h5>
                    <button type="button"  data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div >
                    <p>Modal body text goes here.</p>
                </div>
                <div >
                    <button type="button"  data-dismiss="modal">Close</button>
                    <button type="button" >Save changes</button>
                </div>
            </div>
        </div>
    </div>

 　　由代碼結構可以看出，

　　　　Modal容器有三層 div：

　　　　　　.Modal、.Modal-dialog、.Modal-content，每一層分別預定義了不同的屬性樣式，

　　　　Modal內容的三塊構成：

　　　　　　.Modal-header、Modal-body、Modal-footer

 　　　　Modal頭部通常包括標題(<h*>)和關閉按鈕(<button>)：

　　　　　　.Modal-title、.close

　　　　　　“.close”按鈕需要定義“ data-dismiss="modal" ”屬性，關閉標識叉號為“&times;”物體字符

　　　　Modal腳部通常設定關閉按鈕和提交/保存按鈕：

　　　　　　此處關閉按鈕class與頭部關閉按鈕不同，，data-dismiss屬性相同，

　　⑵ 靜態Modal

　　　　非靜態Modal在彈出后可以通過關閉按鈕或點擊彈框外部來關閉彈出對話框，

　　　　但靜態Modal在彈出后只能點擊關閉按鈕關閉彈出對話框，

　　　　所有關于Modal對話框的觸發和結束的相關屬性或類的設定都是在最外層 div容器中設定的：

　　　　　　定義靜態Modal，

　　　　　　　　<div id="staticBackdrop"  data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" " aria-hidden="true">
　　　　　　　　　　...
　　　　　　　　</div>

　　　　　　　　其中，data-backdrop屬性表示資料背景，

　　　　　　　　　　　data-keyboard屬性表示Esc鍵是否生效，

　　　　　　　　　　　tabindex屬性表示Tab鍵的切換順序，負值為不在Tab序列內

　　　　　　定義觸發按鈕，

　　　　　　　　<button type="button" data-toggle="modal"  data-target="#staticBackdrop">
　　　　　　　　　　Launch static backdrop modal
　　　　　　　　</button>

　　　　　　　　其中，data-target屬性的Value是要觸發的Modal的“id”，

　　⑶ 長文滾動

　　　　當Modal對話框中的文本長度超過視口高度時，需要滾動查看內容，

　　　　“.modal”預定義了默認滾動方式，整個對話框獨立于頁面本身進行上下滾動；

　　　　還可以在“.modal-dialog”中添加“.modal-dialog-scrollable”類，創建一個“.modal-body”滾動條：

　　　　　　<div >
　　　　　　　　...
　　　　　　</div>

　　⑷ Modal垂直居中

　　　　在“.modal-dialog”中添加“.modal-dialog-centered”類，可以使整個對話框在頁面垂直居中：

　　　　　　<div >
　　　　　　　　...
　　　　　　</div>

　　⑸ tooltips和popover

　　⑹ Modal大小

　　　　通過向“.modal-dialog”中添加各種尺寸類，定義整個對話框的大小：

　　　　　　<div >...</div>
　　　　　　<div >...</div>
　　　　　　<div >...</div>

　　⑺ Modal方法和事件

　　　　參見BootStrap官方檔案：https://v4.bootcss.com/docs/components/modal/

4.分頁器

　　用于頁面切換的頁碼導航連接，通常使用由<nav>標簽包裹的“ul”串列，

 　　⑴ 基礎樣式

    <nav>
        <ul >
            <li ><a  href="https://www.cnblogs.com/husa/p/#">Previous</a></li>
            <li ><a  href="https://www.cnblogs.com/husa/p/#">1</a></li>
            <li ><a  href="https://www.cnblogs.com/husa/p/#">2</a></li>
            <li ><a  href="https://www.cnblogs.com/husa/p/#">3</a></li>
            <li ><a  href="https://www.cnblogs.com/husa/p/#">Next</a></li>
        </ul>
    </nav>

　　　　其中，可以給<nav>元素添加“aria-label="Page navigatio" ”屬性幫助輔助技術更好的識別內容；

　　⑵ Previous和Next按鈕可以使用圖示替代

    <nav aria-label="Page navigation example">
        <ul >
            <li >
                <a  href="https://www.cnblogs.com/husa/p/#" aria-label="Previous">
                    <span aria-hidden="true">?</span>     <!--圖示為物體字符“& laquo;”-->
                </a>
            </li>
            <li ><a  href="https://www.cnblogs.com/husa/p/#">1</a></li>
            <li ><a  href="https://www.cnblogs.com/husa/p/#">2</a></li>
            <li ><a  href="https://www.cnblogs.com/husa/p/#">3</a></li>
            <li >
                <a  href="https://www.cnblogs.com/husa/p/#" aria-label="Next">
                    <span aria-hidden="true">?</span>     <!--圖示為物體字符“& raquo;”-->
                </a>
            </li>
        </ul>
    </nav>

　　⑶ 活動狀態

　　　　可以為“.page-item”元素<li>添加“.disable”類定義禁用狀態，或添加“.active”類定義當前活動狀態，

　　⑷ Nav大小

　　　　可以給“.pagination”元素<ul>添加“.pagination-sm/lg”類，定義分頁器小尺寸和大尺寸，

　　⑸ Nav對齊方式

　　　　可以給“.pagination”元素<ul>添加“.justify-content-center/end”類，定義分頁器居中或居右，

參考資料來源：BootStrap中文網（https://v3.bootcss.com/）

標籤：Html/Css

上一篇：WEB前端第五十一課——BootStrap組件（三）dropdown、form、modal、pagination

下一篇：ES6新增陣列的方法