Bootstrap <基础二十二>超大屏幕（Jumbotron）

时间：2022-09-11 18:19:13

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>

结果如下所示：

Bootstrap <基础二十二>超大屏幕（Jumbotron）

为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .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 <基础二十二>超大屏幕（Jumbotron）的更多相关文章

  1. Bootstrap &lt&semi;基础三十二&gt&semi;模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  2. Bootstrap &lt&semi;基础三十&gt&semi;Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  3. Bootstrap入门（二十二）组件16：列表组

    Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...

  4. Bootstrap入门（十二）组件6：导航标签页

    Bootstrap入门(十二)组件6:导航标签页   1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单   先引入本地的CSS文件和JS文件(注:1. ...

  5. 二十二&period; Python基础&lpar;22&rpar;--继承

    二十二. Python基础(22)--继承 ● 知识框架   ● 继承关系中self的指向 当一个对象调用一个方法时,这个方法的self形参会指向这个对象 class A:     def get(s ...

  6. JAVA基础知识总结：一到二十二全部总结

    >一: 一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令 常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器( ...

  7. Java 多线程基础（十二）生产者与消费者

    Java 多线程基础(十二)生产者与消费者 一.生产者与消费者模型 生产者与消费者问题是个非常典型的多线程问题,涉及到的对象包括“生产者”.“消费者”.“仓库”和“产品”.他们之间的关系如下: ①.生 ...

  8. VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池

    VMware vSphere 服务器虚拟化之二十二桌面虚拟化之创建View Composer链接克隆的虚拟桌面池 在上一节我们创建了完整克隆的自动专有桌面池,在创建过程比较缓慢,这次我们将学习创建Vi ...

  9. 备忘录模式 Memento 快照模式 标记Token模式 行为型 设计模式（二十二）

    备忘录模式 Memento   沿着脚印,走过你来时的路,回到原点.     苦海翻起爱恨   在世间难逃避命运   相亲竟不可接近   或我应该相信是缘份   一首<一生所爱>触动了多少 ...

随机推荐

  1. JAVA程序操作hbase的Maven配置pom&period;xml文件

    由于工作需要,用到Java连接Hbase读写数据.原来的方式是直接将依赖的jar包全部下载下来,然后工程里面引用. 现想重构下,改为使用Maven管理,遇到了各种坑,各种不好使,特总结下. <d ...

  2. impdp导入时卡死分析方法

    来源于: http://blog.csdn.net/yfleng2002/article/details/7973997 http://www.cnblogs.com/songling/archive ...

  3. asp&period;net 文件批量移动重命名

    最近闲时写了个批量移动重命名文件的工具 点击下载工具

  4. iOS开发--应用设置及用户默认设置——转载

    [链接]iOS开发--应用设置及用户默认设置[1.bundlehttp://www.jianshu.com/p/6f2913f6b218 在iphone里面,应用都会在“设置”里面有个专属的应用设置, ...

  5. RESTful API -备

    网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致AP ...

  6. ANDROID定义自己的观点——模仿瀑布布局（源代码）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 简单介绍: 在自己定义view的时候,事实上非常easy,仅仅须要知道3步骤: 1.測量- ...

  7. Java 读者写者问题

    实验存档.V 允许好几个人同时读,但是不允许在有人读的时候写,以及同一时间只能有一个人在写. 读者.java: package operating.entity.readerwriter; impor ...

  8. iOS中 UIProgressView 技术分享

    UIProgressView 继承自UIView,用来显示进度的,如音乐,视频的缓冲进度,文件的上传下载进度等.让用户知道当前操作完成了多少,离操作结束还有多远 AppDelegate.m Progr ...

  9. 一个网站SQL注入的案例

    网站的页面提交参数做了md5转换,而且参数会带入两个SQL语句中执行. 注入是肯定存在的,但是SQLMAP怎么都跑不出来(可能原因是其中有个SQL语句总是报错). 尝试手工,发现 order by 报 ...

  10. 机器学习---文本特征提取之词袋模型（Machine Learning Text Feature Extraction Bag of Words）

    假设有一段文本:"I have a cat, his name is Huzihu. Huzihu is really cute and friendly. We are good frie ...

相关文章