BootStrap -- API学习（七）

最新推荐文章于 2023-02-07 17:51:41 发布

坤少的IT之路

最新推荐文章于 2023-02-07 17:51:41 发布

阅读量298

点赞数

分类专栏： BootStrap 文章标签： Web BootStrap

本文链接：https://blog.csdn.net/qq_39456689/article/details/88974334

版权

BootStrap 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

*******************************第七章其他内置组件*********************************
一、缩略图
   1.使用thumbnail作为缩略图的容器
       <a href="#" class="thumbnail">
           <img alt="100%x180" src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
       </a>

   2.缩略图和内容（text、按钮等）配合使用
       ①在加上一个内容的容器：<div class="caption"></div>
       <div class="col-xs-6 col-md-3">
           <a href="#" class="thumbnail">
               <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
           </a>
           <div class="caption">
               <h3>Bootstrap框架系列教程</h3>
               <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
               <p>
                   <a href="##" class="btn btn-primary">开始学习</a>
                   <a href="##" class="btn btn-info">正在学习</a>
               </p>
           </div>
       </div>

二、警告框
   1.默认警告框
       <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
       <div class="alert alert-info" role="alert">请输入正确的密码</div>
       <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
       <div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>

   2.可关闭的警告框
       在默认警告框的内容里面添加，关闭按钮
       <button class="close" type="button" data-dismiss="alert">×</button>

   3.警示框的链接
       情调: <strong></strong>
       链接：<a href="#" class="alert-link">警告链接</a>

三、进度条
   1.进度条基本样式
       progress作为外容器
       progress-bar作为内容器
       <div class="progress">
           <div class="progress-bar" style="width:40%"></div>
       </div>

   2.彩色进度条
       progress-bar-success
       progress-bar-info
       progress-bar-warning
       progress-bar-danger
       例子：(但是之前的progress-bar 还是不能丢的)
           <div class="progress">
               <div class="progress-bar progress-bar-info" style="width:40%"></div>
           </div>

   3.条纹进度条
       在容器上添加progress-striped

   4.动态条纹进度条
       在同期上添加active,像是转转的进度条

   5.层叠进度条就是使用一个容器就可以了(但是要几号他们的插值就好用了)（建议不用）

   6.带Label的进度条直接加值就可以了
       如：
           <div class="progress"><div class="progress-bar" style="width:30%">30%</div></div>


媒体对象
   1.默认媒体对象
       ☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
       ☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
       ☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
       ☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选

   2.媒体对象的嵌套
       在media-body中使用media对象

   3.媒体对象列表
       在加一个media-list容器
   例子：
       <div class="media-list">
           <div class="media">
               <a class="pull-left" href="#">
                   <img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031"/>
               </a>
               <div class="media-body">
                   <div class="media-header">
                       <h4>我是大漠</h4>
                   </div>
                   我是W3cplus站长大漠，我在写BootStrap框中的媒体对象测试用例
               </div>
           </div>
           <div class="media">
               <a class="pull-left" href="#">
                   <img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0"/>
               </a>
               <div class="media-body">
                   <div class="media-header">
                       <h4>我是大漠</h4>
                   </div>
                   我是W3cplus站长大漠，我在写BootStrap框中的媒体对象测试用例
               </div>
           </div>
           <div class="media">
               <a class="pull-left" href="#">
                   <img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1"/>
               </a>
               <div class="media-body">
                   <div class="media-header">
                       <h4>我是大漠</h4>
                   </div>
                   我是W3cplus站长大漠，我在写BootStrap框中的媒体对象测试用例
               </div>
           </div>
       </div>

列表
   1.基础列表(看上去像是去掉列表符号的列表，加上边框的样式)
       容器:list-group
       子项:list-group-item
       <ul class="list-group">
           <li class="list-group-item">揭开CSS3的面纱</li>
           <li class="list-group-item">CSS3选择器</li>
           <li class="list-group-item">CSS3边框</li>
           <li class="list-group-item">CSS3背景</li>
           <li class="list-group-item">CSS3文本</li>
       </ul>

   2.带徽章的列表页
       子项中添加：<span class="badge">12</span>
       例子:
           <ul class="list-group">
               <li class="list-group-item">
                   揭开CSS3的面<span class="badge">13</span>
               </li>
               <li class="list-group-item">
                   <span class="badge">456</span>CSS3选择器
               </li>
               <li class="list-group-item">
                   <span class="badge">892</span>CSS3边框
               </li>
               <li class="list-group-item">
                   <span class="badge">90</span>CSS3背景
               </li>
               <li class="list-group-item">
                   <span class="badge">1290</span>CSS3文本
               </li>
           </ul>

   3.带链接的列表页
       直接在内容上加上超链接就ok
       <ul class="list-group">
           <li class="list-group-item">
               <a href="#">你说什么，我是链接</a>
           </li>
       </ul>

   4.自定义列表
       标题：list-group-item-heading
       内容：list-group-item-text
       例子：
           <a href="##" class="list-group-item">
               <h4 class="list-group-item-heading">Sass中国</h4>
               <p class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程...</p>
           </a>

   5.列表项的状态
       激活: active
       禁用: desabled
       <li class="list-group-item active"></li>
       <li class="list-group-item disabled"></li>

   6.多彩列表
       ☑ list-group-item-success：成功，背景色绿色
       ☑ list-group-item-info：信息，背景色蓝色
       ☑ list-group-item-warning：警告，背景色为黄色
       ☑ list-group-item-danger：错误，背景色为红色

面板
   1.基础面板
       容器: panel panel-default
       内容: panel-body

   2.有头有尾的面板
       头部: panel-heading
       尾部: panel-footer

   3.彩色面板
       ☑ panel-primary：重点蓝
       ☑ panel-success：成功绿
       ☑ panel-info:信息蓝
       ☑ panel-warning：警告黄
       ☑ panel-danger：危险红

   4.面板中嵌套表格
       表格嵌套到panel-body中：有外边距
       表格嵌套到panel-body外：没有外边距，与面板贴合

   5.面板中嵌套列表 (规则同上)