BootStrap_03 组件

柔光的暖阳◎ 2022-04-04 10:28 191阅读 0赞

## BootStrap组件 图标 ##

.glyphicon  
.glyphicon-start

<button class="btn btn-default" >
    		<span class="glyphicon glyphicon-star"></span>这是一个按钮
    	</button>

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

## BootStrap组件 下拉菜单 ##

1 .dropdown 控制组件为下拉  
2 .dropdown-menu-right代替 .pull-right右对齐  
3 .divider 分割线

<div class="dropdown">
    
    		<button class="btn btn-default" data-toggle="dropdown">
    			这是一个按钮 <span class="caret"></span>
    		</button>
    		<ul class="dropdown-menu">
    			<li><a href="http://www.baidu.com">百度</a></li>
    			<li><a href="http://www.baidu.com">阿里</a></li>
    			<li><a href="http://www.baidu.com">腾讯</a></li>
    		</ul>
    	</div>

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

## BootStrap组件 控件组 ##

1 .input-group 表示控件组  
2 .input-group-addon 可放置额外内容级图标

<div class="input-group">
    			<span class="input-group-addon">##</span>
    			<input type="text" class="form-control">
    	</div>
    	```
    	![
    	](https://img-blog.csdnimg.cn/20181216145420563.png)
    <hr/>
    
    ## BootStrap组件 导航
    
    1. 以一个带有class .nav的无序列表开始 
    2.  .nav-tabs代表可切换的导航
    3.  .nav-pills代表胶囊导航
    4.   .nav-justified 使导航垂直
    ```html
    
    	<ul class="nav nav-tabs">
    		<li class="active"><a  href="#">百度</a></li>
    		<li><a href="#">腾讯</a></li>
    		<li><a href="#">阿里</a></li>
    	</ul>
    	<ul class="nav nav-pills nav-stacked">
    		<li class="active"><a  href="#">百度</a></li>
    		<li><a href="#">腾讯</a></li>
    		<li><a href="#">阿里</a></li>
    	</ul>

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

## BootStrap组件 分页 ##

1 .pagination 在父元素中添加表示分页  
2 .pager 放置在翻页区域  
3 .previous 把链接向左对齐  
4 .next 把链接向右对齐

<nav>
    		<ul class="pager">
    			<li class="previous"><a href="#">向左</a></li>
    			<li class="next"><a href="#">向左</a></li>
    		</ul>
    		<ul class="pagination pagination-sm">
    			<li class="active"><a href="#">1</a></li>
    			<li><a href="#">2</a></li>
    			<li><a href="#">3</a></li>
    		</ul>	
    	</nav>

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

## BootStrap组件 进度条 ##

1 .progress 表示进度条  
2 通过状态类改变进度条的颜色  
3 .progress-bar-striped 使得进度条颜色渐变

<div class="progress">
    		<div class="progress-bar progress-bar-info progress-bar-striped" style="width:60%">
    		
    		</div>
    	</div>

![在这里插入图片描述][20181216162745579.png]

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

## BootStrap组件 列表 ##

1 .list-group 代表列表组  
2 .badge 代表状态数  
3 .active 代表选中

<ul class="list-group">
    		<li class="list-group-item active">这是一个列表</li>
    		<li class="list-group-item disabled">这是一个列表</li>
    		<li class="list-group-item list-group-item-info">这是一个列表</li>
    		<li class="list-group-item">这是一个列表</li>
    		<li class="list-group-item">这是一个列表</li>
    	</ul>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5sYW5zZTc2MjY_size_16_color_FFFFFF_t_70]

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

## BootStrap组件 面板 ##

1 .panel 代表面板  
2 .panel-heading： 代表面板头部  
3 .panel-body 代表面板的主体内容  
4 .panel-footer 代表面板的尾部

<div class="panel panel-primary">
    		<div class="panel-heading">
    			弹出面板
    		</div>
    		<div class="panel-body">
    			这是面板的主体
    		</div>
    		<div class="panel-footer">
    			这是面板的尾部
    		</div>
    	</div>

![在这里插入图片描述][20181216165651537.png]

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

## BootStrap组件 ##

[20181216162745579.png]: /images/20220404/ad3a26a8ce17453d955261bc8c09a1f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5sYW5zZTc2MjY_size_16_color_FFFFFF_t_70]: /images/20220404/0d168aa5f4cc4807afa567d7dea0a752.png
[20181216165651537.png]: /images/20220404/4ef3853d973743049f6118b99e5d63e4.png