微信扫一扫打赏支持

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

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"
下面调用的是
<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

 

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>

 

 

 

 
posted @ 2018-07-12 01:02  范仁义  阅读(519)  评论(0)  编辑  收藏  举报