Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
- 创建一个带有 class .jumbotron. 的容器 <div>。
- 除了更大的 <h1>，字体粗细 font-weight 被减为 200px。
下面的实例演示了这点：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="container">
<div class="jumbotron">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div> </body>
</html>
结果如下所示：
为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class，如下面的实例所示：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="jumbotron">
<div class="container">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div> </body>
</html>
结果如下所示：
Bootstrap <基础二十二>超大屏幕（Jumbotron）的更多相关文章
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap入门（二十二）组件16：列表组
Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...
- Bootstrap入门（十二）组件6：导航标签页
Bootstrap入门(十二)组件6:导航标签页 1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单 先引入本地的CSS文件和JS文件(注:1. ...
- 二十二. Python基础(22)--继承
二十二. Python基础(22)--继承 ● 知识框架 ● 继承关系中self的指向 当一个对象调用一个方法时,这个方法的self形参会指向这个对象 class A: def get(s ...
- JAVA基础知识总结：一到二十二全部总结
>一: 一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令 常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器( ...
- Java 多线程基础（十二）生产者与消费者
Java 多线程基础(十二)生产者与消费者 一.生产者与消费者模型 生产者与消费者问题是个非常典型的多线程问题,涉及到的对象包括“生产者”.“消费者”.“仓库”和“产品”.他们之间的关系如下: ①.生 ...
- VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池
VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池 在上一节我们创建了完整克隆的自动专有桌面池,在创建过程比较缓慢,这次我们将学习创建Vi ...
- 备忘录模式 Memento 快照模式 标记Token模式 行为型 设计模式（二十二）
备忘录模式 Memento 沿着脚印,走过你来时的路,回到原点. 苦海翻起爱恨 在世间难逃避命运 相亲竟不可接近 或我应该相信是缘份 一首<一生所爱>触动了多少 ...
随机推荐
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...
- push_back模式工作
自己决心今天做一个 xxx项目,写完xxx功能. 早晨9点多张三说:“A项目有一个 bug要修复”,估计十分钟就修复了,然后放弃手头项目去搞.修复这个bug的时候,发现这个A项目有些代码还有可以优化的 ...
- Cheatsheet: 2016 08.01 ~ 08.31
.NET Getting Started with ASP.NET Core and VS Code Coding Standard Best Practices In C# Wire – Writi ...
- Kanzi编程基础2 - Kanzi节点读取和属性设置
UI设计师在Kanzi studio把Kanzi的节点做好后,就要编码读取这些节点并根据实际功能去控制刷新它. Kanzi读取节点的api发生过很多次变化,从2.7.2.8到3.0,每次变化都比较大, ...
- php : Warning: strftime(): It is not safe to rely on the system's timezone settings.
使用 Smarty 的时候出现这种警告: Warning: strftime(): It is not safe to rely on the system's timezone settings. ...
- 译\Node.js应用的持续部署
Node.js应用的持续部署 翻译前 翻译自:https://blog.risingstack.com/continuous-deployment-of-node-js-applications/ 正 ...
- 在ionic/cordova中使用百度地图插件
在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...
- FFmpeg官方文档之————先进音频编码（AAC）
先进音频编码(AAC)的后继格式到MP3,和以MPEG-4部分3(ISO / IEC 14496-3)被定义.它通常用于MP4容器格式; 对于音乐,通常使用.m4a扩展名.第二最常见的用途是在MKV( ...
- MongoDB简介与增删改查
一.简介 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB 将数据存储为一个文档,数据 ...
- 含有多个main方法的jar包的运行方式(适用于用java写的工具类)
如果一个jar中含有多个主程序,而你没有配置默认主程序,或者想要运行指定主程序,则可以通过如下命令执行: Java -cp example03-1.0-SNAPSHOT.jar cn.vicky.ex ...