Bootstrap组件

一、字体图标组件的使用

运行结果：

 

 二、下拉菜单组件

1）基本下拉菜单

<div>

        <div class="dropdown">

            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

              Dropdown  <span class="glyphicon glyphicon-apple"></span>

              <span class="caret"></span>

            </button>

            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

                <li><a href="#">Action</a></li>

                <li><a href="#">Another action</a></li>

                <li><a href="#">Something else here</a></li>

                <li role="separator" class="divider"></li>

                <li><a href="#">Separated link</a></li>

            </ul>

        </div>

    </div>

运行结果：

 2）按钮式下拉菜单

运行结果：

三、输入框组件

 

运行结果：

 四、导航组件

1. 选项卡导航
2. 胶囊式导航
3. 自适应导航
4. 下拉菜单导航

 运行结果：

 1）选项卡导航

运行结果：

 2)胶囊式导航

 运行结果：

3） 自适应导航

 

 运行结果：

4）下拉菜单导航 

运行结果：

五、导航条组件 

  <!--导航条-->

    <nav class="navbar navbar-default">

        <div class="container-fluid">

            <!-- Brand and toggle get grouped for better mobile display -->

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

            </button>

                <a class="navbar-brand" href="#">Brand</a>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

                    <li><a href="#">Link</a></li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

                        <ul class="dropdown-menu">

                            <li><a href="#">Action</a></li>

                            <li><a href="#">Another action</a></li>

                            <li><a href="#">Something else here</a></li>

                            <li role="separator" class="divider"></li>

                            <li><a href="#">Separated link</a></li>

                            <li role="separator" class="divider"></li>

                            <li><a href="#">One more separated link</a></li>

                        </ul>

                    </li>

                </ul>

                <form class="navbar-form navbar-left">

                    <div class="form-group">

                        <input type="text" class="form-control" placeholder="Search">

                    </div>

                    <button type="submit" class="btn btn-default">Submit</button>

                </form>

                <ul class="nav navbar-nav navbar-right">

                    <li><a href="#">Link</a></li>

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

                        <ul class="dropdown-menu">

                            <li><a href="#">Action</a></li>

                            <li><a href="#">Another action</a></li>

                            <li><a href="#">Something else here</a></li>

                            <li role="separator" class="divider"></li>

                            <li><a href="#">Separated link</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

            <!-- /.navbar-collapse -->

        </div>

        <!-- /.container-fluid -->

    </nav>

运行结果：

 如果需要别的组件，可以在浏览器搜索bootstrap官网 然后点击组件，例如：

打开组件之后里边各种组件，可以在右侧导航栏里看，点击你所需要的

以及顶部的这些都可以点击查看，找到你所需要的

分享就到这里啦!!! 下期再见~