bootstrap课程5 bootstrap中的组件使用的注意事项是什么

阅读量：7124 次

发布时间：2019-06-28

本文共 1884 字，大约阅读时间需要 6 分钟。

bootstrap课程5 bootstrap中的组件使用的注意事项是什么

一、总结

一句话总结：

1、img-responsive的作用是什么（其实还是要多看手册）？

看起来像width=100%的效果，

其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center

2、如何使用字符图标？

span标签放到字之前

<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star

3、字符图标的性质是什么？

矢量图，可以任意放大，也可以任意该颜色

4、字体图标的两大好处是什么？

a、可以任意改大小

b、可以任意改颜色

5、bootstrap中组件的js触发用什么形式？

data-的形式

data-toggle="dropdown"

下面调用的是

dropdown-menu这个ul

6、bootstrap下拉菜单中的disabled禁用，有真正禁用到什么么？

只是禁用了样式，a标签还是可以点，bootstrap都是只是做了前端的样式，

<li class="disabled"><a href="#">Disabled link</a></li>

二、bootstrap中的组件使用的注意事项是什么

1、相关知识

组件:

--------------------------------------------------

glyphicons图标:

.glyphicon

.glyphicon-triangle-right

下拉菜单:

.dropdown

.dropup

.dropdown-menu

[data-toggle='dropdown']

.dropdown-menu-right

.dropdown-menu-left

.dropdown-header

.divider

.disabled

按钮组:

.btn-group

按钮组尺寸:

.btn-group-lg

.btn-group-sm

.btn-group-xs

按钮组嵌套:

.dropdown-toggle

垂直按钮组:

.dropdown-verticle

两端对齐排列的按钮组:

.btn-group-justified

表单:

.form-group

.form-control

.checkbox

.radio

.form-inline

.input-group

.input-group-addon

.form-horizontal

.control-label

.form-control-static

[readonly]

[disabled]

fieldset

legend

输入框组:

.input-group

.input-group-addon

.input-group-lg

.input-group-sm

.input-group-btn

导航:

.nav

.nav-tabs

.nav-pills

.nav-stacked

2、代码

按钮组带上拉菜单

1  2  3  4     
      5     index 6     12     
     13     14     15 16 17     
     
      18         
      Bootstrap前端框架
19 20         
      
       21             
           22             
       23             
       
        24                 
        linux
25                 
        linux
26                 
        linux
27                 
        linux
28             
       
29         
      
30         31     
     
32 33