BootStrap基本使用

這篇具有很好參考價(jià)值的文章主要介紹了BootStrap基本使用。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

BootStrap框架

BootStrap特點(diǎn)

bootstrap的使用

布局容器

固定寬度

完整寬度

柵格網(wǎng)格系統(tǒng)

前言

列的形式

列組合和列偏移?

列排序

列嵌套

排版

標(biāo)題

段落

強(qiáng)調(diào)

對齊效果

列表

去點(diǎn)列表

內(nèi)聯(lián)列表

定義列表

代碼

表格

表單標(biāo)簽

文本框和文本域?

單選框和復(fù)選框

復(fù)選框

單選框

按鈕

設(shè)置按鈕大小

設(shè)置按鈕禁用

表單布局

前言

水平表單

內(nèi)聯(lián)表單

縮略圖

面板

bootstrap插件

導(dǎo)航插件

導(dǎo)航欄的分類（加在ul內(nèi)）

導(dǎo)航欄中的導(dǎo)航狀態(tài)（加在li內(nèi)）

標(biāo)簽式導(dǎo)航?

膠囊型導(dǎo)航?

垂直型導(dǎo)航?

兩端對齊導(dǎo)航?

面包屑導(dǎo)航?

分頁導(dǎo)航

頁碼導(dǎo)航

翻頁導(dǎo)航

下拉菜單

注意：

模態(tài)框

模態(tài)框的使用

通過data屬性使用模態(tài)框

通過js使用模態(tài)框?

總結(jié)：

BootStrap框架

理解：Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項(xiàng)目。

bootstrap中文網(wǎng)：https://www.bootcss.com/

BootStrap特點(diǎn)

簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，html，css，js工具集，讓web開發(fā)高速簡單
基于html5、css3的bootstrap，具有大量誘人的特性，友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n
自定義jquery插件，完整的類庫，bootstrap3基于less；bootstrap4基于sass的css預(yù)處理技術(shù)
bootstrap響應(yīng)式布局設(shè)計(jì)，讓一個(gè)網(wǎng)站兼容不同分辨率的設(shè)備，bootstrap的響應(yīng)式布局設(shè)計(jì)，給用戶提供更好的視覺使用體驗(yàn)
具有豐富的組件

bootstrap的使用

導(dǎo)入Bootstrap的css文件：bootstrap.min.css

導(dǎo)入Bootstrap的js文件：bootstrap.min.js

導(dǎo)入jquery的js文件：jquery.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 使用X-UA-Compatible來設(shè)置IE瀏覽器的兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 
        viewport表示視口
        width=device-width指示視口的寬度用為設(shè)備屏幕的寬度
        initial-scale=1.0指示web頁面的縮放比例為1（就表示不縮放）
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <!-- 載入bootstrap的css -->
    <link href="./lib/bootstrap.min.css" rel="stylesheet"/>
    <!-- 若使用bootstrap的js插件，則必須先導(dǎo)入jquery(因?yàn)閎ootstrap是依賴于jquery的) -->
    <script src="./lib/jquery.js"></script>
    <!-- 載入bootstrap的js：包括所有的bootstrap的js插件或者可以根據(jù)需要使用的js插件的調(diào)用 -->
    <script src="./lib/bootstrap.min.js"></script>
</head>
<body>
    <h1>hello bootstrap</h1>
</body>
</html>

布局容器

固定寬度

container類用于固定寬度(寬度大小可以設(shè)置)并支持響應(yīng)布局的容器（兩側(cè)會有留白，留白的大小取決于寬度的大?。?，但是高度需要具體大小來撐起

<style>
    .container{
        width: 300px;
        background-color: aquamarine;
    }
</style>
<body>
    <div class="container">
        hello bootstrap
    </div>
</body>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

完整寬度

container-fluid類用于完整（100%）寬度，占全部視口的容器（若在此基礎(chǔ)上設(shè)置寬度就變成固定寬度，兩側(cè)就會有留白效果）。

<style>
    .container-fluid{
        background-color: aquamarine;
    }
</style>
<body>
    <div class="container-fluid">
        hello bootstrap
    </div>
</body>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

柵格網(wǎng)格系統(tǒng)

前言

bootstrap提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕視口尺寸的增加，系統(tǒng)會自動分成最多12列。柵格系統(tǒng)用于通過一系列的行與列的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放到這些創(chuàng)建好的布局中

原理：通過定義容器的大小，平分成12份（也有平分成24/32份）最后結(jié)合媒體查詢就制作出強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)。bootstrap中的網(wǎng)格系統(tǒng)就是平分成12份

bootstrap怎么用,使用工具,bootstrap,前端,javascript

    <div class="container">
        <!-- 一行有12列 -->
        <div class="row">
            <div class="col-md-4">占4列</div>
            <div class="col-md-8">占8列</div>
        </div>
    </div>

列的形式

超小屏：xs（xsmall phones）?
小屏：sm（small tables）
中屏：md（middle desktops）
大屏：lg（larger desktops）

?
    <div class="container">
        <!-- 一行有12列 -->
        <div class="row">
            <!-- 設(shè)置大屏幕一次占列，小屏幕一次占6列 -->
            <div class="col-md-3 col-sm-6" style="background-color: papayawhip;">1</div>
            <div class="col-md-3 col-sm-6" style="background-color: yellow;">2</div>
            <div class="col-md-3 col-sm-6" style="background-color: skyblue;">2</div>
            <div class="col-md-3 col-sm-6" style="background-color: orange;">2</div>
        </div>
    </div>

?

注意：

row行必須包含在container中，以便賦予對齊方式和內(nèi)距
只有列才可以作為row行元素的直接子元素，但列數(shù)與列偏移量之和不得高于12份，若超過12，則（最后的塊）自動換到下一行

列組合和列偏移?

列組合：更改數(shù)字來合并列（原則：列總和不能超過12，大于12則自動換到下一行）?

列偏移：該列偏移后，那么后面的所有列都跟著偏移

    <div class="container">
        <!-- 一行有12列 -->
        <div class="row">
            <!-- 該列距離左邊有1個(gè)格子的偏移量 -->
            <div class="col-md-4 col-md-offset-1" style="background-color: antiquewhite;">占4列</div>
            <div class="col-md-4" style="background-color: yellow;">占4列</div>
        </div>
    </div>

列排序

含義：改變列的方向，就是改變左右浮動，并且設(shè)置浮動的距離。在bootstrap框架網(wǎng)格系統(tǒng)中是通過添加類名col-md-push-*和col-md-pull-*表示（圖中*代表移動的列的組合數(shù)。）往前pull，往后push

    <div class="container">
        <!-- 一行有12列 -->
        <div class="row">
            <!-- 第一個(gè)塊向右移動了2個(gè)列，第二個(gè)列沒移動，因此第二個(gè)列蓋住第一個(gè)列的后半部分 -->
            <div class="col-md-4 col-md-push-2" style="background-color: antiquewhite;">占4列</div>
            <div class="col-md-4" style="background-color: yellow;">占4列</div>
        </div>
    </div>

列嵌套

理解：你可以在一個(gè)列中添加一個(gè)或多個(gè)row行容器，然后在這個(gè)行容器中插入列

    <div class="container">
        <!-- 一行有12列 -->
        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-4">1</div>    
                    <div class="col-md-4">2</div>    
                    <div class="col-md-4">3</div>    
                </div>
            </div>
            <div class="col-md-4">第二列</div>
        </div>
    </div>

排版

標(biāo)題

定義標(biāo)題都是使用標(biāo)簽<h1>到<h6>，相對于html來說bootstrap覆蓋了其默認(rèn)的樣式，使用其在所有的瀏覽器下顯示的效果一樣。
bootstrap定義了h1-h6六個(gè)類名，可以為非標(biāo)題元素設(shè)置對應(yīng)的標(biāo)題樣式。同時(shí)后面還可以緊跟著一行小的副標(biāo)題<small></small>（或者類名為small的div塊）

<body>
    <div class="h1">標(biāo)題1<small>副標(biāo)題</small></div>
    <h2>標(biāo)題2<span class="small">副標(biāo)題</span></h2>
    <h3>標(biāo)題3</h3>
</body>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

段落

該段落和html的段落都是用p標(biāo)簽表示，只不過可以用lead類在為段落增大字號，以及加粗文本，而且對行高和margin也做了一定的處理
在該段落中也可以用small類行內(nèi)塊或small標(biāo)簽來減小字號，也可以用html中的文本格式標(biāo)簽

<body>
<p>我是一段話，<b>字號被加粗</b></p>
<p class="lead">我是一段加lead類的話，<span class="small">字號減小</span></p>
</body>

強(qiáng)調(diào)

定義一套類名，通過以下顏色表示強(qiáng)調(diào)

<body>
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危險(xiǎn)效果</div>
</body>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

對齊效果

前言：bootstrap定義4個(gè)類名來控制文本的對齊風(fēng)格

<body>
<p class="text-left">我是左對齊</p>
<p class="text-right">我是右對齊</p>
<p class="text-center">我是居中對齊</p>
<p class="text-justify">我是兩端對齊</p>
</body>

列表

去點(diǎn)列表

含義：前面沒有符號的例表

<ul class="list-unstyled">
    <li>列表1</li>
    <li>列表2</li>
</ul>

內(nèi)聯(lián)列表

解釋：把垂直列表換成水平列表，而且去掉項(xiàng)目符號，保持水平顯示（制作水平導(dǎo)航時(shí)常用）其主要用list-inline類來表示。

<ul class="list-inline">
    <li>列表1</li>
    <li>列表2</li>
</ul>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

定義列表

前言：可以使用dl-horizontal來制作水平定義列表，當(dāng)標(biāo)題寬度超過160px時(shí)會顯示三個(gè)省略號

<dl class="dl-horizontal">
    <dt>html超文本標(biāo)記語言，多出來的</dt>
    <dd>html為超文本標(biāo)記語言，是一種標(biāo)識性語言</dd>
    <dt>css為層疊樣式表</dt>
    <dd>css為層疊樣式表，為前端三劍客之一</dd>
</dl>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

代碼

<body>
    <!-- 只能顯示單行代碼 -->
    <code>this is a simple code</code><br>
    <code>this is a simple code</code>
    <!-- 快捷鍵 -->
    <p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>保存內(nèi)容</p>
    <!-- 多行代碼 -->
    <!-- 代碼會保留原本的格式包括空格與回車 -->
    <!-- 當(dāng)長度超過指定值時(shí)可以用pre-scrollable類添加滾動條 -->
    <pre class="pre-scrollable">
    &lt;h1&gt;hello springboot&lt;/h1&gt;
    public class PeopleApplication {
        public static void main(String[] args) {
            SpringApplication.run(PeopleApplication.class, args);
        }
    }
    </pre>
</body>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

表格

前言：bootstrap為表格提供了一種基礎(chǔ)樣式和4種附加樣式以及一個(gè)支持響應(yīng)式的表格，在使用bootstrap表格的過程中，只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格

基礎(chǔ)樣式

table：基礎(chǔ)表格

附加樣式

table-striped：斑馬線表格
table-bordered：帶邊框的表格
table-hover：鼠標(biāo)懸停高亮的表格
table-condensed：緊湊型表格，單元格沒內(nèi)距或者內(nèi)距較小的表格

注意：盡量在基礎(chǔ)表格的情況下附加樣式使用

<body>
    <table class="table table-bordered">
        <tr>
            <td>11</td>
            <td>12</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
        </tr>
    </table>
</body>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

表單標(biāo)簽

文本框和文本域?

表單標(biāo)簽用到的類

form-control：bootstrap中表單控件的樣式

改變文本框大小

input-lg：bootstrap中文本框的增大
input-sm：bootstrap中文本框的減小?

<body>
    <div class="row">
        <!-- 文本框 -->
        <div class="col-md-3">
            <input type="text" class="form-control"/>
        </div>
        <!-- 下拉框 -->
        <div class="col-md-3">
            <select class="form-control" multiple="multiple">
                <option>北京</option>
                <option>上海</option>
            </select>
        </div>
        <!-- 文本域 -->
        <div class="col-md-3">
            <textarea class="form-control"></textarea>
        </div>
    </div>
</body>

單選框和復(fù)選框

復(fù)選框

    <!-- 復(fù)選框 -->
    <div class="row">
        <!-- 垂直顯示：通過div的class="checkbox"實(shí)現(xiàn) -->
        <div class="col-md-3">
            <div class="checkbox">
                <label><input type="checkbox" name="hobby"/>唱歌</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby"/>跳舞</label>
            </div>
        </div>
        <!-- 水平顯示：通過label標(biāo)簽的class="checkbox-inline"實(shí)現(xiàn) -->
        <div class="col-md-3">
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby"/>唱歌
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby"/>跳舞
            </label>
        </div>
    </div>

單選框

    <!-- 單選框 -->
    <div class="row">
        <!-- 垂直顯示：通過div的class="radio"實(shí)現(xiàn) -->
        <div class="col-md-3">
            <div class="radio">
                <label><input type="radio" name="sex"/>男</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="sex"/>女</label>
            </div>
        </div>
        <!-- 水平顯示：通過label標(biāo)簽的class="radio-inline"實(shí)現(xiàn) -->
        <div class="col-md-3">
            <label class="radio-inline">
                <input type="radio" name="sex"/>男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex"/>女
            </label>
        </div>
    </div>

按鈕

前言：使用具體的類代表特定樣式的按鈕（不僅可以使用在button標(biāo)簽里，也可以使用在其他標(biāo)簽里）

基礎(chǔ)樣式：btn

<button class="btn">按鈕</button>
<a  class="btn btn-primary">鏈接</a>

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

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

bootstrap怎么用,使用工具,bootstrap,前端,javascript

設(shè)置按鈕大小

btn-lg：按鈕增大
btn-sm：按鈕減小
btn-xs：按鈕超小

<body>
    <button class="btn">按鈕1</button>
    <button class="btn btn-lg">按鈕2</button>
    <button class="btn btn-sm">按鈕3</button>
    <button class="btn btn-xs">按鈕4</button>
</body>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

設(shè)置按鈕禁用

添加disable的屬性（真正的禁用）
添加disable類名（樣式上禁用）

<body>
    <button class="btn">按鈕</button>
    <!-- 點(diǎn)擊事件失敗 -->
    <button class="btn" disabled onclick="alert('hello')">按鈕1</button>
    <!-- 點(diǎn)擊事件成功 -->
    <button class="btn disabled" onclick="alert('hello')">按鈕2</button>
</body>

表單布局

前言

基本表單結(jié)構(gòu)都是Bootstrap自帶的，個(gè)別表單控件會自動接收一些全局樣式，下面列出創(chuàng)建基本表單的步驟

向父<form>元素添加role=“form”屬性
把標(biāo)簽和控件放在一個(gè)帶有類名form-group的div塊中（里面配合網(wǎng)格系統(tǒng)使用，放列）
向所有的文本元素input、textarea、select添加class=“form-control”

水平表單

表單類名為form-horizontal（配合網(wǎng)格系統(tǒng)使用）

    <!-- 水平表單 -->
    <form action="#" class="form-horizontal" role=“form”>
        <!-- 表單中的表單元素 -->
        <div class="form-group">
            <!-- label的樣式 -->
            <label for="uname" class="control-label col-md-2">姓名</label>
            <div class="col-md-8">
                <input type="text" id="uname" class="form-control" placeholder="請輸入您的姓名"/>
            </div>
        </div>
        <div class="form-group">
            <!-- label的樣式 -->
            <label for="upwd" class="control-label col-md-2">密碼</label>
            <div class="col-md-8">
                <input type="text" id="upwd" class="form-control" placeholder="請輸入您的密碼"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-2 col-md-offset-5">
                <button class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

內(nèi)聯(lián)表單

理解：將表單控件都放到一行顯示，用到的表單類名為form-inline

    <form action="#" class="form-inline" role="form">
        <div class="form-group">
            <label for="username">姓名</label>
            <input type="text" id="username" class="form-control" placeholder="請輸入您的姓名"/>
        </div>
        <div class="form-group">
            <label for="password">密碼</label>
            <input type="text" id="password" class="form-control" placeholder="請輸入您的密碼"/>
        </div>
        <div class="form-group">
            <button class="btn btn-default">提交</button>
        </div>
    </form>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

注意：這里不用設(shè)置格子，因?yàn)樗性囟荚谝恍?，設(shè)置格子也沒意義?

縮略圖

前言：在bootstrap中類名為thumbnail的塊將被解析為縮略圖

注意：縮略圖的實(shí)現(xiàn)是配合網(wǎng)格系統(tǒng)一起使用，同時(shí)還可以讓縮略圖配合標(biāo)題、描述內(nèi)容按鈕等

    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <!-- 縮略圖 -->
                <div class="thumbnail">
                    <img src="./static/1.jpg" style="width:240px;height:360px;">
                    <h3>高圓圓</h3>
                    <p>出生于北京，中國內(nèi)地影視女演員，模特。</p>
                    <button class="btn btn-default">
                        <!-- 圖標(biāo)組件 -->
                        <span class="glyphicon glyphicon-heart"></span>喜歡
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span>評論
                    </button>
                </div>
            </div>
        </div>
    </div>

面板

前言：使用具體的類名代表特定樣式的面板

基礎(chǔ)樣式：panel

附加樣式(面板顏色)

panel-primary:重點(diǎn)藍(lán)
panel-success:成功綠
panel-info:信息藍(lán)
panel-warning:警告黃
panel-danger:危險(xiǎn)紅

注意：面板由面板頭和面板體以及面板尾部構(gòu)成

    <div class="panel panel-warning">
        <!-- 面板頭 -->
        <div class="panel-heading">
        離騷
        </div>
        <!-- 面板體 -->
        <div class="panel-body">
        路漫漫其修遠(yuǎn)兮，吾將上下而求索。
        </div>
        <!-- 面板尾部 -->
        <div class="panel-footer">
        作者：屈原
        </div>
    </div>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

bootstrap插件

導(dǎo)航插件

前言：根據(jù)導(dǎo)航塊的類名不同可以顯示多種導(dǎo)航欄（通常與列表一起使用）

基礎(chǔ)樣式：nav

導(dǎo)航欄的分類（加在ul內(nèi)）

標(biāo)簽型：nav-tabs
膠囊型：nav-pills
垂直型：nav-stacked
自適應(yīng)：nav-justified
面包屑：breadcrumb（其不和nav基礎(chǔ)樣式一起使用，可以單獨(dú)直接使用）

導(dǎo)航欄中的導(dǎo)航狀態(tài)（加在li內(nèi)）

選中狀態(tài)：active狀態(tài)
禁用狀態(tài)：disable

標(biāo)簽式導(dǎo)航?

    <p>標(biāo)簽式的導(dǎo)航菜單</p>
    <ul class="nav nav-tabs">
        <li><a href="#">Home</a></li>
        <!-- 默認(rèn)選中 -->
        <li class="active"><a href="#">Java</a></li>
        <!-- 禁用導(dǎo)航 -->
        <li class="disabled"><a href="#">PHP</a></li>
    </ul>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

膠囊型導(dǎo)航?

    <p>基本的膠囊式導(dǎo)航菜單</p>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

垂直型導(dǎo)航?

    <p>垂直的膠囊式導(dǎo)航菜單</p>
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

兩端對齊導(dǎo)航?

    <p>兩端對齊的導(dǎo)航元素</p>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

面包屑導(dǎo)航?

    <p>面包屑式的導(dǎo)航元素</p>
    <ul class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Java</a></li>
        <li class="active"><a href="#">PHP</a></li>
    </ul>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

分頁導(dǎo)航

頁碼導(dǎo)航基本樣式：ul標(biāo)簽上加pagination類?

頁碼導(dǎo)航附加樣式

頁碼變大：pagination-lg
頁碼變小：pagination-sm

翻頁導(dǎo)航：ul標(biāo)簽上添加pager類

頁碼導(dǎo)航

    <ul class="pagination pagination-lg">
        <!-- 左雙箭頭 -->
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="active"><a href="#">3</a></li>
        <!-- 右雙箭頭 -->
        <li><a href="#">&raquo;</a></li>
    </ul>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

翻頁導(dǎo)航

    <ul class="pager">
        <li><a href="#">上一頁</a></li>
        <li><a href="#">下一頁</a></li>
    </ul>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

下拉菜單

注意：

在使用下拉菜單之前必須上面3個(gè)文件（bootstrap的css文件、jquery的js文件、bootstrap的js文件）都引入
下拉菜單的整體都必須在一個(gè)div塊中，該塊用下拉菜單類名修飾（dropdown或btn-group：下拉菜單、dropup：上拉菜單）
按鈕應(yīng)使用button作為父菜單，使用類名：dropdown-toggle（下拉菜單的樣式）和data-toggle=“dropdown”屬性
設(shè)置下拉箭頭使用行內(nèi)元素的caret類
下拉菜單的列表用dropdown-menu類標(biāo)識，該列表內(nèi)有列表頭，用dropdown-header類標(biāo)識，多個(gè)列表頭之間用分割線分開，用divider類標(biāo)識。
若想要選中列表中的某個(gè)元素，則該元素用active類標(biāo)識；若想要禁用列表中的某個(gè)元素，則該元素用disabled類標(biāo)識

    <!-- 使用一個(gè)類名為dropdown或btn-group的div包裹整個(gè)下拉框（向下：dropdown；向上：dropup） -->
    <div class="dropdown">
        <!-- 使用button作為父菜單，使用類名：dropdown-toggle和自定義data-toggle屬性 -->
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            頻道
            <!-- 設(shè)置下拉箭頭(caret類) -->
            <span class="caret"></span>
        </button>
        <!-- 下拉菜單使用一個(gè)ul列表，并定義一個(gè)類名為dropdown-menu -->
        <ul class="dropdown-menu">
            <!-- 分組標(biāo)題，添加類名dropdown-header -->
            <li class="dropdown-header">--科普--</li>
            <li class="active"><a href="#">人與自然</a></li>
            <li><a href="#">動物世界</a></li>
            <!-- 添加分割線,添加divider類 -->
            <li class="divider"></li>
            <li class="dropdown-header">--搞笑--</li>
            <li class="disabled"><a href="#">快樂大本營</a></li>
            <li><a href="#">生活大爆炸</a></li>
        </ul>
    </div>

bootstrap怎么用,使用工具,bootstrap,前端,javascript

模態(tài)框

理解：模態(tài)框是父窗體上的子窗體，通常，目的是顯示一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動，子窗體可以提供信息、交互等

模態(tài)框的使用

通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設(shè)置屬性?data-toggle="modal"，同時(shí)設(shè)置?data-target="#identifier"?或?href="#identifier"?來指定要切換的特定的模態(tài)框（帶有 id="identifier"的模態(tài)框）。
通過 JavaScript：使用這種技術(shù)，您可以通過簡單的一行 JavaScript 來調(diào)用特定的模態(tài)框

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

注意：options為特定的函數(shù)；（展示模態(tài)框的函數(shù)：show、隱藏模態(tài)框函數(shù)：hide）

通過data屬性使用模態(tài)框

    <h2>創(chuàng)建模態(tài)框（Modal）</h2>
    <!-- 按鈕觸發(fā)模態(tài)框 -->
    <!-- data-toggle="modal"用于打開模態(tài)框窗口 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態(tài)框</button>
    <!-- 模態(tài)框（Modal） -->
    <!-- aria-labelledby="myModalLabel"，該屬性引用模態(tài)框的標(biāo)題。 -->
    <!-- 屬性 aria-hidden="true" 用于保持模態(tài)窗口不可見，直到觸發(fā)器被觸發(fā)為止（比如點(diǎn)擊在相關(guān)的按鈕上）。 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 定義模態(tài)框的頭部 -->
                <div class="modal-header">
                    <!-- class="close"屬性用于為模態(tài)框關(guān)閉窗口設(shè)置樣式 -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <!-- 模態(tài)框的標(biāo)題 -->
                    <h4 class="modal-title" id="myModalLabel">模態(tài)框標(biāo)題</h4>
                </div>
                <!-- 定義模態(tài)框的體部 -->
                <div class="modal-body">在這里添加一些文本</div>
                <!-- 定義模態(tài)框的尾部 -->
                <div class="modal-footer">
                    <!-- data-dismiss="modal"用于關(guān)閉模態(tài)框窗口的屬性 -->
                    <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div>
        </div>
    </div>

bootstrap怎么用,使用工具,bootstrap,前端,javascript 文章來源地址http://www.zghlxwxcb.cn/news/detail-789172.html

通過js使用模態(tài)框?

<body>
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <script src="./lib/jquery.js"></script>
    <script src="./lib/bootstrap.min.js"></script>
    <!-- 打開模態(tài)框 -->
    <div class="btn btn-primary" id="btn">打開模態(tài)框</div>
    <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">模態(tài)框標(biāo)題</h4>
                </div>
                <div class="modal-body">在這里添加一些文本</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
                    <button type="button" class="btn btn-primary" id="submitBtn">提交更改</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    /* 模態(tài)框的顯示 */
    $('#btn').on('click',function(){
        $("#myModal").modal("show")
    })
    /* 模態(tài)框的隱藏 */
    submitBtn.onclick=()=>{
        $("#myModal").modal("hide")
    }
</script>

總結(jié)：

在使用下拉菜單之前必須上面3個(gè)文件（bootstrap的css文件、jquery的js文件、bootstrap的js文件）都引入
模態(tài)框整體應(yīng)放到一個(gè)div塊內(nèi)，用model類將此塊識別為模態(tài)框，用fade類來添加模態(tài)框的淡入，淡出效果
通過事件調(diào)用$('#identifier').modal(options)函數(shù)（show、hide）來顯示隱藏模態(tài)框
?data-toggle="modal"用于打開模態(tài)框窗口，data-dismiss="modal"屬性用于關(guān)閉模態(tài)框窗口

到了這里，關(guān)于BootStrap基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

BootStrap框架

BootStrap特點(diǎn)

bootstrap的使用

布局容器

固定寬度

完整寬度

柵格網(wǎng)格系統(tǒng)

前言

列的形式

列組合和列偏移?

列排序

列嵌套

排版

標(biāo)題

段落

強(qiáng)調(diào)

對齊效果

列表

去點(diǎn)列表

內(nèi)聯(lián)列表

定義列表

代碼

表格

表單標(biāo)簽

文本框和文本域?

單選框和復(fù)選框

復(fù)選框

單選框

按鈕

設(shè)置按鈕大小

設(shè)置按鈕禁用

表單布局

前言

水平表單

內(nèi)聯(lián)表單

縮略圖

面板

bootstrap插件

導(dǎo)航插件

導(dǎo)航欄的分類（加在ul內(nèi)）

導(dǎo)航欄中的導(dǎo)航狀態(tài)（加在li內(nèi)）

標(biāo)簽式導(dǎo)航?

膠囊型導(dǎo)航?

垂直型導(dǎo)航?

兩端對齊導(dǎo)航?

面包屑導(dǎo)航?

分頁導(dǎo)航

頁碼導(dǎo)航

翻頁導(dǎo)航

下拉菜單

注意：

模態(tài)框

模態(tài)框的使用

通過data屬性使用模態(tài)框

通過js使用模態(tài)框?

總結(jié)：

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)