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

　　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>

　　　　          　　

 

posted @ 2016-05-30 14:08  zzjeny  阅读(185)  评论(0)    收藏  举报