Bootstrap 学习（二）组件

爱被打了一巴掌 2022-02-20 15:59 269阅读 0赞

**一：什么是组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。**  
**二.有哪些组件：Bootstrap官方提供了很多组件，这里我们列了一个图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA3MTQwOA_size_16_color_FFFFFF_t_70]这里我们不会把全部的组件全部写一遍，毕竟太多了，我们带大家看一下几个常用的组件，其余组件各位可以去官网看看，有个影响要用的时候再看一下。  
**三.部分例子：**  
**1.下拉菜单：**  
代码：

<div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

效果：  
![在这里插入图片描述][2019041411171567.png]  
通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

<div class="dropup">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropup
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

效果：  
![在这里插入图片描述][20190414112159985.png]  
**2.按钮**  
代码：

<div class="btn-group" role="group" aria-label="...">
    		<button type="button" class="btn btn-default">Left</button>
    		<button type="button" class="btn btn-default">Middle</button>
    		<button type="button" class="btn btn-default">Right</button>
    	</div>

效果：  
![在这里插入图片描述][20190414112935141.png]  
与上面的下拉菜单结合：  
代码：

<div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    		Dropdown
    		<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

效果：  
![在这里插入图片描述][20190414113057899.png]  
**-尺寸**  
只要给 .btn-group 加上 .btn-group-\* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。  
代码：

<div class="btn-group btn-group-lg" role="group" aria-label="...">
    	<button type="button" class="btn btn-default">Left</button>
    	<button type="button" class="btn btn-default">Middle</button>
    	<button type="button" class="btn btn-default">Right</button>
    </div><br/><br/>
    <div class="btn-group" role="group" aria-label="...">
    	<button type="button" class="btn btn-default">Left</button>
    	<button type="button" class="btn btn-default">Middle</button>
    	<button type="button" class="btn btn-default">Right</button>
    </div><br/><br/>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
    	<button type="button" class="btn btn-default">Left</button>
    	<button type="button" class="btn btn-default">Middle</button>
    	<button type="button" class="btn btn-default">Right</button>
    </div><br/><br/>
    <div class="btn-group btn-group-xs" role="group" aria-label="...">
    	<button type="button" class="btn btn-default">Left</button>
    	<button type="button" class="btn btn-default">Middle</button>
    	<button type="button" class="btn btn-default">Right</button>
    </div><br/><br/>

效果：  
![在这里插入图片描述][20190414113654238.png]  
**注：** 本文代码中的br标签只为让格式简介明了，可以很好的看到效果区别，无其他含义！！！！

**-垂直排列**

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。  
语法：

代码：

<div class="btn-group-vertical" role="group" aria-label="...">
    <div class="btn-group btn-group-lg" role="group" aria-label="...">
    	<button type="button" class="btn btn-default">Left</button>
    	<button type="button" class="btn btn-default">Middle</button>
    	<button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="btn-group" role="group" aria-label="...">
    	<button type="button" class="btn btn-default">Left</button>
    	<button type="button" class="btn btn-default">Middle</button>
    	<button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
    	<button type="button" class="btn btn-default">Left</button>
    	<button type="button" class="btn btn-default">Middle</button>
    	<button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="btn-group btn-group-xs" role="group" aria-label="...">
    	<button type="button" class="btn btn-default">Left</button>
    	<button type="button" class="btn btn-default">Middle</button>
    	<button type="button" class="btn btn-default">Right</button>
    </div>
    </div>

效果：  
![在这里插入图片描述][20190414114604687.png]  
**3.按钮式下拉菜单**  
代码：

<div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Danger <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Primary <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    
    <div class="btn-group">
      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Warning <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    
    <div class="btn-group">
      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Success <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    
    <div class="btn-group">
      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        info <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

效果：  
![在这里插入图片描述][20190414115458266.png]  
这里我们只需要将button标签中的class设置成btn btn-样式dropdown-toggle即可达到上图效果；

**-分裂式按钮下拉菜单**  
代码：

<div class="btn-group">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

效果：  
![在这里插入图片描述][20190414123132459.png]  
**4.分页**  
代码：

效果：  
![在这里插入图片描述][2019041412381491.png]

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

**总结，其实bootstrap这个框架主要是用class来控制样式，看似很简单，其实其中包含着大量的类需要去熟练的运用，很多地方都有相似之处，比如大小之类、位置之类，想要学好前端只有一个秘诀，那就是多练习，拼命的练习，总会有开花结果的那一天。**

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

您可以通过点击 文章下方的输入框 来对文章内容作出评价, 也可以通过左上方的 关注按钮 来关注我的博客的最新动态。

如果文章内容对您有帮助, 不要忘记点击右上角的 喜欢按钮 来支持一下哦 ！

如果您对文章内容有任何疑问, 可以通过评论方式联系我;

**如果需要转载，请注明出处，谢谢！！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA3MTQwOA_size_16_color_FFFFFF_t_70]: /images/20220220/13cfc7621c484528995e2ef311840a5c.png
[2019041411171567.png]: /images/20220220/3cb225c93e594129b6f0b6258a228eb0.png
[20190414112159985.png]: /images/20220220/bff97e4ef52f497481d670b65349870b.png
[20190414112935141.png]: /images/20220220/0e2bb30cb4134b558893688b1847b373.png
[20190414113057899.png]: /images/20220220/fe6b92da29404dac8fd70da367adc653.png
[20190414113654238.png]: /images/20220220/6365acdb5a4c44429b2613bf0936c755.png
[20190414114604687.png]: /images/20220220/671cd35bad9a4b69b827bc37e9c3807f.png
[20190414115458266.png]: /images/20220220/84343934d5134362aded62b5c53ce071.png
[20190414123132459.png]: /images/20220220/a2904e3ee59242f9a639e2e16bc497ac.png
[2019041412381491.png]: /images/20220220/6335ce28c25d44bc858de17b0fba1352.png