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>

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

Javascript 相关文章推荐
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
JS正则表达式验证密码强度
Mar 18 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
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
js实现数组转换成json
2015/06/26 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python的命名规则知识点总结
2019/10/04 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
综合实践活动方案
2014/02/14 职场文书
超市理货员岗位职责
2014/07/04 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
信用卡工资证明范本
2015/06/19 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技