Bootstrap 学习之 (十三) ------ 巨幕 ,页头,缩略图
来源:互联网 发布:淘宝网中年秋冬连衣裙 编辑:程序博客网 时间:2024/04/27 19:14
Bootstrap 超大屏幕(Jumbotron)
本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:
- 创建一个带有 class .jumbotron. 的容器 <div>。
- 除了更大的 <h1>,字体粗细 font-weight 被减为 200px。
<span style="font-size:18px;"><!DOCTYPE html><html><head> <title>BootstrapTest</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="jumbotron"> <h1>欢迎登陆页面!</h1> <p>这是一个超大屏幕(Jumbotron)的实例。</p> <p><a class="btn btn-primary btn-lg" role="button"> 学习更多</a> </p></div></body></html></span>
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,请把此组件放在所有 .container
元素的外面,并在组件内部添加一个 .container
元素。
Bootstrap 页面标题(Page Header)
页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。如需使用页面标题(Page Header),请把您的标题放置在带有 class .page-header的 <div> 中.
Bootstrap 缩略图
本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下:
- 在图像周围添加带有 class .thumbnail 的 <a> 标签。
- 这会添加四个像素的内边距(padding)和一个灰色的边框。
- 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
添加自定义的内容
现在我们有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:
- 把带有 class .thumbnail 的 <a> 标签改为 <div>。
- 在该 <div> 内,您可以添加任何您想要添加的东西。由于这是一个 <div>,我们可以使用默认的基于 span 的命名规则来调整大小。
- 如果您想要给多个图像进行分组,请把它们放置在一个无序列表中,且每个列表项向左浮动。
<!DOCTYPE html><html><head> <title>BootstrapTest</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="img/bg_1.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="img/bg_1.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="img/bg_1.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src="img/bg_1.jpg" alt="通用的占位符缩略图"> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div> </div></div></body></html>
结果如下:
0 0
- Bootstrap 学习之 (十三) ------ 巨幕 ,页头,缩略图
- Bootstrap组件之页头、缩略图
- BootStrap页头和缩略图
- Bootstrap组件学习笔记(六)——页头、缩略图和警告框
- Bootstrap CSS——页头与缩略图
- Bootstrap学习:缩略图
- bootstrap学习21--缩略图
- Bootstrap学习总结笔记(13)-- 基本组件之缩略图
- bootstrap系列之十三导航
- bootstrap-分页/标签/徽章/巨幕/页头
- BootStrap 缩略图
- bootstrap-缩略图
- Bootstrap缩略图
- Bootstrap 缩略图
- Bootstrap 缩略图
- Bootstrap缩略图
- bootstrap缩略图
- BootStrap 页头
- Redis系列~集群报错Node is not empty(十九)
- java 实现注册时发送激活邮件并激活
- Android开发中混淆代码总结
- 2016中国互联网+医疗行业大会
- Django笔记 Managers模块
- Bootstrap 学习之 (十三) ------ 巨幕 ,页头,缩略图
- linuxmint 和raspberry下安装编译pjsip
- ARM-ELF文件格式与GNU ARM Linker机制
- TCP Socket编程
- stm32f105外部晶振由8MHz调整到12MHz库的修改
- singleton 单例模式
- lucene.NET详细使用与优化详解
- Spring中Bean的生成过程
- Web Service Load Test Strategies