Bootstrap基础入门(第二篇)

偏执的太偏执、 2022-05-30 11:26 497阅读 0赞

# Bootstrap基础入门(二) #

**一、Bootstrap预定义样式风格**

1.  概念：在一些标签或者组件中用来描述状态的class类
2.  常见的预定义样式风格类

*  primary(首选项)
 *  success(成功)
 *  info(一般信息)
 *  wraning(警告)
 *  danger(危险)

3.常用预定义样式风格类的标签或组件

*  "\*"：代表primary，success,info,wraning,danger
 *  按钮样式：btn-\*

![20180311185550741][]

*  背景样式：bg-\*

![20180311185704970][]

*  文字样式：text-\*

![20180311185819842][]

*  警告框样式：alert-\*

说明：警告框没有默认类，只有基类和修饰类，目前提供了成功，消息，警告，危险  
![20180311190124632][]

*  面板样式：panel-\*

说明：面板组件中可以设置面板标题 panel-heading和面板主题部分panel-body

![20180311190652270][]

**二、Bootstrap按钮**

1.  基类：btn
2.  样式：

*  btn-default    默认按钮，带边框
 *  btn-\*             预定义样式类
 *  btn-link          链接样式按钮

3.按钮大小

*  btn-\[lg/sm/xs\]
 *  说明：默认大小为md

4.状态

*  active:当前选择状态(移入的时候颜色更深)
 *  disabled:禁用状态

5.按钮的种类

*  a
 *  button
 *  input

![20180311191318641][]

6.按钮的块级

*  根据父级的宽度自适应
 *  btn-block

7.按钮组

*  btn-group:给需要组合的按钮添加一个父级，给该父级添加类名btn-group
 *  样式

①自适应按钮组：btn-group-justified

说明：会根据父容器的宽度自适应

// a标签形式的按钮
        <div class="btn-group btn-group-justified">
            <a class="btn btn-primary ">首选按钮</a>
            <a class="btn btn-primary ">首选按钮</a>
            <a class="btn btn-primary ">首选按钮</a>
        </div>

//input标签形式
     <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <input type="button" value="警告" class="btn btn-warning ">
            </div>
            <div class="btn-group">
                <input type="button" value="警告" class="btn btn-success ">
            </div>
        </div>

注意：a标签形式的按钮可以直接在父级添加btn-group-justified即可实现自适应按钮效果

button标签和input标签形式的按钮想要实现自适应还需要给每个按钮标签添加类名为btn-group的父级

②btn-group-vertical：纵向按钮组

//纵向按钮组 
    <div class="btn-group-vertical">
            <button class="btn btn-success ">首选按钮</button>
            <button class="btn btn-success ">首选按钮</button>
            <button class="btn btn-success ">首选按钮</button>
        </div>

注意：要实现纵向按钮组只需要添加btn-group-vertical类名，一般不和btn-group配合使用

*  按钮组的大小设置

btn-group-\[lg/sm/xs\]

8.添加小按钮

![20180311202734186][]

*  添加方法：在文字后面添加一个span标签，添加类名caret
 *  注意：input形式的按钮不适合添加小三角
 *  说明：也可以使用组的形式添加小三角实现下图样式

![20180311203017216][]

//按钮组的方法
    <div class="btn-group">
            <button class="btn btn-primary">按钮</button>
            <button class="btn btn-primary"><span class="caret"></span></button>
    </div>

*  在父级设置dropup就可以实现向上的小三角，dropdown表示向下(默认形式)

//小三角向上
     <div class="btn-group dropup">
            <button class="btn btn-primary">小三角向上</button>
            <button class="btn btn-primary"><span class="caret"></span></button>
    </div>

**三、Bootstrap下拉菜单**

1.  定义：用于显示链接列表的可切换，有上下文的菜单
2.  bootstrap下面的一些自定义属性的含义

*  data-\*:bootstrap下面js触发器的一种写法，也就是说data-\*这类属性是操作js交互的
 *  aria-\*类和role类：一般是为不方便的人士提供的服务，借助一些工具比如屏幕阅读器类读取页面的内容
 *  aria-\*:一般行为
 *  role:当前的状态

3.使用方法：

*  dropdown：触发器和下拉菜单的容器
 *  dropdown-toggle:触发器实现下拉菜单的类名
 *  dropdown-menu:下拉菜单
 *  要实现交互功能要添加自定义属性  data-toggle="dropdown"

4.其他类

*  open:默认下拉菜单总是打开状态
 *  dropdown-menu-right:下拉菜单靠右显示
 *  dropdown-header:下拉菜单中添加标题
 *  divider:下拉菜单中的分割线
 *  disabled:下拉菜单中的禁用项
 *  dropup:指定向上弹出的下拉列表框
 *  text-center:文字居中显示

例： 
     <div class="dropdown">
           <button class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单
               <span class="caret"></span>
           </button>
            <ul class="dropdown-menu btn-block">
                <li class="dropdown-header">数字</li>
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
                <li>4444</li>
                <li class="divider"></li>
                <li class="dropdown-header">字母</li>
                <li>aaaa</li>
                <li>bbbb</li>
                <li>cccc</li>
                <li>dddd</li>
                <li class="disabled">
                    <a href="javascript:" >禁用的</a>
                </li>
           </ul>
       </div>

就到这了，拜拜~~~(下篇还会继续分享Bootstrap基础入门（第三篇）)

[20180311185550741]: /images/20220530/b38d97435b3e4c75921317c478e62077.png
[20180311185704970]: /images/20220530/b4513a889e30432cbaeac24502978907.png
[20180311185819842]: /images/20220530/d152f316ade54c4bb93eeb4a46c2c664.png
[20180311190124632]: /images/20220530/24848bd092194b85a9c7ca0f56fe44c4.png
[20180311190652270]: /images/20220530/c74591967d0649b5a3b427a88cb19998.png
[20180311191318641]: /images/20220530/6b777865452f442295092553a3e5945d.png
[20180311202734186]: /images/20220530/b94a03fe37e64538a1b55f30f7ab04ea.png
[20180311203017216]: /images/20220530/859cc109e9d44e82b5935a18cb4b7b2d.png