您的位置：首页 > Web前端 > BootStrap

2016年5月30日上午（传智Bootstrap笔记七（辅助类样式））

2016-05-30 14:08 459 查看

　　1、文本颜色类：

.text-muted	"text-muted" 类的文本样式
.text-primary	"text-primary" 类的文本样式
.text-success	"text-success" 类的文本样式
.text-info	"text-info" 类的文本样式
.text-warning	"text-warning" 类的文本样式
.text-danger	"text-danger" 类的文本样式

　　2、背景颜色类：

　　　　以下不同的类展示了不同的背景颜色。如果文本是个链接鼠标移动到文本上会变暗：

类	描述
.bg-primary	表格单元格使用了 "bg-primary" 类
.bg-success	表格单元格使用了 "bg-success" 类
.bg-info	表格单元格使用了 "bg-info" 类
.bg-warning	表格单元格使用了 "bg-warning" 类
.bg-danger	表格单元格使用了 "bg-danger" 类

　　3、三角符号：<span class="caret"></span>（显示下拉式功能）

　　4、快速浮动类：

.pull-left	元素浮动到左边
.pull-right	元素浮动到右边

.clearfix

清除浮动

　　5、让内容块网页居中：

.center-block

设置元素为 display:block 并居中显示

　 6、其他

.show	强制元素显示
.hidden	强制元素隐藏
.sr-only	除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable	与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide	将页面元素所包含的文本内容替换为背景图
.close	显示关闭按钮

<body style="padding:50px;background-color:#ccc;">
<h2 class="page-header">浮动和清除的应用</h2>
<div style="width:350px;" class="clearfix center-block bg-warning img-responsive" >
<div class="">
<ul class="list-unstyled ">
<li class="pull-left" style="padding: 10px;">
<a href="#"><img src="2.jpg" width="150px" height="150px"></a><br>
<a href="#">这个图片挺好看的</a>
</li>
<li class="pull-left" style="padding: 10px;">
<a href="#"><img src="3.jpg" width="150px" height="150px"></a><br>
<a href="#">这个图片挺好看的</a>
</li>
<li class="pull-left" style="padding: 10px;">
<a href="#"><img src="4.jpg" width="150px" height="150px"></a><br>
<a href="#">这个图片挺好看的</a>
</li>
<li class="pull-left" style="padding: 10px;">
<a href="#"><img src="5.jpg" width="150px" height="150px"></a><br>
<a href="#">这个图片挺好看的</a>
</li>
</ul>
</div>
</div>

<h2 class="page-header">图片样式应用</h2>
<div>
<img class="img-responsive img-circle center-block" width="400px" src="1.jpg">
<p>
在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
</p>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航