功能強(qiáng)大的Bootstrap組件（結(jié)合js）

更新時間：2016年08月03日 09:41:39 作者：qq_32198277

這篇文章主要介紹了功能強(qiáng)大的Bootstrap組件，介紹js結(jié)合Bootstrap組件的使用方法，感興趣的小伙伴們可以參考一下

上兩篇只講了組件如何使用，基本沒有說js，這篇博客要結(jié)合js來講講
主要講解一下幾個組件

1.模態(tài)框
2.滾動監(jiān)聽
3.標(biāo)簽頁
4.工具提示
5.彈出框
6.按鈕
7.堆疊
8.輪換頁
9.側(cè)邊欄

首先導(dǎo)入css和js

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" >
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>

1.模態(tài)框

我們通常在登錄注冊，或者閱讀某些條例時都是用這個模態(tài)框，所以模態(tài)框是非常常見的

首先寫一個打開模態(tài)框的按鈕

<!--data-target是我們的模態(tài)框的id，data-whatever="@ime"是我們傳入模態(tài)框的標(biāo)簽和值-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-whatever="@ime">
  打開模態(tài)框
</button>

然后寫模態(tài)框

<div class="modal " id="myModal" role="dialog" aria-label="myModalLabel" aria-hidden="true">
  <!--這是小模態(tài)框，將modal-sm換成modal-lg是大模態(tài)框-->
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!--模態(tài)框頭部-->
      <div class="modal-header">
        <!--右上角的關(guān)閉按鈕-->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <!--標(biāo)題-->
        <div class="modal-title">Modal title</div>
      </div>
      <!--模態(tài)框內(nèi)容-->
      <div class="modal-body">
        <!--模態(tài)框內(nèi)容可以是文字或表格-->
        <!--<p>hello</p>-->
        <form>
          <div class="form-group">
            <label class="control-label">username</label>
            <input class="form-control" type="text">
          </div>
          <div class="form-group">
            <label class="control-label">password</label>
            <input class="form-control" type="password">
          </div>
        </form>
      </div>
      <!--模態(tài)框腳部-->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          保存
        </button>
      </div>
    </div>
  </div>
</div>

如果是點(diǎn)擊按鈕然后向模態(tài)框的表格傳入?yún)?shù)的話
在按鈕的屬性要加data-標(biāo)簽：值
以上面data-whatever=”@ime”為例加了一個標(biāo)簽為whatever，值為@ime的參數(shù)
下面是js操作

//  綁定模態(tài)框展示的方法
  $("#myModal").on("show.bs.modal",function(e){
//    獲得點(diǎn)擊打開的按鈕
    var button=$(e.relatedTarget)
//    根據(jù)標(biāo)簽獲得按鈕傳入的參數(shù)
    var recipient=button.data("whatever")
//    獲得模態(tài)框本身
    var modal=$(this)
//    更改將title的text
    modal.find(".modal-title").text("Hello"+recipient);
//    更改body里input的值
    modal.find(".modal-body input").val(recipient)
  })

2.滾動監(jiān)聽

滑動到不同內(nèi)容，標(biāo)簽頁選中會變化
首先寫body屬性

<body data-spy="scroll" data-target=".navbar" data-offset="70">

然后寫標(biāo)簽頁

<!--標(biāo)簽欄固定的顯示內(nèi)容的頂部-->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">
          <ul class="nav navbar-nav">
            <!--a標(biāo)簽中的連接是下面標(biāo)題的id-->
            <li><a href="#iwen">iwen</a> </li>
            <li><a href="#ime">ime</a> </li>
            <!--在標(biāo)簽頁中嵌套下拉菜單-->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                下拉菜單
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#one" tabindex="-1">one</a> </li>
                <li><a href="#two" tabindex="-1">two</a> </li>
                <li><a href="#three" tabindex="-1">three</a> </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

然后寫內(nèi)容

<h2 id="iwen">@iwen</h2>
<p>這是一個人 這是一個人</p>
<h2 id="ime">@ime</h2>
<p>這是一個人 這是一個人</p>
<h2 id="one">@one</h2>
<p>這是一個人 這是一個人</p>
<h2 id="two">@two</h2>
<p>這是一個人 這是一個人</p>
<h2 id="three">@three</h2>
<p>這是一個人 這是一個人</p>

建議把內(nèi)容寫得長一點(diǎn)，這樣效果才會更加明顯，這里演示不方便寫太多無用的文字

還可以寫一些js的方法

// 綁定標(biāo)簽切換時的方法
  $("#myScrollspy").on("activate.bs.scrollspy",function(e){
    alert("hello");
  })

3.標(biāo)簽頁

點(diǎn)擊不同的標(biāo)簽可以顯示不同的內(nèi)容

首先寫標(biāo)簽欄

<ul id="myTab" class="nav nav-tabs">
    <!--a標(biāo)簽鏈接對應(yīng)下面tab-pane的id-->
    <li ><a href="#home" data-toggle="tab">Home</a> </li>
    <li><a href="#profile" data-toggle="tab">Profile</a> </li>
    <li class="dropdown">
      <a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">
        下拉菜單
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
        <!--與普通下拉菜單不同，要加data-toggle="tab"-->
        <li><a href="#one" tabindex="-1" data-toggle="tab">one</a> </li>
        <li><a href="#two" tabindex="-1" data-toggle="tab">two</a> </li>
      </ul>
    </li>
  </ul>

然后寫不同標(biāo)簽的內(nèi)容

 <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade" id="home">
      <p>home</p>
    <div class="tab-pane fade" id="profile">
      <p>profile</p>
    <div class="tab-pane fade" id="one">
      <p>one</p>
    <div class="tab-pane fade" id="two">
      <p>two</p>

可以用js初始化顯示的標(biāo)簽頁
有下面幾種選擇標(biāo)簽頁的方式

$('#myTabs a[href="#profile"]').tab('show') // 根據(jù)名字選擇
$('#myTabs a:first').tab('show') // 選擇第一個標(biāo)簽頁
$('#myTabs a:last').tab('show') // 選擇最后一個標(biāo)簽頁
$('#myTabs li:eq(2) a').tab('show') // 選擇第三個標(biāo)簽頁（因?yàn)?是第一個），如果是下拉菜單里的標(biāo)簽頁，數(shù)字要加1

4.工具提示

<p>
    <!--若title內(nèi)容為空則顯示data-original-title的內(nèi)容，placement為顯示的位置，可設(shè)為top|bottom|left|right-->
    <!--參數(shù)可以以data-****的方式設(shè)置-->
    歡迎來到<a data-animation="false" id="myTooltip" href="#" data-toggle="tooltip" title="title"
        data-placement="bottom" data-original-title="www.jk.com">jack's page</a>
  </p>

然后要用js初始化，否則會沒有任何效果

//初始化tooltip，指向則顯示
$('[data-toggle="tooltip"]').tooltip();

5.彈出框
彈出框類似工具提示，但顯示的內(nèi)容比工具提示更加豐富，也比它常用

<!--data-trigger="foucus"點(diǎn)擊空白可消失，不加的話點(diǎn)擊按鈕消失，設(shè)為hover的話鼠標(biāo)移動的按鈕顯示，移開消失-->
  <!--這個彈出框標(biāo)題為title，內(nèi)容為content-->
  <button  type="button" class="btn btn-default js-popover" data-trigger="foucus" data-placement="bottom" data-toggle="popover" title="title" data-content="content">
    彈出框
  </button>

然后要用js初始化

// 初始化popover
$(".js-popover").popover();

6.按鈕

前2篇講的是按鈕的基本樣式，這次是進(jìn)階使用，可以讓按鈕在加載時顯示不同的文字

 <!--可以設(shè)置按鈕在loading時的文字-->
  <button type="button" data-loading-text="Loding for 3s" class="btn btn-primary js-loading-btn">
    Loading Status
  </button>

然后要用js綁定點(diǎn)擊事件

//  綁定按鈕的點(diǎn)擊事件
  $(".js-loading-btn").on("click", function (e) {
//    點(diǎn)擊后設(shè)為loading狀態(tài)，顯示loading的文字
    var btn = $(this).button("loading");
//    3s后恢復(fù)
    setTimeout(function (e) {
      btn.button("reset")
    }, 3000)
  })

7.堆疊

堆疊效果可以節(jié)省大量的屏幕控件，非常實(shí)用

這是點(diǎn)擊按鈕打開堆疊的

<!--href為顯示內(nèi)容的id-->
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">點(diǎn)擊查看</a>
  <div class="collapse" id="collapseExample">
    <div class="well">
      Hello
    </div>
  </div>

這是面板組的堆疊

<div class="panel-group" id="accordion" role="tablist">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <!--顯示的標(biāo)題-->
        <h4 class="panel-title">
          <!--data-parent要是panel-group的id-->
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>
        </h4>
      </div>
      <!--加了in表示打開，不加表示隱藏-->
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
        <div class="panel-body">
          Hello<br>
          Hello<br>
          Hello<br>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item1</a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          Hello<br>
          Hello<br>
          Hello<br>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item1</a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
        <div class="panel-body">
          Hello<br>
          Hello<br>
          Hello<br>
        </div>
      </div>
    </div>
  </div>

8.輪換頁

我們經(jīng)常可以在網(wǎng)站的主頁可以看到

<div id="carousel-example-generic" class="carousel slide">
    <!--這是下面那三個白色圓indicator-->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!--輪換頁的內(nèi)容-->
    <div class="carousel-inner">
      <div class="item active">
        <img src="images/4.jpg">
        <!--添加文字-->
        <div class="carousel-caption">
          <h3>U3D</h3>
          <p>新版本升級</p>
        </div>
      </div>
      <div class="item ">
        <img src="images/2.jpg">
        <div class="carousel-caption">
          <h3>U3D</h3>
          <p>新品上線</p>
        </div>
      </div>
      <div class="item ">
        <img src="images/3.jpg">
        <div class="carousel-caption">
          <h3>Apple</h3>
          <p>Apple手表</p>
        </div>
      </div>
    </div>
    <!--輪換頁左邊和右邊的箭頭-->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prew">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>

可以用js設(shè)置間隔和自動開始

  //設(shè)置間隔為2s且自動輪播
  $(".carousel").carousel({
    interval:2000
  })

9.側(cè)邊欄

側(cè)邊欄的主要內(nèi)容是一個列表

<!--要設(shè)置寬度，在手機(jī)屏幕上隱藏-->
  <div class="col-md-3 col-sm-4 hidden-xs">
    <ul class="list-group affixed-element-top js-affixed-element-top">
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
      <a href="#" class="list-group-item">hello</a>
    </ul>
  </div>

再寫style

  <style>
    .affixed-element-top.affix{
      /*如果想在底部的話可以改為bottom:10px;*/
      top:10px;
    }
    .affixed-element-top.affix-bottom{
      position: relative;
    }
  </style>

還要加一些js

 $(".js-affixed-element-top").affix({
    offset:{

    }
  })

Boostrap的基本用法就這樣，掌握后就可以做出很好的網(wǎng)頁了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

功能強(qiáng)大的Bootstrap組件（結(jié)合js）

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具