Bootstrap每天必学之缩略图与警示窗

发布时间:2020-01-18 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了Bootstrap每天必学之缩略图与警示窗大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

1、缩略图

缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。

源码文件:

☑ LESS版本:对应文件thumbnails.less

☑ Sass版本:对应文件_thumbnails.scss

☑ 编译后版本:bootstrap.css文件第4402行~第4426行

使用方法:

通过“thumbnail”样式配合bootstrap的网格系统来实现。

前面也说过了,缩略图的实现是配合网格系统一起使用,假设我们一个产品列表,如下图所示:

Bootstrap每天必学之缩略图与警示窗

上面的结构表示的是在宽屏幕(可视区域大于768px)的时候,一行显示四个缩略图(单击全屏查看效果):

在窄屏(可视区域小于768px)的时候,一行只显示两个缩略图:

Bootstrap每天必学之缩略图与警示窗

class="col-xs-6 col-md-3"这个是响应式网格的语法, 你可以这样认为,当屏幕为小屏幕(<768px)时自动使用class="col-xs-6" 当屏幕为中屏(>=768px)时自动使用 class="col-md-3" BootStrap总共分为12列,上面的代码表示在极小屏幕时每6份(占一半),即6,中大屏幕是占3份。

实现原理:

布局实现的主要是依靠于Bootstrap框架的网格系统,而缩略图对应的样式代码:

/bootstrap.css文件第4402行~第4426行/

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、复杂缩略图

上一小节,展示的仅只有缩略图的一种使用方式,除了这种方式之外,还可以让缩略图配合标题、描述内容,按钮等:

在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如说标题,文本描述,按钮等:

Bootstrap框架系列教程

Bootstrap框架是一个优秀的前端框,就算您是一位后端程序员或者你是一位不懂设计的前端人员,你也能依赖于Bootstrap制作做优美的网站...

效果如下:

3、警示框

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

Bootstrap每天必学之缩略图与警示窗

在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”基础上追加对应的类名,如下:

标签:bootstrap缩略图警示窗
猜你在找的Bootstrap相关文章
其他相关热搜词更多
php如何javascriptPythonJava使用c#css编程问答crubyhtmljsrailsvb方法文件delphi
全站导航更多
最新Bootstrap教程
热门Bootstrap教程