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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
简单了解JavaScript sort方法
Nov 25 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
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python3实现windows下同名进程监控
2018/06/21 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
日语专业个人的求职信
2013/12/03 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
实习生岗位职责
2014/04/12 职场文书
升学宴演讲稿
2014/09/01 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
python 镜像环境搭建总结
2022/09/23 Python