BootStrap（二）

阳光穿透心脏的1/2处 2022-06-07 09:38 99阅读 0赞

## BootStrap（二） ##

下面是对BootStrap一些组件的介绍

**1.**定制的字体  
常用的类是 glyphicon glyphicon-x 太多了具体的看菜鸟教程中

**2.**下拉菜单  
下单菜单的使用：首先外层定义一个div class为dropdown  
内层定义一个button button的class为dropdown-toggle 同时设置button的data-toggle=’dropdown’  
button中还可设置下拉三角箭头 `<span class='caret'/ >`  
然后 定义一个ul ul的class为dropdown-menu  
下拉菜单中的分割线 class=’divider’  
下拉菜单右对齐 class=’dropdown-menu-right’  
向上拉的菜单 class=’dropup’  
具体代码如下：

**3.**按钮组  
按钮组就是 将按钮放在一个组里面  
最外层可以放一个 class=’btn-toolbar’  
内层是一个 class=’btn-group’  
按钮组的大小 class=btn-group-大小  
按钮组垂直排列 class=’btn-group-vertical’  
按钮组中的下拉菜单 其实最外层的btn-group 就相当于div class=’dropdown’ 其他正常

**4.**输入框组  
输入框组 其实就是在input输入框的前后加一些东西 更加美观 好看  
首先 在input外层加 class=’input-group’  
在input标签前或者后 加`<span class=input-group-addon>$</span>`  
即可。  
输入框前后加按钮

输入框组中加入下拉框 也一样 input-group-btn 相当于 class=’dropdown’

**5.**导航元素  
导航元素分为标签tabs式和胶囊式pills nav-stacked 垂直排放  
nav-justified 两端对齐 nav中的下拉菜单 只需要在li中添加class为dropdown即可  
首先定义一个ul ul的class为nav nav-tabs 或者 nav nav-pills  
同时 点击页夹切换内容 可如下操作  
首先在`<li></li>`中的a标签中添加 data-toggle=’tab’或者data-toggle=’pill’  
a标签的href为 跳转的div 的id  
在ul的下方创建一个div class=’tab-content’ 用于存放点击页夹之后的内容  
在这个div中 写页夹对应的div div的class为tab-pane fade  
第一个的为tab-pane fade in active  
具体代码如下:

**6.**导航栏  
导航栏的使用如下：  
先定义一个nav标签 nav标签的class=’navbar navbar-default’  
这里也可以定义固定顶部navbar-fixed-top navbar-fixed-bottom  
颜色反转 变黑 navbar-inverse  
在第一层定义div class为container-fluid  
这层div嵌套 div class为navbar-header  
再往里嵌套一个a标签 class为navbar-brand

定义标签栏  
在下侧定义ul ul的class = ‘nav navbar-nav’ 这里同样也可以定义位置  
navbar-left navbar-right  
然后定义li a标签 同样支持下拉框  
具体代码如下：

<nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">导航栏标题</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">ios</a></li>
                    <li><a href="#">iphone</a></li>
                    <li><a href="#">ipad</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">iwatch</a></li>
                            <li><a href="#">mac</a></li>
                        </ul>
                    </li>
    
                </ul>
            </div>
        </nav>

导航栏中的表单 : 类为 navbar-form  
导航栏中的按钮：类为navbar-btn  
导航栏中的字体: 类为navbar-text

**7.**面包屑导航  
定义一个列表 主要的类 class=’breadcrumb’

**8.**分页  
定义一个列表 主要的类为pagination 还可以定义大小 pagination-lg pagination-sm  
上一页 `«` 下一页 `»`

**9.**标签和徽章  
标签的类为label label有多种提示颜色 label-primary label-default label-success label-info label-warning label-danger

徽章的类为badge

**10.**超大屏幕 ，缩略图  
超大屏幕的类为 jumbotron  
缩略图的类为thumbnail

**11.**警告框  
警告框的类为alert alert-颜色 有alert-success alert-info alert-warning alert-danger 这几种  
可关闭的警告框  
首先外层div class肯定是alert alert-颜色 再添加一个alert-dissmissable  
然后再里层添加button button的class为close，并添加属性 data-dismiss=’alert’ button中添加`×`  
具体代码如下:

<div class="alert alert-success">
            <button class="close" data-dismiss="alert">×</button>
            成功的警示框
        </div>

**12.**进度条  
进度条用到的类是progress progress-striped active progress-bar progress-bar-颜色  
使用 ：在外层定义一个div class为progress 同时可以定义是条纹状的progress-striped 动态的 active

然后在内层定义一个div class为progress-bar 定义的width 为进度条的进度 同时可已定义颜色  
具体代码：

**13.**列表组和well  
列表组用到的类有  
list-group list-group-item list-item-heading list-item-text

well 就是凹陷的一块  
class =’well’

**14**面板 我比较喜欢的  
面板用到的类是  
panel panel-default panel-颜色 panel-heading panel-title panel-body panel-footer  
具体代码如下：

<div class="panel panel-primary" style="width: 500px">
            <div class="panel-heading">
                <h3 class="panel-title">
                    面板的标题
                </h3>
            </div>
            <div class="panel-body">
                    面板的主题内容
            </div>
            <div class="panel-footer">
                    面板的底部
            </div>
        </div>