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

javascript setAttribute, getAttribute 在不同浏览器上的不同表现

Aug 05 Javascript

javaScript NameSpace 简单说明介绍

Jul 18 Javascript

原生JavaScript实现滚动条效果

Mar 24 Javascript

node.js微信公众平台开发教程

Mar 04 Javascript

js数组的五种迭代方法及两种归并方法(推荐)

Jun 14 Javascript

jquery实现ajax提交表单信息的简单方法(推荐)

Aug 24 Javascript

提高Web性能的前端优化技巧总结

Feb 27 Javascript

详解webpack之scss和postcss-loader的配置

Jan 09 Javascript

ejsExcel模板在Vue.js项目中的实际运用

Jan 27 Javascript

微信小程序canvas开发水果老虎机的思路详解

Feb 07 Javascript

Angular利用HTTP POST下载流文件的步骤记录

Jul 26 Javascript

ant design vue的form表单取值方法

Jun 01 Vue.js

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

VML绘图板②脚本--VMLgraph.js、XMLtool.js

2006/10/09 PHP

一个php作的文本留言本的例子(三)

2006/10/09 PHP

从C/C++迁移到PHP——判断字符类型的函数

2006/10/09 PHP

Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置

2006/11/18 PHP

PHP中simplexml_load_string函数使用说明

2011/01/01 PHP

PHP+AJAX实现投票功能的方法

2015/09/28 PHP

php中时间函数date及常用的时间计算

2017/05/12 PHP

JQueryEasyUI Layout布局框架的使用

2013/04/08 Javascript

js验证整数加保留小数点的简单实例

2013/12/02 Javascript

jQuery实现表格行上移下移和置顶的方法

2015/05/22 Javascript

浅谈JavaScript中的分支结构

2016/07/01 Javascript

基于JS实现回到页面顶部的五种写法(从实现到增强)

2016/09/03 Javascript

微信小程序 input输入框控件详解及实例（多种示例）

2016/12/14 Javascript

JS实现快递单打印功能【推荐】

2018/06/21 Javascript

Node.js中读取TXT文件内容fs.readFile()用法

2018/10/10 Javascript

微信小程序访问豆瓣电影api的实现方法

2019/03/31 Javascript

深入解析koa之异步回调处理

2019/06/17 Javascript

JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)

2020/02/03 Javascript

JavaScript canvas绘制圆弧与圆形

2020/02/18 Javascript

[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局

2016/03/05 DOTA

[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07

2020/11/09 DOTA

Python异步操作MySQL示例【使用aiomysql】

2019/05/16 Python

python如何将多个PDF进行合并

2019/08/13 Python

python飞机大战 pygame游戏创建快速入门详解

2019/12/17 Python

Python底层封装实现方法详解

2020/01/22 Python

Python Numpy,mask图像的生成详解

2020/02/19 Python

CSS3 transition 实现通知消息轮播条

2020/10/14 HTML / CSS

canvas简易绘图的实现（海绵宝宝篇）

2018/07/04 HTML / CSS

一份全面的PHP面试问题考卷

2012/07/15 面试题

小学生打架检讨书

2014/01/26 职场文书

快餐店的创业计划书范文

2014/01/29 职场文书

春节晚会主持词

2014/03/24 职场文书

三八妇女节活动总结

2014/05/04 职场文书

Go语言使用select{}阻塞main函数介绍

2021/04/25 Golang

浅谈如何提高PHP代码质量之端到端集成测试

2021/05/28 PHP

go goroutine 怎样进行错误处理

2021/07/16 Golang