编程 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 相关文章推荐

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 数码科技