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


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操作Cookies的实现代码
Oct 09 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
js自定义回调函数
Dec 13 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php中adodbzip类实例
2014/12/08 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js取得url地址参数实例
2013/02/22 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
python中kmeans聚类实现代码
2018/02/23 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Django-migrate报错问题解决方案
2020/04/21 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
new修饰符是起什么作用
2015/06/28 面试题
宿舍使用违章电器检讨书
2014/01/12 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
任命书模板
2014/06/04 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
电影地道战观后感
2015/06/04 职场文书
初中生物教学随笔
2015/08/15 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技