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


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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python学习笔记(二)基础语法
2014/06/06 Python
Python实现图片转字符画的示例
2017/08/22 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
使用python绘制二维图形示例
2019/11/22 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
园林施工员岗位职责
2013/12/11 职场文书
自我鉴定写作要点
2014/01/17 职场文书
幼儿园开学寄语
2014/04/03 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
综治工作心得体会
2014/09/11 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2014年环保局工作总结
2014/12/11 职场文书
模范教师材料大全
2014/12/16 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
创业计划书之干洗店
2019/09/10 职场文书