Bootstrap全屏
1.由于bootstrap中的.containter是根据媒体查询定死了width,所以页面不会占满全屏，若要全屏，则最外面的div的class不能用container(或改用.container-fluid),container的源码如下
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
2.若用.container，则不会全屏
<!DOCTYPE html>
<html>
<head>
<title>自定义占满wgnu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件（一般不使用） -->
<!-- <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
div{
height:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row" style="background:red;">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:pink;">a1</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:purple;">a2</div>
</div>
<div class="row" style="background:yellow;">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background:orange;">b1</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background:green;">b2</div>
</div>
</div>
</body>
</html>
2.去掉container,则可以全屏
<!DOCTYPE html>
<html>
<head>
<title>自定义占满wgnu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件（一般不使用） -->
<!-- <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
div{
height:200px;
}
</style>
</head>
<body>
<div>
<div class="row" style="background:red;">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:pink;">a1</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="background:purple;">a2</div>
</div>
<div class="row" style="background:yellow;">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="background:orange;">b1</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="background:green;">b2</div>
</div>
</div>
</body>
</html>
Bootstrap全屏的更多相关文章
- Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)
Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 如何ios中间Safari在开发了类似的native app像全屏webapp
本文交换了我www.gbtags.com文章. <meta name="format-detection" content="telephone=no email= ...
- 解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
- css背景图自适应全屏显示
前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...
- FullPage.js-基于 jQuery 的插件全屏滚动插件
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...
- Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...
- android-解决全屏-webview-输入框被输入法挡住-FullScreen-adjustResize失效问题
由于公司开发的 App 中,Html 的页面嵌入的有点多,坑爹的是,还有很多输入框,这就算了,还要求全屏.然后就出现了这个情况. 下面来唠叨唠叨具体的来龙去脉. 起初是这样的,整个项目基本完工了.测试 ...
- iOS 多个播放器同时播放，双击全屏，单击退出全屏
前言:公司需求如下:点击一个按钮播放一个视频,最多同时播放4个:双击某视频让其全屏,单击再恢复原来的样子.IOS的播放器有两种,MPMoviePlayerController,AVAudioPlaye ...
随机推荐
- 一、JPEG文件格式-----压缩框架
JPEG文件格式 http://wenku.baidu.com/view/4856d31dc281e53a5802ff0d.html 标记名 FF E0 ...
- eclipse插件开发中全局对象的获取
转自:http://blog.csdn.net/liaomin416100569/article/details/7165425 1.获取系统默认的ShellShell shell = Platfor ...
- Actionform
Actionform 2013年7月8日 15:08 Reset 用actionform是把数据恢复到初始状态 Getter/setter Validate 验证 已使用 Microsoft OneN ...
- 查看BADI有哪些实现
TCODE:SE18
- 如果选择构建ui界面方式，手写代码，xib和StoryBoard间的博弈
代码手写UI这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用. 大型多人合作项目使用代码构建UI,主要是看中纯代码在版本管理时的优势,检查追踪改动以及进行代码合并相对容易一些. 另外,代 ...
- eclipse格式化代码末班修改
在窗口->首选项->输入format(格式)搜索,或者找Java->代码样式->格式化程序: 几个内置的不能调格式化代码风格,但是可以根据内置的新建一个,出来很多选项,开始调吧 ...
- Android -- 系统信息（内存、cpu、sd卡、电量、版本）获取
内存(ram) android的总内存大小信息 ...
- 查看linux命令类型
type type -a type type是内建变量 root@akayer-p6:~# type -a lsls 是 `ls --color=auto' 的别名ls 是 /bin/ls
- Java下Web MVC的领跑者：SpringMVC
比较常用的MVC框架有Struts 和 SpringMVC. Struts 是Java Web MVC框架中曾经不争的王者.经过长达九年的发展,Struts占有了MVC框架中最大的市场份额.但是Str ...
- 【Binary Tree Level Order Traversal】cpp
题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...