第十章之巨幕页头缩略图与警告框组件


Posted in Javascript onApril 25, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。下面先给大家说下学习要点。

学习要点:

1.巨幕组件

2.页头组件

3.缩略图组件

4.警告框组件

本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件、页头组件、缩略图组件和警告框组件。

一.巨幕组件

巨幕组件主要是展示网站的关键性区域。

//在固定的范围内,有圆角
<div class="container">
<div class="jumbotron">
<h2>网站标题</h2>
<p>
这是一个学习性的网站!
</p>
<p>
<a href="#" class="btn btn-default">更多内容</a>
</p>
</div>
</div> 
//100%全屏,没有圆角
<div class="jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>
这是一个学习性的网站!
</p>
<p>
<a href="#" class="btn btn-default">更多内容</a>
</p>
</div>
</div>

二.页头组件

//增加一些空间
<div class="page-header">
<h1>大标题 <small>小标题</small></h1>
</div>

三.缩略图组件

//缩略图配合响应式
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
</div>
</div> 
//自定义内容
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href="#" class="btn btn-default">进入</a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href="#" class="btn btn-default">进入</a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href="#" class="btn btn-default">进入</a>
</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4">
<div class="thumbnail">
<img src="img/pic.png" alt="">
<div class="caption">
<h3>图文并茂</h3>
<p>
这是一个图片结合文字的缩略图
</p>
<p>
<a href="#" class="btn btn-default">进入</a>
</p>
</div>
</div>
</div>
</div>
</div>

四.警告框组件

警告框组件是一组预定义消息。

//基本警告框
<div class="alert alert-success">Bootstrap</div>
<div class="alert alert-info">Bootstrap</div>
<div class="alert alert-warning">Bootstrap</div>
<div class="alert alert-danger">Bootstrap</div> 
//带关闭的警告框
<div class="alert alert-success">
Bootstrap
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div> 
//自动适配的超链接
<div class="alert alert-success">
Bootstrap,请到官网 <a href="#" class="alert-link">下载</a>
</div>

以上内容是小编给大家介绍的BootStrap组件第十章之巨幕页头缩略图和警告框组件,希望对大家有所帮助!

Javascript 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 #Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 #Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 #Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 #Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 #Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 #Javascript
下雪了 javascript实现雪花飞舞
Aug 02 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
javascript基本语法分析说明
2008/06/15 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Vue的Options用法说明
2020/08/14 Javascript
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
新手学python应该下哪个版本
2020/06/11 Python
python2和python3哪个使用率高
2020/06/23 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
幼师自荐信范文
2013/10/06 职场文书
计算机应用专业推荐信
2013/11/13 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
会计专业导师推荐信
2014/03/08 职场文书
新闻学专业求职信
2014/07/28 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
js 实现验证码输入框示例详解
2022/09/23 Javascript