编程 Javascript

Bootstrap CSS组件之大屏幕展播

Posted in Javascript onDecember 17, 2016

在设计网页布局的时候，经常会有大屏内容的显示jumbotron

顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。

源码中可以看出：

如果jumbotron放在container样式内，则显示圆角;如果不放在里边，则不会显示圆角。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap从3.0版本开始全面支持移动平台，贯彻移动先行宗旨 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>
  <!-- 超大屏幕jumbotron：
   1.创建一个带有 class .jumbotron. 的容器 <div>
   2.除了更大的 <h1>，字体粗细 font-weight 被减为 200-->
  <div class="jumbotron">
   <h1>Hello,world!</h1>
   <p>This is a simple hero unit.</p>
   <p><button class="btn btn-primary">Learn more</button></p>
  </div>

 <!-- bootstrap是基于jQuery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap CSS组件之大屏幕展播

- Author -

github_34514750

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS根据年月获得当月天数的实现代码

Jul 03 Javascript

浅谈JavaScript Array对象

Dec 29 Javascript

js实现有时间限制消失的图片方法

Feb 27 Javascript

js实现动画特效的文字链接鼠标悬停提示的方法

Mar 02 Javascript

JS实现改变HTML上文字颜色和内容的方法

Dec 30 Javascript

JavaScript原生节点操作小结

Jan 17 Javascript

JS中传递参数的几种不同方法比较

Jan 20 Javascript

vue2.0实现倒计时的插件(时间戳刷新跳转都不影响)

Mar 30 Javascript

在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

Aug 06 Javascript

JS复杂判断的更优雅写法代码详解

Nov 07 Javascript

基于Vue的侧边目录组件的实现

Feb 05 Javascript

vue webpack build资源相对路径的问题及解决方法

Jun 04 Javascript

Bootstrap CSS布局之图像

Dec 17 #Javascript

Bootstrap CSS布局之按钮

Dec 17 #Javascript

Bootstrap CSS布局之表单

Dec 17 #Javascript

Bootstrap CSS布局之表格

Dec 17 #Javascript

Bootstrap CSS布局之代码

Dec 17 #Javascript

基于js实现二级下拉联动

Dec 17 #Javascript

文件上传的几个示例分享【推荐】

Dec 16 #Javascript

You might like

基于mysql的论坛（6）

2006/10/09 PHP

PHP生成随机用户名和密码的实现代码

2013/02/27 PHP

PHP异常处理定义与使用方法分析

2017/07/25 PHP

PDO::errorCode讲解

2019/01/28 PHP

PHP使用gearman进行异步的邮件或短信发送操作详解

2020/02/27 PHP

PHP实现倒计时功能

2020/11/16 PHP

会自动逐行上升的文本框

2006/06/30 Javascript

jquery禁止输入数字以外的字符的示例(纯数字验证码)

2014/04/10 Javascript

ExtJS4利根据登录后不同的角色分配不同的树形菜单

2014/05/02 Javascript

在AngularJS中使用AJAX的方法

2015/06/17 Javascript

基于jQuery倾斜打开侧边栏菜单特效代码

2015/09/15 Javascript

实现非常简单的js双向数据绑定

2015/11/06 Javascript

JS实现点击登录弹出窗口同时背景色渐变动画效果

2016/03/25 Javascript

jquery拖动层效果插件用法实例分析(附demo源码)

2016/04/28 Javascript

微信小程序图表插件wx-charts用法实例详解

2019/05/20 Javascript

Vue3.x源码调试的实现方法

2019/10/13 Javascript

微信小程序完美解决scroll-view高度自适应问题的方法

2020/08/08 Javascript

antd table按表格里的日期去排序操作

2020/11/17 Javascript

flask中使用SQLAlchemy进行辅助开发的代码

2013/02/10 Python

python创建和使用字典实例详解

2013/11/01 Python

python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法

2015/05/15 Python

Python正则表达式使用经典实例

2016/06/21 Python

python高效过滤出文件夹下指定文件名结尾的文件实例

2018/10/21 Python

python使用ddt过程中遇到的问题及解决方案【推荐】

2018/10/29 Python

python实现函数极小值

2019/07/10 Python

tensorflow模型保存、加载之变量重命名实例

2020/01/21 Python

Python pickle模块常用方法代码实例

2020/10/10 Python

CSS3实现div从下往上滑入滑出效果示例

2020/04/28 HTML / CSS

俄罗斯最大的灯具网站：Fandeco

2020/03/14 全球购物

求职信内容考虑哪几点

2013/10/05 职场文书

腾讯广告词

2014/03/19 职场文书

2014年银行信贷员工作总结

2014/12/08 职场文书

2015年大学元旦晚会活动策划书

2014/12/09 职场文书

手机销售员岗位职责

2015/04/11 职场文书

八年级语文教学反思

2016/03/03 职场文书

高端收音机+蓝牙音箱，JBL TUNER FM带收音蓝牙音箱评测

2021/04/24 无线电