bootstrap课程5 bootstrap中的组件使用的注意事项是什么
一、总结
一句话总结：
1、img-responsive的作用是什么（其实还是要多看手册）？
看起来像width=100%的效果，
其实质是为图片设置了 max- 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"
下面调用的是
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
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
--------------------------------------------------
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 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 </style> 12 <link rel="stylesheet" href="bs/css/bootstrap.css"> 13 <script src="bs/js/jquery.min.js"></script> 14 <script src="bs/js/bootstrap.js"></script> 15 </head> 16 <body> 17 <div class="container"> 18 <h1 class='page-header'>Bootstrap前端框架</h1> 19 20 <div class="btn-group dropup"> 21 <button class='btn btn-default'>Default</button> 22 <button class='btn btn-danger dropdown-toggle' data-toggle='dropdown'><span class="caret"></span></button> 23 <ul class='dropdown-menu'> 24 <li><a href="">linux</a></li> 25 <li><a href="">linux</a></li> 26 <li><a href="">linux</a></li> 27 <li><a href="">linux</a></li> 28 </ul> 29 </div> 30 31 </div> 32 </body> 33 </html>