class="img-thumbnail" class="thumbnail" //缩略图
栅格响应式*********************************
col-lg一般用于大屏设备(min-width:1200px)
col-md一般用于中屏设备(min-width:992px)
col-sm 平板 一般用于小屏设备(min-width:768px)
col-xs 手机 用于超小型设备(max-width:768px)
btn的颜色*********************************
<a href="#"class="btn btn-danger" >btn-danger</a> //超链接按钮和颜色
<button class="btn btn-info">info</button> //button按钮和颜色
<button class="btn btn-warning">warning</button>
<button class="btn btn-default">default</button>
<button class="btn btn-primary">primary</button>
btn的大小尺寸*********************************
<button class="btn btn-primary btn-lg">大</button>
<button class="btn btn-primary btn-md">中</button>
<button class="btn btn-primary btn-sm">小</button>
<button class="btn btn-primary btn-xs">手机小</button>
<button class="btn btn-primary btn-block">占满整块</button>
btn的按钮组*********************************************
<div class="btn-group" >
<button class="btn btn-info">btn</button>
<button class="btn btn-info">btn</button>
<button class="btn btn-info">btn</button>
</div>
btn下拉菜单 和向下三角*********************************************
<div class="container">
<div class="dropdown">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span> <!--向下的小三角-->
</button>
<ul class="dropdown-menu">
<li><a href="#">PHP大牛班</a></li>
<li><a href="#">Web前端与HTML5</a></li>
</ul>
</div>
</div>
btn下拉菜单和 一排按钮组*********************************************
<div class="btn-group">
<button class="btn btn-info">按钮</button>
<button class="btn btn-info">按钮2</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">PHP大牛班</a></li>
<li><a href="#">Web前端与HTML5</a></li>
</ul>
</div>
bootsrap下拉按钮 按钮组 栅格响应式
最新推荐文章于 2022-05-28 23:50:02 发布