编程 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方法+js一般方法+js面向对象方法实现拖拽效果

Aug 30 Javascript

文本框(input)获取焦点(onfocus)时样式改变的示例代码

Jan 10 Javascript

js post提交调用方法

Feb 12 Javascript

js实现同一页面多个运动效果的方法

Apr 10 Javascript

jQuery操作iframe中js函数的方法小结

Jul 06 Javascript

AngularJS下对数组的对比分析

Aug 24 Javascript

使用JSON作为函数的参数的优缺点

Oct 27 Javascript

react native实现往服务器上传网络图片的实例

Aug 07 Javascript

JavaScript寄生组合式继承原理与用法分析

Jan 11 Javascript

webpack-url-loader 解决项目中图片打包路径问题

Feb 15 Javascript

vue项目配置使用flow类型检查的步骤

Mar 18 Javascript

详解JavaScript作用域、作用域链和闭包的用法

Sep 03 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实现水仙花数示例分享

2014/04/03 PHP

destoon调用企业会员公司形象图片的实现方法

2014/08/21 PHP

谈谈PHP连接Access数据库的注意事项

2016/08/12 PHP

Laravel中批量赋值Mass-Assignment的真正含义详解

2017/09/29 PHP

解析offsetHeight,clientHeight,scrollHeight之间的区别

2013/11/20 Javascript

JavaScript设计模式之单件模式介绍

2014/12/28 Javascript

PHPExcel中的一些常用方法汇总

2015/01/23 Javascript

JavaScript必知必会(三) String .的方法来自何方

2016/06/08 Javascript

js获取当前周、上一周、下一周日期

2017/03/19 Javascript

在 Angular 中实现搜索关键字高亮示例

2017/03/21 Javascript

nodejs服务搭建教程 nodejs访问本地站点文件

2017/04/07 NodeJs

vue 项目如何引入微信sdk接口的方法

2017/12/18 Javascript

vue-router动态设置页面title的实例讲解

2018/08/30 Javascript

微信小程序实现打开并下载服务器上面的pdf文件到手机

2019/09/20 Javascript

Vue中使用wangeditor富文本编辑的问题

2021/02/07 Vue.js

Vue中避免滥用this去读取data中数据

2021/03/02 Vue.js

[05:15]DOTA2英雄梦之声_第16期_灰烬之灵

2014/06/21 DOTA

python查找第k小元素代码分享

2013/12/18 Python

利用pyinstaller或virtualenv将python程序打包详解

2017/03/22 Python

python实现unicode转中文及转换默认编码的方法

2017/04/29 Python

python 字符串只保留汉字的方法

2018/11/16 Python

Python设计模式之策略模式实例详解

2019/01/21 Python

给我一面国旗 python帮你实现

2019/09/30 Python

Win10里python3创建虚拟环境的步骤

2020/01/31 Python

详解有关PyCharm安装库失败的问题的解决方法

2020/02/02 Python

Python3.8.2安装包及安装教程图文详解(附安装包)

2020/11/28 Python

国际书籍零售商：Wordery

2017/11/01 全球购物

美国饼干礼物和美食甜点购买网站：Cheryl’s

2020/05/28 全球购物

幼儿教师考核制度

2014/01/25 职场文书

社会实践评语

2014/04/28 职场文书

学校党支部承诺书

2015/04/30 职场文书

神秘岛读书笔记

2015/07/01 职场文书

Java中多线程下载图片并压缩能提高效率吗

2021/07/01 Java/Android

分析MySQL优化 index merge 后引起的死锁

2022/04/19 MySQL

Redis唯一ID生成器的实现

2022/07/07 Redis

浅谈音视频 pts dts基本概念及理解

2022/08/05 数码科技