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

Sample script that displays all of the users in a given SQL Server DB

Jun 16 Javascript

10个基于Jquery的幻灯片插件教程

Oct 29 Javascript

真正的JQuery.ajax传递中文参数的解决方法

May 28 Javascript

js螺旋动画效果的具体实例

Nov 15 Javascript

动态创建script标签实现跨域资源访问的方法介绍

Feb 28 Javascript

jQuery使用removeClass方法删除元素指定Class的方法

Mar 26 Javascript

浅谈使用MVC模式进行JavaScript程序开发

Nov 10 Javascript

使用js获取地址栏参数的方法推荐(超级简单)

Jun 14 Javascript

vue实现图书管理demo详解

Oct 17 Javascript

CheckBox多选取值及判断CheckBox选中是否为空的实例

Oct 31 Javascript

angular2 ng2-file-upload上传示例代码

Aug 23 Javascript

Electron autoUpdater实现Windows安装包自动更新的方法

Dec 24 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对象转换为数组函数（递归方法）

2012/02/04 PHP

php对包含html标签的字符串进行截取的函数分享

2014/06/19 PHP

js报错 Object doesn't support this property or method的原因分析

2011/03/31 Javascript

jQuery EasyUI API 中文文档 - EasyLoader 加载器

2011/09/29 Javascript

JavaScript实现GriwView单列全选(自写代码)

2013/05/13 Javascript

AngularJS模块学习之Anchor Scroll

2016/01/19 Javascript

angularjs 源码解析之scope

2016/08/22 Javascript

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

2016/11/25 Javascript

canvas知识总结

2017/01/25 Javascript

jquery实现焦点轮播效果

2017/02/23 Javascript

微信小程序-滚动消息通知的实例代码

2017/08/03 Javascript

Vue如何从1.0迁移到2.0

2017/10/19 Javascript

VUE2实现事件驱动弹窗示例

2017/10/21 Javascript

Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

2018/08/16 Javascript

JavaScript实现多态和继承的封装操作示例

2018/08/20 Javascript

JavaScript实现预览本地上传图片功能完整示例

2019/03/08 Javascript

react MPA 多页配置详解

2019/10/18 Javascript

[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4

2017/04/03 DOTA

Python+Django在windows下的开发环境配置图解

2009/11/11 Python

Python的一些用法分享

2012/10/07 Python

Python对小数进行除法运算的正确方法示例

2014/08/25 Python

Python中用pycurl监控http响应时间脚本分享

2015/02/02 Python

利用Tkinter(python3.6)实现一个简单计算器

2017/12/21 Python

使用PM2+nginx部署python项目的方法示例

2018/11/07 Python

python 多线程串行和并行的实例

2019/02/22 Python

妙用itchat! python实现久坐提醒功能

2019/11/25 Python

如何基于Python制作有道翻译小工具

2019/12/16 Python

解决torch.autograd.backward中的参数问题

2020/01/07 Python

css3背景图片透明叠加属性cross-fade简介及用法实例

2013/01/08 HTML / CSS

萨克斯第五大道英国：Saks Fifth Avenue英国

2019/04/01 全球购物

德国网上超市：myTime.de

2019/08/26 全球购物

师德师风剖析材料

2014/09/30 职场文书

工作检讨书范文

2015/01/23 职场文书

自信主题班会

2015/08/14 职场文书

2016年五一促销广告语

2016/01/28 职场文书

2017年寒假社区服务活动总结

2016/04/06 职场文书