Bootstrap超大屏幕的实现代码

本文实例为大家分享了Bootstrap超大屏幕展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap-超大屏幕（Jumbotron）</title>
 <meta charset="utf-8">
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
</head> 

<body>
 <!--为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class-->
<div class="jumbotron">
 <div class="container">
  <h1>欢迎登陆页面！</h1>
  <p>这是一个超大屏幕的实例。</p>
  <p><a class="btn btn-primary btn-lg" role="button">学习更多</a></p>
 </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
 </body>
</html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap CSS组件之大屏幕展播

    在设计网页布局的时候,经常会有大屏内容的显示jumbotron 顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin). 源码中可以看出: 如果jumbotron放在container样式内,则显示圆角;如果不放在里边,则不会显示圆角. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-e

  • Bootstrap 设置datetimepicker在屏幕上面弹出设置方法

    Bootstrap 设置datetimepicker在屏幕上面弹出设置方法

    datetimepicker默认是在输入框下面弹出的,但是遇到输入框在屏幕下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出.设置很简单,在初始话中: $('.form_date').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0, pickerPosi

  • BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q

  • Bootstrap超大屏幕的实现代码

    Bootstrap超大屏幕的实现代码

    本文实例为大家分享了Bootstrap超大屏幕展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>Bootstrap-超大屏幕(Jumbotron)</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css&qu

  • BootStrap数据表格实例代码

    首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:

  • BootStrap 导航条实例代码

    BootStrap 导航条实例代码

    一.默认的导航条 制作默认的导航条,可分以下几步: 1.在ul里加上(ul class="nav navbar-nav")样式: 2.在ul外加一层div或nav(ps:HTML5新属性),并且添加样式(div class="navbar nabar-default"); <nav class="navbar navbar-default"> <ul class="nav navbar-nav"> &l

  • BootStrap轮播HTML代码（推荐）

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <div id="carousel-menu" class="carousel slide" data-ride="carousel"> //小圆点 <ol class="carousel-indicators"> <li data-target="#carousel-menu" data-slide-to="0&

  • BootStrap 弹出层代码

    BootStrap 弹出层代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device

  • bootstrap手风琴折叠示例代码分享

    本文实例为大家分享了bootstrap手风琴的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

  • 使用Bootstrap美化按钮实例代码(demo)

    使用Bootstrap美化按钮实例代码(demo)

    在HTML5中,按钮的常用属性主要为背景颜色和大小 demo代码演示 一. input标签: <input type="button" value="按钮" class="btn"/> 二. button标签:(这里用button标签举例) <button type="button" class="btn btn-defult">提交</button> btn 表示基本样

  • Bootstrap导航简单实现代码

    Bootstrap导航简单实现代码

    Bootstrap导航的具体实现代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-sc

  • Bootstrap进度条实现代码解析

    Bootstrap进度条实现代码解析

    本文实例为大家分享了Bootstrap进度条的具体代码,供大家参考,具体内容如下 基本结构 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="wid

  • bootstrap表单示例代码分享

    本文实例为大家分享了bootstrap表单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

随机推荐