bootstrap学习笔记之三（组件的使用）

Posted 2020-06-18 修身齐家治国平天下

bootstrap组件需要引入bootstrap.js才行，当然要引入bootstrap.js首先得引入JQuery。

一、下拉菜单

　　将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了position：relative 的元素。原因是dropdown-menu元素设定了position:absolute，且top：100%； left: 0；所以需要包裹在设定了position：relative的元素内。

1 .dropup,
2 .dropdown {
3   position: relative;
4 }

1 .dropdown-menu {
2   position: absolute;
3   top: 100%;
4   left: 0;
5 }

 1 <div class="dropdown">
 2   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 3     Dropdown
 4     <span class="caret"></span>
 5   </button>
 6   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
 7     <li><a href="#">Action</a></li>
 8     <li><a href="#">Another action</a></li>
 9     <li><a href="#">Something else here</a></li>
10     <li><a href="#">Separated link</a></li>
11   </ul>
12 </div>

　　查看代码我们可以看到，下拉菜单包括一个下拉开关按钮，需要添加类名dropdown-toggle，同时还得添加一个属性data-toggle="dropdown"，然后还包括一个ul下拉选项，需要添加类名dropdown-menu。

　　如需添加下拉菜单的标题，则只需要在li中添加一个类名dropdown-header即可。不过此时li中的内容不应被a标签包裹了，而是直接写在li标签内。

　　如需在下拉菜单中添加分割线，只需要在空的li中添加类名divider即可。

　　下拉菜单还是很简单的。

2、继续学习按钮组

　　暂时感觉单纯的按钮组没有多大用！

　　为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组，需要提供一个合适的 role 属性。对于按钮组合，应该是 role="group"，对于toolbar（工具栏）应该是 role="toolbar"。

　　此外，按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的 role 属性，但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中，我们使用 aria-label，但是， aria-labelledby 也可以使用。

　　只需要把几个button标签放进一个btn-group的div类中既可以形成一个按钮组。而把几个按钮组btn-group放进一个btn-toolbar的标签中既可以形成一个工具栏。不过注意此时的btn-group和btn-toolbar要分别添加role="group"和role="toolbar"。

　　按钮组的尺寸：

　　只需要给btn-group类添加类名btn-group-lg，btn-group-md，btn-group-sm，btn-group-xs既可以改变按钮组的大小。在第二节，学习按钮时改变按钮的大小时是通过给btn添加类名btn-lg，btn-md,btn-sm,btn-xs完成时，此时只是在父集btn-group一块操作罢了。

　　按钮组嵌套下拉菜单，只需要只须把 .btn-group 放入另一个 .btn-group 中。

 1 <div class="btn-group" role="group" aria-label="...">
 2   <button type="button" class="btn btn-default">1</button>
 3   <button type="button" class="btn btn-default">2</button>
 4 
 5   <div class="btn-group" role="group">
 6     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 7       Dropdown
 8       <span class="caret"></span>
 9     </button>
10     <ul class="dropdown-menu">
11       <li><a href="#">Dropdown link</a></li>
12       <li><a href="#">Dropdown link</a></li>
13     </ul>
14   </div>
15 </div>

 

　　　　之前说过下拉菜单组只要放在一个有相对定位的父集中即可，把它放在btn-group中当然可以，而把btn-group放入btn-group中当然也可以，因为btn-group的宽度并没有占全屏的。

　　　　给btn-group添加btn-group-vertical即可以使按钮组垂直排列。

　　　　下面是一个非常实用的按钮组，两端对齐排列的按钮组，如果按钮是a标签的话，直接在btn-group中添加btn-group-justified类既可以实现按钮组的宽度自动充满父集的宽度，当然也可以自动充满container的宽度，按钮组的宽度平均分配给里边的button元素。

 

 1 　　　　　　　　　<div class="btn-group btn-group-justified" role="group" aria-label="...">
 2                   <a type="button" class="btn btn-default">1</a>
 3                   <a type="button" class="btn btn-default">2</a>                
 4                   <a type="button" class="btn btn-default">3</a>                
 5                   <div class="btn-group" role="group">
 6                     <a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 7                       Dropdown
 8                       <span class="caret"></span>
 9                     </a>
10                     <ul class="dropdown-menu">
11                       <li><a href="#">Dropdown link</a></li>
12                       <li><a href="#">Dropdown link</a></li>
13                     </ul>
14                   </div>
15                 </div>

 

 

 

 

 

 

　　而button元素则需要内嵌在类名为btn-group的div元素中，如下：

 1 <div class="btn-group btn-group-justified" role="group" aria-label="...">
 2   <div class="btn-group" role="group">
 3     <button type="button" class="btn btn-default">Left</button>
 4   </div>
 5   <div class="btn-group" role="group">
 6     <button type="button" class="btn btn-default">Middle</button>
 7   </div>
 8   <div class="btn-group" role="group">
 9     <button type="button" class="btn btn-default">Right</button>
10   </div>
11 </div>

　　按钮式下拉菜单也非常简单，只需要把几个内嵌有下拉菜单的几个下拉菜单放一块就是一个按钮式下拉菜单

　　分列式下拉菜单也只是下拉菜单触发器那里的三角符号稍微有些改变，其它的都没有变化。

　　尺寸也只是在btn按钮中添加了btn-lg，btn-sm，btn-xs。

3、现在进行输入框组

　　输入框组只是把之前在form表单中学过的form元素里边的 .input-group 类赋予.input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。个人觉得没什么好说的，很简单，而且实用性也不太强。