BootStrap框架常用語法

文檔結(jié)構(gòu)

  • 需要使用HTML5文檔結(jié)構(gòu) <!DocType html>
  • 移動(dòng)設(shè)備優(yōu)先 需要在頭部增加<meta>標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,initial-scale=1.0"/>
  • 引入BootStrap

    • 引入css，當(dāng)有自己的css文檔，應(yīng)引入bootstrap.css后再引入自己編寫額css文件

    • 引入jQuery.js再引入bootstrap.js

    • 若要兼容IE瀏覽器，再引入兩個(gè)js文件，使用IE的條件注釋

        <!--[if lt IE 9]><script>...</script><script>...</script><![endif]-->  
  [兩個(gè)js文件自己google]

bootstrap表單樣式

    創(chuàng)建表單步驟：
    1.創(chuàng)建form標(biāo)簽并添加role="form"(語義化，給瀏覽器和搜索引擎看)
    2.控制分組，把標(biāo)簽和控件放在一個(gè)class為formgroup的div中
    3.給表單控件(input,textarea,select)添加類名form-control

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

  • 給form添加類名form-inline

水平表單

  • 給form添加類名form-horizontal
  • 給標(biāo)簽label添加類名control-label
  • 配合bootstrap網(wǎng)格系統(tǒng)加入類名col-sm-1

其它表單控件

  • form-control-static：靜態(tài)表單控件，添加標(biāo)簽和類名，不必用input特定標(biāo)簽

  • help-block：表單提示，添加標(biāo)簽和類名（同上）

  • 提示圖標(biāo)：glyphicon glyphicon-ok（參照API文檔） form-control-feedback

  • 按鈕：在使用其它類名前均加上基礎(chǔ)類名btn

      基礎(chǔ)類名：btn
  默認(rèn)按鈕樣式：btn-default
  原始按鈕樣式：btn-primary
  成功按鈕樣式：btn-success
  鏈接式按鈕：btn-link
  -----------------------
  設(shè)置按鈕大小
  超大：btn-lg
  默認(rèn)大?。篵tn-md
  小號(hào)：btn-xs
  btn-block：塊級(jí)按鈕，寬度取決于它父級(jí)的寬度的100%
  -----------------------
  設(shè)置按鈕狀態(tài)
  激活：active
  禁用：disable

bootstrap圖片樣式

響應(yīng)式圖片

  • img-responsive（max-width:100%）

圓角圖片

  • img-rounded
  • img-circle 圓形

縮略圖

  • img-thumbnail：添加一個(gè)內(nèi)邊距padding和邊框

bootstrap輔助類

  • 左浮動(dòng)：pull-left
  • 右浮動(dòng)：pull-right
  • 塊級(jí)并居中：center-block 需要設(shè)置寬度，不能設(shè)浮動(dòng)
  • 強(qiáng)制元素顯示/隱藏：show/hide
  • 隱藏文字：text-hide

bootstrap表格樣式

  • 基礎(chǔ)類名：table

      table-striped：斑馬線表格
  table-bordered：帶邊框表格（給td加邊框）
  table-hover：鼠標(biāo)懸停高亮效果
  table-condensed：緊湊型表格（減少單元格padding值）
  table-responsive：響應(yīng)式表格

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

原理

  • 將容器平分為12份（12列）
    結(jié)合媒體查詢做出響應(yīng)式布局效果

用法

  • 定義一個(gè).row的容器作為行
    定義一個(gè).col的容器作為列
    只有col才能作為row的直接子元素

                  屏幕   屏幕尺寸
  .col-lg-*   超大   >1200px
  .col-md-*   中屏   >992px
  .col-sm-*   小屏   >768px 
  .col-xs-*   超小   <768px
  
  *代表1~12，每一個(gè)所占空間大小

列偏移&列排序

  • 列偏移：不希望兩列靠在一起，使用類名.col-*-offset-*
  • 列排序：設(shè)置網(wǎng)格的排列順序

    • .col-*-push-* 往右排

    • .col-*-pull-* 往左排

        通俗點(diǎn)就是往左移動(dòng)和往右移動(dòng)幾個(gè)網(wǎng)格空間大小

bootstrap下拉菜單

  • 創(chuàng)建一個(gè)類名為dropdown的div容器，用它來包裹整個(gè)下拉菜單

  • 在dropdown容器內(nèi)添加一個(gè)按鈕button，作為父菜單

      定義類名為dropdown-toggle和自定義屬性data-toggle="dropdown"

  • 添加按鈕里的小三角

      button添加類名為caret的span標(biāo)簽

  • 創(chuàng)建下拉菜單

      添加一個(gè)ul無序列表，定義類名為dropdown-menu

  • 菜單分割線

      添加一個(gè)空列表項(xiàng)li，類名為divider

bootstrap按鈕組

    將幾個(gè)按鈕放入一個(gè)類名為btn-group的div中
    btn-group-vertical ? 垂直按鈕組
    按鈕組大 ? 給組別加類名btn-group-lg|md|sm|xs

  • 嵌套按鈕組

      在按鈕組里面嵌套下拉列表
    • 在btn-group里面嵌套一個(gè)btn-group，將下拉菜單的父菜單按鈕放置在嵌套的btn-group里
    • 給父菜單按鈕添加類名dropdown-toggle和自定義屬性data-toggle="dropdown"
    • 增加小三角圖標(biāo)<span class='caret'></span>

bootstrap導(dǎo)航

  • 添加無序列表，用來作為導(dǎo)航

  • 給列表添加類名 .nav ? 基礎(chǔ)類名

      nav-tabs ? 表格式導(dǎo)航
  nav-pills ? 鼓囊式導(dǎo)航

  • 給導(dǎo)航菜單項(xiàng)添加樣式

      active ? 當(dāng)前選中項(xiàng)
  disabled ? 禁用狀態(tài)

    ? 垂直式導(dǎo)航：給導(dǎo)航添加類名nav-stacked
    一般用于鼓囊式導(dǎo)航

    ? 導(dǎo)航二級(jí)菜單：在導(dǎo)航里添加下拉列表
    1. 給父級(jí)菜單添加類名dropdown
    2. 在此列表項(xiàng)里添加一個(gè)二級(jí)菜單列表項(xiàng) .dropdown-menu
    3. 給此列表里面的a標(biāo)簽添加類名dropdown-toggle和自定義屬性data-toggle="dropdown"

    ? tab標(biāo)簽頁導(dǎo)航（選項(xiàng)卡功能）
    1. 添加一個(gè)表格式導(dǎo)航
    2. 給導(dǎo)航里面的a標(biāo)簽添加屬性data-toggle="tab"的錨點(diǎn)鏈接地址
    3. 添加一個(gè)tab-content的div，在里面包含每一個(gè)要切換的tab標(biāo)簽頁
    4. 給每一個(gè)標(biāo)簽頁添加類名tab-pane和fade
    5. 默認(rèn)顯示項(xiàng)
    - 給導(dǎo)航列表項(xiàng)添加類名active
    - 給默認(rèn)顯示標(biāo)簽頁添加類名active和in

    ? 導(dǎo)航條
    導(dǎo)航條頭部里面可以放置導(dǎo)航，表單等
    1. 添加類名為navbar的div，用來制作導(dǎo)航條
    navbar-default ? 默認(rèn)
    navbar-inverse ? 反色
    2. 在navbar里面添加頁面標(biāo)題
    添加一個(gè)類名為navbar-head的div，包含navbar-brand的a標(biāo)簽
    3. 在navbar里添加導(dǎo)航
    在普通導(dǎo)航基礎(chǔ)上添加類名navbar-nav
    4. 導(dǎo)航里添加表單（搜索框）
    添加類名navbar-form
    PS：將搜索框和按鈕用類名為input-group的div包起來，將搜索按鈕放入類名為input-group-btn的span中，可實(shí)現(xiàn)搜索框和按鈕連在一起的視覺效果
    5. 導(dǎo)航條里的浮動(dòng)
    navbar-left ? 左浮動(dòng)
    navbar-right ? 右浮動(dòng)
    6. 導(dǎo)航條里面單獨(dú)的按鈕和鏈接
    按鈕 ? navbar-btn
    鏈接 ? navbar-link和navbar-text
    普通文字 ? navbar-text
    7. 固定導(dǎo)航條
    navbar-fixed-top|navbar-fixed-bottom

    ? 響應(yīng)式導(dǎo)航條
    1. 將nav導(dǎo)航用一個(gè)類名為collapse和navbar-collapse的div包起來
    2. 在navbar-header里添加類名為navbar-toggle和自定義屬性為data-toggle="collapse"與data-target="#myNav（自己取名）"的按鈕，在按標(biāo)簽里再加入漢堡按鈕
    漢堡按鈕：三個(gè)span標(biāo)簽，每個(gè)類名為icon-bar

bootstrap標(biāo)簽/徽章

  • 通過span標(biāo)簽，添加類名label ? 基礎(chǔ)類名

      label-default
  label-primary
  label-success
  ...

  • 通過span標(biāo)簽，添加類名bodge

bootstrap內(nèi)置組件

縮略圖

  • 使用網(wǎng)格系統(tǒng)實(shí)現(xiàn)

警示框

若在警告框里的文字加鏈接，則會(huì)覆蓋原有警示框顏色，應(yīng)該在a標(biāo)簽里加類名alert-link
  • 給警示框加類名alert-dismissable
  • 給警示框加類名為close的button標(biāo)簽
  • 按鈕上加自定義屬性data-dismiss="alert"

進(jìn)度條

  • 外層div用來寫灰色背景，類名progress

      加類名progress-striped為條紋進(jìn)度條
  再加active類名為動(dòng)態(tài)進(jìn)度條

  • 里層div顯示進(jìn)度，類名progress-bar ? 基礎(chǔ)類名

      progress-bar-success
  ...

  • 給progress-bar加行內(nèi)樣式width=百分比

bootstrap多媒體對(duì)象

  • 加一個(gè)類名為media的div容器
  • 在media的div中加一個(gè)類名為pull-left的a標(biāo)簽
  • 在media的div中添加媒體描述，使用類名為media-body的div
  • 給媒體body中的標(biāo)題加media-heading類名
要放置多個(gè)媒體列表，則在所有列表外套一個(gè)類名為media-list的div
在media-dody中再寫入media的div則為媒體嵌套

bootstrap列表組

  • 基礎(chǔ)列表組

      給無序列表或div加類名list-group，給li列表項(xiàng)加類名list-group-item

  • 在列表組里加徽章，bodge，自動(dòng)的右浮動(dòng)

  • 自定義列表

      li添加標(biāo)題元素類名為list-group-item-heading放置標(biāo)題和h標(biāo)簽
  再加入類名為list-group-item-text的p標(biāo)簽來放內(nèi)容

bootstrap面板

基礎(chǔ)面板

  • 添加類名為panel的div容器，其中panel為基礎(chǔ)類名
  • 在panel里添加類名為panel-heading的div，在其中添加類名為panel-title的標(biāo)題h1~h6
  • 在panel里添加一個(gè)類名為panel-body的div放主內(nèi)容，表格，表單等
  • 在panel-body后添加類名為panel-footer的div，在其中添加普通文字

bootstrap插件

以下插件若通過js調(diào)用的話，均不必添加任何自定義屬性

模態(tài)彈出框

通俗點(diǎn)就是alert彈出框，只不過樣式花哨點(diǎn)

結(jié)構(gòu)分析

.modal
    .modal-dialog
        .modal-content
            .modal-header
            .modal-body
            .modal-footer

模態(tài)框默認(rèn)為隱藏狀態(tài)

觸發(fā)方式

  • 給觸發(fā)元素（按鈕）添加屬性data-toggle="modal"和data-target="#myModal（自己取名）"

  • a標(biāo)簽加href="#myModal"和data-toggle="modal"

  • js觸發(fā)

    $('#myModal').modal();

      給模態(tài)框添加動(dòng)畫效果：在modal類名上的div中再增加fade類
  當(dāng)data-backdrop="static"時(shí)，點(diǎn)擊modal之外的地方不會(huì)使其消失

  • 其他參數(shù)

      通過標(biāo)簽屬性和js參數(shù)傳遞，通過js，則去掉data-*屬性，只傳入后面的名稱$('#myModal').modal();只傳入modal括號(hào)內(nèi)就好
    • data-backdrop ? true|false ? 彈出框是否有大背景，默認(rèn)true
    • data-keyboard ? true|false ? 按下Esc鍵是否可以關(guān)閉模態(tài)框
      需要同時(shí)設(shè)置屬性tabindex="-1"

滾動(dòng)監(jiān)聽

  • 創(chuàng)建一個(gè)導(dǎo)航，添加id屬性

  • 給導(dǎo)航中的li中的a標(biāo)簽添加href值對(duì)應(yīng)到每一個(gè)模塊

  • 給body添加屬性data-spy="scroll"和data-target="#myNavbar（自己取名）"

      固定定位：在需要固定的元素加屬性data-spy="affix"和data-offset-top="數(shù)值"

提示框

  • 給需要提示的標(biāo)簽添加屬性data-toggle="tooltip"，title="提示"
  • 通過js調(diào)用提示框插件 
    tooltip();
  • 控制提示框的方向：添加屬性data-placement="top|bottom|left|right"

彈出框

  • 給需要彈出框的元素加屬性data-toggle="popover"和data-content="彈出框內(nèi)容"，title="標(biāo)題內(nèi)容"

警示框

  • 創(chuàng)建一個(gè)警示框alert
  • 在其中加入關(guān)閉按鈕
  • 用警示框外的按鈕來關(guān)閉它
    • 在外部元素添加屬性data-dismiss="alert"和data-target="#自己取名"

按鈕

  • 模擬單選按鈕

    • 在btn-group中添加data-toggle="buttons"

  • 模擬復(fù)選框

    • 同上，把input的type類型換成checkbox即可

  • 按鈕狀態(tài)切換

    • 給button添加屬性data-toggle="button"
    • 通過js調(diào)用 
      $('selector').button('toggle');

  • 加載狀態(tài)按鈕

      當(dāng)點(diǎn)擊時(shí)，按鈕狀態(tài)變?yōu)榧虞d中，文本變成data-toggle-text的內(nèi)容

    $('selector').button('toggle');
$('selector').button('reset');//寫入setTimeout函數(shù)中去

手風(fēng)琴插件使用

  • 添加一個(gè)類名為panel-group的div作為面板組的內(nèi)容
  • 在面板組里面添加面板，并且為面板定義頭部和主體內(nèi)容
  • 在panel-title里添加一個(gè)a標(biāo)簽，加屬性data-toggle="collapse"和data-parent="#面板組id"，href="#面板內(nèi)容id"
  • 將panel-body用類為panel-collapse和collapse的div包起來，并設(shè)置id
  • 給指定面板加類名in，則為默認(rèn)展開狀態(tài)

輪播圖插件使用

  • 添加類名為carousel和slide的div，作為輪播圖容器，設(shè)置id

  • 添加計(jì)數(shù)器，默認(rèn)樣式為圓點(diǎn)，可用無序列表實(shí)現(xiàn)，為其添加類名carousel-indicators，為每個(gè)li加屬性data-target="#容器id"和data-slide-to="0~n"，對(duì)應(yīng)每一張圖

  • 添加一個(gè)類名為carousel-inner的div容器，用來存放圖片，每張圖放在類名為item的div中

  • 給對(duì)應(yīng)的item項(xiàng)和對(duì)應(yīng)的圓點(diǎn)加active為默認(rèn)顯示的狀態(tài)

  • 添加兩個(gè)類名為carousel-control的a鏈接，分別加類名left|right，在其中加屬性data-slide="prev"或next，并設(shè)置href="#容器id"

  • 給carousel加data-ride="carousel"使其自動(dòng)輪播
    data-interval="毫秒數(shù)" ? 控制輪播圖自動(dòng)輪播切換間隔時(shí)間
    data-wrap="true|false" ? 是否循環(huán)輪播

      js控制輪播：
  $('selector').carousel();參數(shù)同上一條的data屬性
  $('selector).carousel('pause|prev|next');暫停|上一張|下一張
  
  輪播事件：
  $('selector').on({
      'slide.bs.carousel':function(){
          ...     切換前事件
      },
      'slid.bs.carousel':function(){
          ...     切換后事件
      }
      })
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第5章 菜單、按鈕及導(dǎo)航 一、下拉菜單 小伙伴們注意，在Bootstrap框架中的下拉菜單組件是一個(gè)獨(dú)立的組件，根...
    凜0_0閱讀 5,299評(píng)論 0贊 66
  • 第4章 Bootstrap裝飾插件 JavaScript是網(wǎng)頁上事實(shí)上的腳本語言。流行的網(wǎng)頁功能，例如：漂亮的圖片...
    海上名月閱讀 1,733評(píng)論 5贊 6
  • CSS全局樣式 概覽 移動(dòng)設(shè)備優(yōu)先 布局容器 1、container類用于固定寬度并支持響應(yīng)式布局的容器 2、co...
    VEN_64d6閱讀 1,526評(píng)論 0贊 1
  • 銳眼視點(diǎn)： Amazon AI 發(fā)布三項(xiàng)新服務(wù)，為開發(fā)者提供機(jī)器學(xué)習(xí)智慧； 虛擬助手大比拼，誰才是最終勝者； Co...
    銳眼看世界閱讀 424評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容