Thumbnails and warning windows that Bootstrap must learn every day_javascript skills

1. Thumbnail

The most commonly used place for thumbnails on websites is on product list pages, where several pictures are displayed in one row, and some have titles, descriptions and other information underneath the pictures (on the left or right side). The Bootstrap framework separates this part into a module component. And it is achieved through the "thumbnail" style and the grid system of bootstrap. The product list page can be made more beautiful.

Source code file:

☑ LESS version: corresponding file thumbnails.less

☑ Sass version: Corresponding file_thumbnails.scss

☑ Compiled version: Line 4402~Line 4426 of bootstrap.css file

Usage:

Achieved through the "thumbnail" style and bootstrap's grid system.

As mentioned before, the implementation of thumbnails is used in conjunction with the grid system. Suppose we have a product list, as shown below:

Let’s look at the structure first:

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="imgs/a.png" style="width: 100%; display: block;" alt="">
      </a>
    </div>
  …
  </div>
</div>

The above structure represents that when the screen is wide (the visible area is greater than 768px), four thumbnails are displayed in one line (click the full screen to view the effect):

On narrow screens (viewable area less than 768px), only two thumbnails are displayed in one line:

• col-xs-Ultra small screen mobile phone (<768px),
• col-sm-small screen tablet (≥768px),
• col-md-medium screen desktop monitor (≥992px)

class="col-xs-6 col-md-3" This is the syntax of responsive grid. You can think of it this way, class="col-xs is automatically used when the screen is a small screen (<768px) -6" automatically uses class="col-md-3" when the screen is a medium screen (>=768px). BootStrap is divided into 12 columns. The above code indicates that every 6 copies (half) are used when the screen is extremely small. That is 6, the medium and large screen takes up 3 parts.

Implementation principle:

The layout implementation mainly relies on the grid system of the Bootstrap framework, and the style code corresponding to the thumbnail:

/Line 4402~Line 4426 of the bootstrap.css file/

.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;
}

2. Complex thumbnails

The previous section only shows one way to use thumbnails. In addition to this method, thumbnails can also be matched with titles, descriptions, buttons, etc.:

On the basis of only thumbnails, a div container named "caption" is added, and other content is placed in this container, such as title, text description, button, etc.:

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="imgs/1.jpg" 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>
  …
  </div>
</div>

效果如下：

3、警示框

在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示：

在Bootstrap框架有一个独立的组件，实现上述的效果，这个组件被称为警示框。

源码版本：

☑ LESS版本：对应的源码文件alerts.less

☑ Sass版本：对应的源码文件_alerts.scss

☑ 编译后的版本：bootstrap.css文件第4427行～第4499行

4、默认警示框

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

1）、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

2）、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

3）、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

4）、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

使用方法：

具体使用的时候，可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框，只需要在“alert”基础上追加对应的类名，如下：

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

运行效果如下：

实现原理：

其中“alert”样式的源码主要是设置了警示框的背景色、边框、圆角和文字颜色。另外对其内部几个元素h4、p、ul和“.alert-link”做了样式上的特殊处理：

/bootstrap.css文件第4427行～第4446行/

.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”、“alert-info”、“alert-warning”和“alert-danger”样式来实现：

/bootstrap.css文件第4456行～第4499行/

.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;
}

5、可关闭的警示框

大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。

使用方法：

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

1）、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

2）、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

3）、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

具体使用如下：

<div class="alert alert-success alert-dismissable" role="alert">
  <button class="close" type="button" data-dismiss="alert">&times;</button>
  恭喜您操作成功！
</div>

运行效果如下：

原理分析：

在样式上，需要在基本警示框“alert”的基础上添加“alert-dismissable”样式，这样就可以实现带关闭功能的警示框。

/bootstrap.css文件第4447行～第4455行/

.alert-dismissable {
 padding-right: 35px;
}
.alert-dismissable .close {
 position: relative;
 top: -2px;
 right: -21px;
 color: inherit;
}

6、警示框的链接

有时候你可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。

实现方法：

Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。

具体使用如下：

<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong>
   忘记密码？---><a href="##" class="alert-link">请点击此处</a>
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong>
  密码输入错误---><a href="##" class="alert-link">请点击此处找回密码。。</a>
</div>

运行效果如下：

实现原理：

实现样式如下：

/bootstrap.css文件第4437行～第4439行/

.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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。