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

时间：2022-07-28 20:55:28

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、代码

按钮组带上拉菜单

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

     <link rel="stylesheet" href="bs/css/bootstrap.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.js"></script>

 </head>

 <body>

     <div class="container">

         <h1 class='page-header'>Bootstrap前端框架</h1>

         <div class="btn-group dropup">

             <button class='btn btn-default'>Default</button>

             <button class='btn btn-danger dropdown-toggle' data-toggle='dropdown'><span class="caret"></span></button>

             <ul class='dropdown-menu'>

                 <li><a href="">linux</a></li>

                 <li><a href="">linux</a></li>

                 <li><a href="">linux</a></li>

                 <li><a href="">linux</a></li>

             </ul>

         </div>

     </div>

 </body>

 </html>
 

相关文章