浅析Bootstrap缩略图组件与警示框组件
|
Bootstrap简介 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 缩略图组件缩略图在网站中最常用的就是产品列表页面，一行显示几张图片，有的在图片底下带有标题、描述内容、按钮等信息。 bootstrap框架将这部分独立成一个模块组件，通过类名.thumbnail配合来实现。下面是bootstrap缩略图组件不同版本的源码文件： LESS : tbumbnails.less SASS : _tbumbnails.scss 实现原理： 布局的实现主要依靠于bootstrap框架的网格系统，下面是缩略图对应的样式 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;
}
来看一个例子： 效果如下：
可以用火狐响应式设计视图查看 在仅有缩略图的基础上，添加一个类名为.caption的div容器，在这个容器中放置其他内容，如：标题，文本描述，按钮等 这里是图文标题1111
这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容这里是描述内容 这里是图文标题2222
这里是描述内容2222这里是描述内容22222这里是描述内容22222这里是描述内容222这里是描述内容2222 这里是图文标题3333
这里是描述内容3333这里是描述内容3333这里是描述内容33333这里是描述内容222这里是描述内容3333 这里是图文标题4444
这里是描述内容4444这里是描述内容4444这里是描述内容4444这里是描述内容4444这里是描述内容4444
警示框组件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源码： 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;
}
例如： 可关闭的警示框 1、在默认的警示框的容器上追加一个.alert-dismissable类名 2、在button标签中添加.close，实现警告框的关闭按钮 3、确保关闭按钮元素上设置了自定义属性data-dismiss=”alert“（关闭警示框需要通过js来检测该属性，从而控制警示框的关闭） 例子：
恭喜你操作成功！
请输入正确的密码
你已经操作失败两次，还有最后一次机会
对不起，你的密码输入有误！
警示框的链接 有时候需要在警示框中加入链接，告诉用户跳转到新的页面，bootstrap框架中对警示框的链接做了高亮处理。给警告框加的链接添加一个为.alert-link的类名，下面是alert-link的css样式 例子： Well done!
You successfully read
Well done!
You successfully read
Well done!
You successfully read
Well done!
You successfully read
关于本文给大家介绍的Bootstrap缩略图组件与警示框组件的相关知识就给大家介绍这么多，希望对大家有所帮助！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
- 单元测试 – Angular承诺不在茉莉花中解决
- MySQL数据库多种安装方法及企业级安装实践(上篇)
- WebService：CXF发布Web项目
- scala – JonasBonér的依赖注入策略似乎有限 – 但也许我不
- Visual Rules规则引擎 + WebService简单的项目案例【连载三
- 抛弃WebService，在.NET4中用 jQuery 调用 WCF
- node.js – 如何访问在Mesos上运行的Web应用程序？
- Kubernetes：Docker pod启动失败,除了一个
- webservice详解
- angularjs – 通过angular1 ui-router导航后,ng2组件中的更