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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q
-
Bootstrap CSS组件之大屏幕展播
在设计网页布局的时候,经常会有大屏内容的显示jumbotron 顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin). 源码中可以看出: 如果jumbotron放在container样式内,则显示圆角;如果不放在里边,则不会显示圆角. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-e
-
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超大屏幕的实现代码
本文实例为大家分享了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 导航条实例代码
一.默认的导航条 制作默认的导航条,可分以下几步: 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 弹出层代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!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)
在HTML5中,按钮的常用属性主要为背景颜色和大小 demo代码演示 一. input标签: <input type="button" value="按钮" class="btn"/> 二. button标签:(这里用button标签举例) <button type="button" class="btn btn-defult">提交</button> btn 表示基本样
-
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进度条的具体代码,供大家参考,具体内容如下 基本结构 <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
随机推荐
- Git 常用命令清单(整理且详细)
- angular+webpack2实战例子
- PHP通过微信跳转的Code参数获取用户的openid(关键代码)
- php mssql扩展SQL查询中文字段名解决方法
- php通过会话控制实现身份验证实例
- python笔记(1) 关于我们应不应该继续学习python
- 基于Bootstrap重置输入框内容按钮插件
- 浅析Asp.net MVC 中Ajax的使用
- C#实现的xml操作类完整实例
- PowerShell函数参数设置为即可选又必选的方法
- jQuery 图像裁剪插件Jcrop的简单使用
- 浅谈JS中的bind方法与函数柯里化
- 简单实现nginx+tomcat的反向代理与动静分离
- Linux虚拟主机面板 kloxo安装及汉化教程分享
- Android注解使用之ButterKnife 8.0详解
- 浅谈Android开发系列网络篇之Retrofit
- 网络基础版各种命令行集锦
- 浅谈Android面向切面编程(AOP)
- JS严格模式知识点总结
- java实现统计字符串中大写字母,小写字母及数字出现次数的方法示例