Bootstrap巨幕页头缩略图和警告框组件

学习要点:

  1.巨幕组件

  2.页头组件

  3.缩略图组件

  4.警告框组件

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

一.巨幕组件

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

在固定的范围内,有圆角,整个巨幕以最大宽度为1140px显示

container样式class类,写在<div>里,设置固定布局div最大宽度为1140px(Bootstrap)
jumbotron样式class类,写在<div>里,设置巨幕组件div样式,展示网站的关键性区域(Bootstrap)

<div class="container">
<div class="jumbotron">
<h2>网站标题</h2>
<p>这是一个学习性的网站!</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>

100%全屏,没有圆角,巨幕最外层以100%宽度显示,巨幕内区域以最大宽度为1140px显示【最流行做法】

<div class="jumbotron">
<div class="container">
<h2>网站标题</h2>
<p>这是一个学习性的网站!</p>
<p><a href="#" class="btn btn-default">更多内容</a></p>
</div>
</div>

二.页头组件

增加一些空间

page-header样式class类,写在页头区域元素里,设置页头区域样式(Bootstrap)

<div class="page-header">
<h1>大标题
<small>小标题</small>
</h1>
</div>

三.缩略图组件

缩略图配合响应式

thumbnail样式class类,写在<img>外层<div>元素里,设置响应式图片区域(Bootstrap)

<div class="container">                                 <!--布局固定宽度样式,最大宽度1140-->
<div class="row"> <!--设置一行响应式删格行,为12列删格-->
<div class="col-xs-6 col-md-3 col-sm-4"> <!--col-xs-6(手机)表示屏幕小于768所占6列删格,也就是一行的一半,就会显示两列图片-->
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4"> <!--col-md-3(中等屏幕)表示屏幕大于或等于992所占3列删格,也就是显示4列图片-->
<div class="thumbnail">
<img src="img/pic.png" alt="">
</div>
</div>
<div class="col-xs-6 col-md-3 col-sm-4"> <!--col-sm-4(平板)表示屏幕大于或等于768所占4列删格,也就是显示3列图片-->
<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>

屏幕大于或等于992


屏幕大于或等于768


屏幕小于768

响应式微缩图,图文并茂自定义内容

caption样式class类,写在响应式图片区域<div>里面与img同级的<div>元素里,设置响应式图片区域里的图文内容样式(Bootstrap)

<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>

屏幕大于或等于992


屏幕大于或等于768


屏幕小于768

四.警告框组件

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

alert样式class类,写在<div>元素里,声明一个警告信息框(Bootstrap)
alert-success样式class类,写在<div>元素里,设置警告信息框绿色(Bootstrap)
alert-info样式class类,写在<div>元素里,设置警告信息框蓝色(Bootstrap)
alert-warning样式class类,写在<div>元素里,设置警告信息框橙色(Bootstrap)
alert-danger样式class类,写在<div>元素里,设置警告信息框红色(Bootstrap)

<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>

带关闭的警告框

close样式class类,写在警告信息框里的<button>元素里,给警告信息框设置一个按钮关闭样式(Bootstrap)
data-dismiss="alert"事件,写在警告信息框里的<button>元素里,点击按钮关闭警告信息框(Bootstrap)

<div class="alert alert-success">
Bootstrap
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
</div>

警告框自动适配的超链接

alert-link样式class类,写在警告信息框里的<a>元素里,设置警告框里的超链接样式,自动适配警告框(Bootstrap)

<div class="alert alert-success">
Bootstrap,请到官网 <a href="#" class="alert-link">下载</a>
<button type="button" class="close" data-dismiss="alert">
<span>&times;</span>
</button>
</div>

第二百四十节,Bootstrap巨幕页头缩略图和警告框组件的更多相关文章

  1. Bootstrap 巨幕页头缩略图和警告框组件

    一.巨幕组件 //在固定的范围内,有圆角 <div class="container"> <div class="jumbotron"> ...

  2. Bootstrap(9) 巨幕页头缩略图和警告框组件

    一.巨幕组件巨幕组件主要是展示网站的关键性区域.//在固定的范围内,有圆角 <div class="container"> <div class="ju ...

  3. 第二百四十九节,Bootstrap附加导航插件

    第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一.附加导航 注意:此插件要使用 bootstrap3.0. ...

  4. 第二百四十一节,Bootstrap进度条媒体对象和 Well 组件

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

  5. 第三百四十节,Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器

    第三百四十节,Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器 css选择器 1. 2. 3.  ::attr()获取元素属性,css选择器 ::text获取标签文本 举例: extr ...

  6. 第二百一十节,jQuery EasyUI,SearchBox(搜索框)组件

    jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...

  7. 第二百四十五节,Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  8. 第二百四十六节,Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  9. 第二百四十三节,Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...

随机推荐

  1. Linux命令之编辑

    vi是终端命令行里功能最强的文本编辑器了,但眼下须要用到的仅仅是文本编辑功能.与GCC.make等工具的整合应用如今还不须要,所以操作难度不大,习惯就好. Linux发行版所带的一般不是vi,而是vi ...

  2. sip

    INVITE sip:10010101402@10.7.36.70:5060 SIP/2.0 Via: SIP/2.0/UDP 10.7.36.250:5060;rport;branch=z9hG4b ...

  3. js中求水仙花数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Android Training - Volley(Lesson 0 - 序言)

    写在http://hukai.me/blog/android-training-volley-index/

  5. Github 入门基本操作

    翻译自:https://guides.github.com/activities/hello-world/ 文章概述: 什么是GitHub? 创建一个存储库 创建一个分支 做出承诺 打开拉请求 合并拉 ...

  6. Linux命令-网络命令:traceroute

    首先需要设置VM里面的linux系统能够上网.菜单项->虚拟机->设置,选择NAT模式 菜单项->编辑->虚拟网络编辑器->VMnet8 NAT模式->NAT设置, ...

  7. Android推送方案

    一. 常见的推送原理: 1)轮询(Pull)方式:应用程序应当阶段性的与服务器进行连接并查询是否有新的消息到达,你必须自己实现与服务器之间的通信,例如消息排队等.而且你还要考虑轮询的频率,如果太慢可能 ...

  8. sass 的学习

    导入scss @import "../../sass/variables.scss"; @import "../../sass/helper.scss"; @m ...

  9. Javascript实现真实字符串剩余字数提示

    //文本框剩余字数提示(字符大小) function textLimitCheckSj(thisArea, maxLength, SpanId) { var str = thisArea.value; ...

  10. 点滴积累【other】---win2003 service pack2 IIS 无法复制CONVLOG.EXE CONVLOG.EX_(转载)

    在安装的时候出现一个错误提示“安装程序无法复制文件CONVLOG.EX_”,上网找了下资料,说是在运行-中输入”esentutl /p %windir%/security/database/seced ...