编程 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.validate使用攻略第五步正则验证

Jul 01 Javascript

对setInterval在火狐和chrome切换标签产生奇怪的效果之探索，与解决方案！

Oct 29 Javascript

JavaScript NodeTree导航栏(菜单项JSON类型/自制)

Feb 01 Javascript

一个js控制的导航菜单实例代码

Dec 03 Javascript

extjs 分页使用jsp传递数据示例

Jul 29 Javascript

解决AjaxFileupload 上传时会出现连接重置的问题

Jul 07 Javascript

Vue基本使用之对象提供的属性功能

Apr 30 Javascript

JS使用new操作符创建对象的方法分析

May 30 Javascript

vue css 引入asstes中的图片无法显示的四种解决方法

Mar 16 Javascript

小程序实现简单语音聊天的示例代码

Jul 24 Javascript

vue实现选中效果

Oct 07 Javascript

JS常用跨域方法实现原理解析

Dec 09 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

PHP 模板高级篇总结

2006/12/21 PHP

mantis安装、配置和使用中的问题小结

2014/07/14 PHP

使用URL传输SESSION信息

2015/07/14 PHP

php使用lua+redis实现限流，计数器模式，令牌桶模式

2019/04/04 PHP

基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）

2011/03/28 Javascript

浅谈Javascript 数组与字典

2015/01/29 Javascript

jQuery延迟加载图片插件Lazy Load使用指南

2015/03/25 Javascript

Angular的MVC和作用域

2016/12/26 Javascript

js实现漫天星星效果

2017/01/19 Javascript

jQuery代码实现实时获取时间

2017/01/29 Javascript

JavaScript与JQUERY获取元素的宽、高和位置

2017/02/26 Javascript

JavaScript实现简单的文本逐字打印效果示例

2018/04/12 Javascript

angular中两种表单的区别(响应式和模板驱动表单)

2018/12/06 Javascript

jQuery实现的简单歌词滚动功能示例

2019/01/07 jQuery

JavaScript定时器设置、使用与倒计时案例详解

2019/07/08 Javascript

vue element upload实现图片本地预览

2019/08/20 Javascript

Node.js文本文件BOM头的去除方法

2020/11/22 Javascript

[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况

2014/07/14 DOTA

[01:09]模型精美，特效酷炫！TI9不朽宝藏Ⅰ鉴赏

2019/05/10 DOTA

[22:07]DOTA2-DPC中国联赛正赛 iG vs Magma 选手采访

2021/03/11 DOTA

Python实现matplotlib显示中文的方法详解

2018/02/06 Python

Python中%是什么意思？python中百分号如何使用？

2018/03/20 Python

python list元素为tuple时的排序方法

2018/04/18 Python

Python多线程threading join和守护线程setDeamon原理详解

2020/03/18 Python

python中的错误如何查看

2020/07/08 Python

HTML5 Video/Audio播放本地文件示例介绍

2013/11/18 HTML / CSS

H5 meta小结(前端必看篇)

2016/08/24 HTML / CSS

精伦电子Java笔试题

2013/01/16 面试题

Lucene推荐的分页方式是什么？

2015/12/07 面试题

高中语文教学反思

2014/01/16 职场文书

2015年精神文明建设工作总结

2015/04/21 职场文书

职工食堂管理制度

2015/08/06 职场文书

创业计划书之宠物店

2019/09/19 职场文书

详解非极大值抑制算法之Python实现

2021/06/28 Python

python之PySide2安装使用及QT Designer UI设计案例教程

2021/07/26 Python

Python用tkinter实现自定义记事本的方法详解

2022/03/31 Python