编程 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插件开发详细教程

Jun 06 Javascript

JavaScript中return false的用法

Mar 12 Javascript

JS使用oumousemove和oumouseout动态改变图片显示的方法

Mar 31 Javascript

jquery实现表单验证并阻止非法提交

Jul 09 Javascript

JavaScript笔记之数据属性和存储器属性

Mar 31 Javascript

JavaScript实现简单Tip提示框效果

Apr 20 Javascript

JavaScript操作 url 中 search 部分方法函数

Jun 15 Javascript

Angularjs 实现一个幻灯片示例代码

Sep 08 Javascript

BootStrap中Table分页插件使用详解

Oct 09 Javascript

react-router实现跳转传值的方法示例

May 27 Javascript

JavaScript面试出现频繁的一些易错点整理

Mar 29 Javascript

js实现抽奖的两种方法

Mar 19 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 基本语法格式

2009/12/15 PHP

详解WordPress中过滤链接与过滤SQL语句的方法

2015/12/18 PHP

使用正则去除php代码中的注释方法

2016/11/03 PHP

解决PHP 7编译安装错误：cannot stat ‘phar.phar’: No such file or directory

2017/02/25 PHP

基于php编程规范(详解)

2017/08/17 PHP

PHP Socket网络操作类定义与用法示例

2017/08/30 PHP

CI框架教程之优化验证码机制详解【验证码辅助函数】

2019/04/16 PHP

Maps Javascript

2007/01/22 Javascript

xheditor与validate插件冲突的解决方案

2010/04/15 Javascript

JavaScript Accessor实现说明

2010/12/06 Javascript

关于JavaScript中的关联数组分析

2013/04/09 Javascript

基于JavaScript自定义构造函数的详解说明

2013/04/24 Javascript

jQuery插件开发的两种方法及$.fn.extend的详解

2014/01/16 Javascript

jQuery 回车事件enter使用示例

2014/02/18 Javascript

Vue.JS入门教程之处理表单

2016/12/01 Javascript

JS中showModalDialog关闭子窗口刷新主窗口用法详解

2017/03/25 Javascript

详解vue+vuex+koa2开发环境搭建及示例开发

2018/01/22 Javascript

React全家桶环境搭建过程详解

2018/05/18 Javascript

js核心基础之闭包的应用实例分析

2019/05/11 Javascript

jquery-ui 进度条功能示例【测试可用】

2019/07/25 jQuery

[05:48]DOTA2英雄梦之声vol21 屠夫

2014/06/20 DOTA

tornado框架blog模块分析与使用

2013/11/21 Python

python3下使用cv2.imwrite存储带有中文路径图片的方法

2018/05/10 Python

Pandas之Dropna滤除缺失数据的实现方法

2019/06/25 Python

python 数据提取及拆分的实现代码

2019/08/26 Python

django实现日志按日期分割

2020/05/21 Python

Python类super()及私有属性原理解析

2020/06/15 Python

Python 捕获代码中所有异常的方法

2020/08/03 Python

HTML5中实现拖放效果无须借助javascript

2012/12/26 HTML / CSS

RetroStage德国：复古服装

2019/02/03 全球购物

房产买卖委托公证书

2014/04/04 职场文书

助人为乐模范事迹材料

2014/06/02 职场文书

工作态度不端正检讨书

2014/10/04 职场文书

实习生矿工检讨书

2014/10/13 职场文书

党员干部廉政承诺书

2015/04/28 职场文书

2015年团队工作总结范文

2015/05/04 职场文书