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


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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
js实现百度搜索提示框
Feb 05 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
php&amp;java(二)
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
理解AngularJs指令
2015/12/10 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
Python网页解析器使用实例详解
2020/05/30 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
小车司机岗位职责
2013/11/25 职场文书
学历公证书范本
2014/04/09 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
公司会议开幕词
2015/01/29 职场文书