Bootstrap 教程
Bootstrap 简介
Bootstrap 环境安装
Bootstrap CSS 概览
Bootstrap 网格系统
Bootstrap 排版
Bootstrap 代码
Bootstrap 表格
Bootstrap 表单
Bootstrap 按钮
Bootstrap 图片
Bootstrap 辅助类
Bootstrap 响应式实用工具
Bootstrap 字体图标
Bootstrap 下拉菜单
Bootstrap 按钮组
Bootstrap 按钮下拉菜单
Bootstrap 输入框组
Bootstrap 导航元素
Bootstrap 导航栏
Bootstrap 面包屑导航
Bootstrap 分页
Bootstrap 标签
Bootstrap 徽章
Bootstrap 超大屏幕
Bootstrap 页面标题
Bootstrap 缩略图
Bootstrap 警告
Bootstrap 进度条
Bootstrap 多媒体对象
Bootstrap 列表组
Bootstrap 面板
Bootstrap Well
Bootstrap 插件概览
Bootstrap 过渡效果
Bootstrap 模态框
Bootstrap 下拉菜单
Bootstrap 滚动监听
Bootstrap 标签页
Bootstrap 提示工具
Bootstrap 弹出框
Bootstrap 警告框
Bootstrap 按钮
Bootstrap 折叠
Bootstrap 轮播
Bootstrap 附加导航
Bootstrap UI 编辑器
Bootstrap v2 教程
Bootstrap HTML编码规范
Bootstrap CSS编码规范
Bootstrap 教程
Bootstrap CSS
Bootstrap 布局组件
Bootstrap 插件
Bootstrap 中文手册
本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
创建一个带有 class .jumbotron. 的容器 <div>。
除了更大的 <h1>，字体粗细 font-weight 被减为 200px。
下面的实例演示了这点：
实例
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 超大屏幕（Jumbotron）</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/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="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
相关视频
24小时阅读榜
精品课程
独孤九贱(2)_CSS视频教程
共22课时
24.3万人学习
独孤九贱(3)_JavaScript视频教程
共28课时
36.2万人学习
独孤九贱(4)_PHP视频教程
共89课时
133.1万人学习
热门下载
phpStudy 2018最新版
集成PHP7，16种组合，超全大合集
下载
vc9-vc14（32+64位）运行库合集（链接在下方）
phpStudy安装所需运行库集合下载
下载
php程序员工具箱完整版
程序员工具箱 v1.0 php集成环境
下载
SublimeText3汉化版
中文版，非常好用
下载
Notepad++ Windows版
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
phpStudy V8.1（Win64位）（已支持php8）
Win64位，支持php多版本共存
下载