详解Bootstrap缩略图组件及警示框组件

缩略图组件

缩略图在网站中最常用的就是产品列表页面，一行显示几张图片，有的在图片底下带有标题、描述内容、按钮等信息。bootstrap框架将这部分独立成一个模块组件，通过类名.thumbnail配合bootstrap的网格系统来实现。下面是bootstrap缩略图组件不同版本的源码文件：

LESS :  tbumbnails.less

SASS : _tbumbnails.scss

实现原理：

布局的实现主要依靠于bootstrap框架的网格系统，下面是缩略图对应的样式

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #428bca;
}
.thumbnail .caption {
  padding: 9px;
  color: #333;
}

来看一个例子：

<div class="container">
      <div class="row">
          <div class="col-md-3">
              <a herf="#" class="thumbnail">
                  <img src="img/1.jpg" style="height:180px;width:100%;display: block">
              </a>
          </div>
          <div class="col-md-3">
              <a herf="#" class="thumbnail">
                  <img src="img/2.jpg" style="height:180px;width:100%;display: block">
              </a>
          </div>
          <div class="col-md-3">
              <a herf="#" class="thumbnail">
                  <img src="img/3.jpg" style="height:180px;width:100%;display: block">
              </a>
          </div>
          <div class="col-md-3">
              <a herf="#" class="thumbnail" >
                  <img src="img/4.jpg" style="height:180px;width:100%;display: block">
              </a>
          </div>
      </div>
  </div>

效果如下：

可以用火狐响应式设计视图查看

在仅有缩略图的基础上，添加一个类名为.caption的div容器，在这个容器中放置其他内容，如：标题，文本描述，按钮等

<div class="container">
      <div class="row">
          <div class="col-md-3">
              <a href="#" class="thumbnail">
                  <img src="img/1.jpg" style="height:180px;width:100%;display: block">
              </a>
              <div class="caption">
                  <h3>这里是图文标题1111</h3>
                  <p>这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容</p>
                  <a  href="#" class="btn btn-primary">开始学习</a>
                  <a  href="#" class="btn btn-info">正在学习</a>
              </div>
          </div>
          <div class="col-md-3">
              <a href="#" class="thumbnail">
                  <img src="img/2.jpg" style="height:180px;width:100%;display: block">
              </a>
              <div class="caption">
                  <h3>这里是图文标题2222</h3>
                  <p>这里是描述内容2222这里是描述内容22222这里是描述内容22222这里是描述内容222这里是描述内容2222</p>
                  <a href="#" class="btn btn-primary">开始学习</a>
                  <a  href="#" class="btn btn-info">正在学习</a>
              </div>
          </div>
          <div class="col-md-3">
              <a href="#" class="thumbnail">
                  <img src="img/3.jpg" style="height:180px;width:100%;display: block">
              </a>
              <div class="caption">
                  <h3>这里是图文标题3333</h3>
                  <p>这里是描述内容3333这里是描述内容3333这里是描述内容33333这里是描述内容222这里是描述内容3333</p>
                  <a href="#" class="btn btn-primary">开始学习</a>
                  <a  href="#" class="btn btn-info">正在学习</a>
              </div>
          </div>
          <div class="col-md-3">
              <a href="#" class="thumbnail">
                  <img src="img/4.jpg" style="height:180px;width:100%;display: block">
              </a>
              <div class="caption">
                  <h3>这里是图文标题4444</h3>
                  <p>这里是描述内容4444这里是描述内容4444这里是描述内容4444这里是描述内容4444这里是描述内容4444</p>
                  <a href="#" class="btn btn-primary">开始学习</a>
                  <a  href="#" class="btn btn-info">正在学习</a>
              </div>
          </div>
      </div>
  </div>

警示框组件

bootstrap框架通过.alert样式来实现警示框效果，在默认情况下，bootstrap提供了四种不同的警示框效果：

1、成功警示框：提示用户操作成功，在.alert的基础上追加.alert-success样式；

2、信息警告框：给用户提供提示信息，在.alert的基础上追加.alert-info样式；

3、警告警示框：提供警告信息，在.alert的基础上追加.alert-warning样式；

4、错误警示框：提示用户操作错误，在.alert的基础上追加.alert-danger样式；

其中，.alert样式主要设置了警示框的背景色、边框，圆角，文字颜色，此外还对h4、p、ul及.alert-link做了样式上的处理，下面是css源码：

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-info hr {
  border-top-color: #a6e1ec;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-warning hr {
  border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}

例如：

<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>

可关闭的警示框

1、在默认的警示框的容器上追加一个.alert-dismissable类名

2、在button标签中添加.close，实现警告框的关闭按钮

3、确保关闭按钮元素上设置了自定义属性data-dismiss=”alert“（关闭警示框需要通过js来检测该属性，从而控制警示框的关闭）

例子：

<div class="alert alert-success alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button>
        恭喜你操作成功！
    </div>
    <div class="alert alert-info alert-dismissable"role="alert">
         <button class="close" type="button" data-dismiss="alert">&times;</button>
        请输入正确的密码
    </div>
    <div class="alert alert-warning alert-dismissable"  role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button>
        你已经操作失败两次，还有最后一次机会
    </div>
    <div class="alert alert-danger alert-dismissable" role="alert">
         <button class="close" type="button" data-dismiss="alert">&times;</button>
        对不起，你的密码输入有误！
    </div>

警示框的链接

有时候需要在警示框中加入链接，告诉用户跳转到新的页面，bootstrap框架中对警示框的链接做了高亮处理。给警告框加的链接添加一个为.alert-link的类名，下面是alert-link的css样式

.alert .alert-link {
  font-weight: bold;
}

/*不同类型警示框中链接的文本颜色*/
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger .alert-link {
  color: #843534;
}

例子：

<div class="alert alert-success " role="alert">
        <strong>Well done!</strong>
        You successfully read
        <a href="#" class="alert-link">this important alert message</a>
    </div>
    <div class="alert alert-info" role="alert">
        <strong>Well done!</strong>
        You successfully read
        <a href="#" class="alert-link">this important alert message</a>
    </div>
    <div class="alert alert-warning " role="alert">
        <strong>Well done!</strong>
        You successfully read
        <a href="#" class="alert-link">this important alert message</a>
    </div>
    <div class="alert alert-danger" role="alert">
        <strong>Well done!</strong>
        You successfully read
        <a href="#" class="alert-link">this important alert message</a>
 </div>

时间： 2024-10-24 23:31:12

详解Bootstrap缩略图组件及警示框组件的相关文章

详解Bootstrap表单组件

表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss bootstrap仅对表单内的fieldset.legend.label标签进行了定制 fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; padding: 0;

详解Bootstrap列表组组件

列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.less SASS:_list-group.scss 列表组看上去就是去掉了列表符号的列表项,并且配上一些特定的样式,在bootstrap框架中的基础列表组主要包括两个部分: list-group:列表组容器,常用的是ul元素,也可以是ol或div元素 list-group-item:列表项,常用的是l

详解Bootstrap面板组件

面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-body来放置面板主体内容 .panel主要对边框.间距.圆角.左右一定的设置: .panel { ma

详解Bootstrap按钮组件（二）

按钮下拉菜单 按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的.它们唯一的不同是外部容器div.dropdown换成了div.btn-group <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 按钮下拉菜单 <span class="caret">

【转】详解Bootstrap媒体对象

在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.less SASS: _media.scss 媒体对象一般是成组出现,一组媒体对象一般包括以下几部分: 1.媒体对象的容器:用来容纳媒体对象的所有内容,容器上需使用类名.media 2.媒体对象的对象:一般是图片,需使用类.media-object 3.媒体对象的主体:就是媒体对象的主体内容,可以是任

详解Bootstrap媒体对象

在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.less SASS: _media.scss 媒体对象一般是成组出现,一组媒体对象一般包括以下几部分: 1.媒体对象的容器:用来容纳媒体对象的所有内容,容器上需使用类名.media 2.媒体对象的对象:一般是图片,需使用类.media-object 3.媒体对象的主体:就是媒体对象的主体内容,可以是任

详解Bootstrap实现基本布局的方法

看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面我们先创建一个基本的 HTML 模板页面,使用 sublime + emmet 可以直接创建这个页面. 1.1 新建一个文件, Ctrl + N 1.2 保存到页面文件中,Ctrl + S,命名为 index.html 1.3 在这个空白页面中,输入 html:5,然后直接按制表键 Tab,就应该可以看到一个基本的 HTML5 模板

详解Bootstrap网格系统

bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row)必须包含在容器(.container)中,以便其赋予合适的对齐方式和内距(padding) <div class="container"> <div class="row"></div> </div> 2.在行(.row

第 10 章 巨幕页头缩略图和警告框组件

学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩略图组件和警告框组件. 一．巨幕组件 巨幕组件主要是展示网站的关键性区域. //在固定的范围内,有圆角 <div class="container"> <div class="jumbotron"> <h2>网站标题</h2> <p> 这