Bootstrap <基础二十二>超大屏幕(Jumbotron)
2024-10-11 22:02:58
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>
结果如下所示:
最新文章
- 关于url中的#-----hash
- deep learning on object detection
- JavaScript Patterns 6.2 Expected Outcome When Using Classical Inheritance
- HIBERNATE一对一双向外键联合主键关联
- input 不支持HTML5的placeholder属性
- XCode 7上传遇到ERROR ITMS-90535 Unexpected CFBundleExecutable Key. 的解决办法
- openFace 人脸识别框架测试
- 进程间通信之利用CreateFilemapping()
- EOS 上线前,先搞懂这两个基本概念
- 爬虫系列二(数据清洗--->;bs4解析数据)
- 所有Windows7下游戏的全屏问题
- js自定制周期函数
- js冲刺一下
- ACCESS删除datagridview和数据库中的一条数据,同时更新显示的方法源码
- 001Java输入、eclipse快捷键
- [转]MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite
- BZOJ 1109 [POI2007]堆积木Klo(树状数组)
- sds(简单动态字符串) 内存预分配优化策略
- Java微信公众平台开发(十三)--微信JSSDK中Config配置
- linux学习(二) -- ubuntu下lnmp环境的配置
热门文章
- Oracle(创建index)
- Ubuntu install g++
- mac上的git环境配置
- Javascript中的队列
- Nginx+Tomcat发布时不间断服务的提供
- python与C++交互
- 关于composer安装插件时候提示找不到fxp插件时候的解决办法
- an interview question(4)
- /boot/grub/device.map【设备映射】
- TCP/IP协议学习(四) 基于C# Socket的Web服务器---静态资源处理