编程 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实现表格数据的动态添加与统计的代码

Jan 31 Javascript

jQuery中的height innerHeight outerHeight区别示例介绍

Jun 15 Javascript

javascript中FOREACH数组方法使用示例

Mar 01 Javascript

JS实现获取剪贴板内容的方法

Jun 21 Javascript

使用jQuery5分钟快速搞定双色表格的简单实例

Aug 08 Javascript

AngularJS入门教程之路由与多视图详解

Aug 19 Javascript

js 博客内容进度插件详解

Feb 19 Javascript

jQuery图片瀑布流的简单实现代码

Mar 15 Javascript

mpvue小程序循环动画开启暂停的实现方法

May 15 Javascript

JavaScript canvas绘制圆弧与圆形

Feb 18 Javascript

Vue实现Layui的集成方法步骤

Apr 10 Javascript

vue中el-input绑定键盘按键(按键修饰符)

Jul 22 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

PHP4和PHP5共存于一系统

2006/11/17 PHP

php使用MySQL保存session会话的方法

2015/06/26 PHP

如何利用http协议发布博客园博文评论

2015/08/03 PHP

PHP入门教程之图像处理技巧分析

2016/09/11 PHP

Ctrl+Enter提交内容信息

2006/06/26 Javascript

JavaScript子窗口ModalDialog中操作父窗口对像

2012/12/11 Javascript

文本域中换行符的替换示例

2014/03/04 Javascript

基于JS判断iframe是否加载成功的方法(多种浏览器）

2016/05/13 Javascript

JavaScript跨域调用基于JSON的RESTful API

2016/07/09 Javascript

js接收并转化Java中的数组对象的方法

2016/08/11 Javascript

NodeJS使用formidable实现文件上传

2016/10/27 NodeJs

javascript中闭包概念与用法深入理解

2016/12/15 Javascript

JS设计模式之访问者模式定义与用法分析

2018/02/05 Javascript

Node.js如何对SQLite的async/await封装详解

2019/02/14 Javascript

node微信开发之获取access_token+自定义菜单

2019/03/17 Javascript

JQuery样式操作、click事件以及索引值-选项卡应用示例

2019/05/14 jQuery

浅谈vue 锚点指令v-anchor的使用

2019/11/13 Javascript

vue 解决addRoutes多次添加路由重复的操作

2020/08/04 Javascript

微信小程序实现可长按移动控件

2020/11/01 Javascript

JavaScript实现无限轮播效果

2020/11/19 Javascript

[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz

2014/07/13 DOTA

Python中使用不同编码读写txt文件详解

2015/05/28 Python

Python实现运行其他程序的四种方式实例分析

2017/08/17 Python

几种实用的pythonic语法实例代码

2018/02/24 Python

PyTorch的深度学习入门教程之构建神经网络

2019/06/27 Python

在主流系统之上安装Pygame的方法

2020/05/20 Python

python获取整个网页源码的方法

2020/08/03 Python

Python操作word文档插入图片和表格的实例演示

2020/10/25 Python

html5调用app分享功能示例（WebViewJavascriptBridge）

2018/03/21 HTML / CSS

外贸主管求职简历的自我评价

2013/10/23 职场文书

简历上的自我评价怎么写

2014/01/28 职场文书

师德个人剖析材料

2014/02/02 职场文书

《青海高原一株柳》教学反思

2014/04/25 职场文书

服务整改报告

2014/11/06 职场文书

申报优秀教师材料

2014/12/16 职场文书

2015年建筑工程工作总结

2015/05/13 职场文书