BootStrap常用組件有哪些

小編給大家分享一下BootStrap常用組件有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、圖標：

    <h4>圖標</h4>   
    <span class="glyphicon glyphicon-home"></span>
    <span class="glyphicon glyphicon-signal"></span>
    <span class="glyphicon glyphicon-cog"></span>
    <span class="glyphicon glyphicon-apple"></span>
    <span class="glyphicon glyphicon-trash"></span>
    <span class="glyphicon glyphicon-play-circle"></span>
    <span class="glyphicon glyphicon-headphones"></span>

2、按鈕：

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

3、按鈕尺寸：

    <h4>按鈕尺寸</h4>
    <button type="button" class="btn btn-default">按鈕</button>
    <button type="button" class="btn btn-primary btn-lg">primary</button>
    <button type="button" class="btn btn-success btn-sm">success</button>
    <button type="button" class="btn btn-info btn-xs">info</button>

4、把圖標顯示在按鈕里：

    <h4>把圖標顯示在按鈕里</h4>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>  按鈕</button>

5、下拉菜單：

<p class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <span id="dropdown-title">菜單一</span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#" class="dropdown-item">菜單一</a></li>
            <li><a href="#" class="dropdown-item">菜單二</a></li>
            <li><a href="#" class="dropdown-item">菜單三</a></li>
        </ul>
    </p>

交互：監聽每個菜單的點擊事件，點擊之后在title顯示當前菜單

        $('.dropdown-item').click(function () {
            $('#dropdown-title').text($(this).text());
        });

6、輸入框：

    <h4>輸入框</h4>
    <p class="input-group">
      <span class="glyphicon glyphicon-user"></span>
      <input type="text" placeholder="username">
    </p>

    <p class="input-group">
      <span class="glyphicon glyphicon-lock"></span>
      <input type="password" placeholder="password">
    </p>

7、導航欄：

    <h4>導航欄</h4>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <p id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="pider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </p><!--/.nav-collapse -->
      </p>
    </nav>

8、表單：

    <h4>表單</h4>
    <form>
    <p class="form-group">
      <span class="glyphicon glyphicon-user"></span>
      <input type="email" id="exampleInputEmail1" placeholder="Enter email">
    </p>
    <p class="form-group">
      <span class="glyphicon glyphicon-lock"></span>
      <input type="password" id="exampleInputPassword1" placeholder="Password">
    </p>
    <p class="form-group">
      <label for="exampleInputFile">File input</label>
      <input type="file" id="exampleInputFile">
      <p class="help-block">Example block-level help text here.</p>
    </p>
    <p class="checkbox">
      <label>
        <input type="checkbox"> Check me out
      </label>
    </p>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

9、警告框：

    <h4>警告框</h4>
    <p class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </p>
    <p class="alert alert-success" role="alert">
        <a href="#" class="alert-link">success!</a>
    </p>
    <p class="alert alert-info" role="alert">
        <a href="#" class="alert-link">info!</a>
    </p>
    <p class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">warning!</a>
    </p>
    <p class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">danger!</a>
    </p>

10、進度條：

    <h4>進度條</h4>
    <p class="progress">
      <p class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        70%
      </p>
    </p>

11、靠右排列

一般我們是用float:right來實現向右浮動的功能的，但是這里面右涉及了清除浮動、調整右邊的margin、上下的margin等等問題，在bootstrap當然要用他的方法，只要添加一個class：pull-right就可以解決：

<span style="font-size: 30px;">item1</span>
<p class="pull-right">item2</p>

這第一行是要跟第二行在一個水平線上的，所以第一行不能用<h2>之類的，因為這種元素自帶換行功能。

12、tab的使用

tab可以方便的在一個頁面里面切換顯示的內容，bootstrap的tab使用非常簡單：

    <ul id="myTab" class="nav nav-tabs">
        <li role="presentation" class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
        <li role="presentation"><a href="#tab2" data-toggle="tab">tab2</a></li>
        <li role="presentation"><a href="#tab3" data-toggle="tab">tab3</a></li>
    </ul>
    <span>這是寶貝管理頁面</span>
    <p id="myTabContent" class="tab-content">
        <p id="tab1" class="tab-pane active">
            <p>這是tab1</p>
        </p>
        <p id="tab2" class="tab-pane">
            <p>這是tab2</p>
        </p>
        <p id="tab3" class="tab-pane">
            <p>這是tab3</p>
        </p>
    </p>

在js可以方便的捕捉tab的切換，并做出相應的改變，比如當第二個頁面是加載一些數據，那么我等到切換到第二個頁面我再去加載：

        $('a[data-toggle="tab"]').on('shown.bs.tab',function (e) {
            var activeTab = $(e.target).text();
            alert(activeTab);
        });

13、bootstrap-table

一個可以通過ajax請求json數據并生成表格的插件

項目地址：

https://github.com/wenzhixin/bootstrap-table

14、通知消息組件

<1>下載地址：

https://github.com/CodeSeven/toastr

<2>文檔：

http://www.ithao123.cn/content-2414918.html

<3>引入：

在下載的文件里找到build文件夾，引入里面的toastr.min.js和toastr.css

<4>使用：

此提示消息默認是顯示在瀏覽器的右上角，我們可以在初始化里面改為頂部居中顯示：

        toastr.options.positionClass = 'toast-top-center';//顯示位置

位置顯示的設定有如下選項：

toast-top-right
toast-botton-right
toash-bottom-left
toast-top-left
toast-top-full-width 這個是在網頁頂端，寬度鋪滿整個屏幕
toast-bottom-full-width
toast-top-center頂端中間
toast-bottom-center

然后在我們需要顯示的時候這樣調用就行了：

toastr.success('提交數據成功');
toastr.error('Error');
toastr.warning('只能選擇一行進行編輯');
toastr.info('info');

15、ajax請求

按鈕：

                <button class="btn btn-link">
                    換個密碼
                </button>

js：

    $('.btn').on('click',function () {
        $.post('xxx')
            .done(function (result) {
                var json = ajaxResultShow(result);
                if (json.result_code == 0)
                    $('#pwdId').text(json.data1);
            })
            .fail(function () {
            })
            .always(function () {
            });
    });

16、bootstrap-switch

（1）此組件不屬于bootstrap，他需要單獨引入bootstrap-switch.min.js和bootstrap-switch.min.css；

（2）下載地址：http://www.bootcss.com/p/bootstrap-switch/

（3）使用方法：

添加框架：

<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-switch.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-switch.js"></script>

在html中添加組件：

    <input type="checkbox" name="my-checkbox" checked>

在js中初始化：

        $("[name='my-checkbox']").bootstrapSwitch();

可以在初始化中直接對狀態進行設定：

    $("#isOpenCheckbox").bootstrapSwitch('state',false);

切換狀態：

    $('#isOpenCheckbox').bootstrapSwitch('toggleState');

監聽切換事件：

   $('#isOpenCheckbox').on('switchChange.bootstrapSwitch', function (event,state) {
            alert(state);// true || false
        });

以上是“BootStrap常用組件有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！