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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
node.js自动上传ftp的脚本分享
Jun 16 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
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
第八节--访问方式
2006/11/16 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
js上下视差滚动简单实现代码
2017/03/07 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Ubuntu下安装PyV8
2016/03/13 Python
详解Python的循环结构知识点
2019/05/20 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Pycharm Git 设置方法
2020/09/15 Python
pytorch简介
2020/11/11 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
交通文明倡议书
2014/05/16 职场文书
电视节目策划方案
2014/05/16 职场文书
国庆节标语大全
2014/10/08 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
法律意见书范文
2015/05/20 职场文书
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电