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

经常用的图片在容器中的水平垂直居中实例

Jun 10 Javascript

jquery下onpropertychange事件的绑定方法

Aug 01 Javascript

基于jquery的DIV随滚动条滚动而滚动的代码

Jul 20 Javascript

jQuery旋转插件jqueryrotate用法详解

Oct 13 Javascript

Bootstrap CSS组件之按钮组(btn-group)

Dec 17 Javascript

Vuex之理解Store的用法

Apr 19 Javascript

JS操作时间 - UNIX时间戳的简单介绍(必看篇)

Aug 16 Javascript

Vue filter介绍及其使用详解

Oct 21 Javascript

基于webpack4.X从零搭建React脚手架的方法步骤

Dec 23 Javascript

js中怎么判断两个字符串相等的实例

Jan 17 Javascript

富文本编辑器vue2-editor实现全屏功能

May 26 Javascript

DatePickerDialog 自定义样式及使用全解

Jul 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

上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理

2021/03/02 无线电

?算你??的 PHP 程式大小

2006/12/06 PHP

php中动态变量用法实例

2015/06/10 PHP

[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法

2017/08/31 PHP

JavaScript框架(iframe)操作总结

2014/04/16 Javascript

jquery中ajax跨域方法实例分析

2015/12/18 Javascript

浅析jquery如何判断滚动条滚到页面底部并执行事件

2016/04/29 Javascript

JS自定义函数对web前端上传的文件进行类型大小判断

2016/10/19 Javascript

JavaScript简单生成 N~M 之间随机数的方法

2017/01/13 Javascript

js仿淘宝商品放大预览功能

2017/03/15 Javascript

JS中mouseup事件丢失的原因与解决办法

2017/06/14 Javascript

AngularJS实现表单验证功能详解

2017/10/12 Javascript

解决vue语法会有延迟加载显现{{xxx}}的问题

2019/11/14 Javascript

JS在Array数组中按指定位置删除或添加元素对象方法示例

2019/11/19 Javascript

小程序按钮避免多次调用接口和点击方案实现(不用showLoading)

2020/04/15 Javascript

利用 JavaScript 实现并发控制的示例代码

2020/12/31 Javascript

[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片

2015/02/07 DOTA

Python爬取Coursera课程资源的详细过程

2014/11/04 Python

详解python 字符串和日期之间转换 StringAndDate

2017/05/04 Python

python with提前退出遇到的坑与解决方案

2018/01/05 Python

python实现在IDLE中输入多行的方法

2018/04/19 Python

详解Python循环作用域与闭包

2019/03/21 Python

python爬虫之自制英汉字典

2019/06/24 Python

Python人工智能之路之PyAudio 实现录音自动化交互实现问答

2019/08/13 Python

学点简单的Django之第一个Django程序的实现

2021/02/24 Python

详解css3中 text-fill-color属性

2019/07/08 HTML / CSS

Diamondback自行车：拥有你的冒险

2019/04/22 全球购物

园长自我鉴定

2013/10/06 职场文书

师范学院毕业生求职信范文

2013/12/26 职场文书

职业生涯规划设计步骤

2014/01/12 职场文书

马云北大演讲完整版：真心话，什么才是阿里的核心竞争力？

2014/04/04 职场文书

实习单位评语

2014/04/26 职场文书

银行授权委托书样本

2014/10/13 职场文书

销售助理岗位职责

2015/02/11 职场文书

探究Mysql模糊查询是否区分大小写

2021/06/11 MySQL

Python3.8官网文档之类的基础语法阅读

2021/09/04 Python