BootStrap学习笔记之BootStrap常用组件介绍

本篇文章就给大家带来BootStrap学习笔记之BootStrap常用组件介绍。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问：bootstrap教程！

1、图标：

    <h3>图标</h3>   
    <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、按钮：

    <h3>按钮</h3>
    <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、按钮尺寸：

    <h3>按钮尺寸</h3>
    <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、把图标显示在按钮里：

    <h3>把图标显示在按钮里</h3>
    <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、输入框：

    <h3>输入框</h3>
    <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、导航栏：

    <h3>导航栏</h3>
    <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、表单：

    <h3>表单</h3>
    <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、警告框：

    <h3>警告框</h3>
    <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、进度条：

    <h3>进度条</h3>
    <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>

这第一行是要跟第二行在一个水平线上的，所以第一行不能用<h1>之类的，因为这种元素自带换行功能。

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
        });

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。