3_bootsrap布局容器
3、布局容器
BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。
相当于一个画板。
帮助手册位置：全局CSS样式-------》概览-------》布局容器
任意元素使用了布局容器的样式，都会成为一个布局容器，建议使用div作为布局容器
|
.container |
类用于固定宽度并支持响应式布局的容器。 【特点：居中，两端留白】 <div class="container"> ... </div> |
|
.container-fluid |
类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid"> ... </div> |
为了展示效果明显，我们为div加入了边框样式：
style="border:1px solid red;"
示例1：
效果1：
示例2：
效果2：
2.3、bootstrap的通用简洁模板
<!DOCTYPE html>
<html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Bootstrap 模板</title> <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../lib/jquery/jquery-1.11.0.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script> </head> <body>
<h1>你好，世界！</h1>
</body>
</html>
viewport：视口，即浏览器上网页的可视区域
视口作用：用于移动设备将 大型页面进行比例缩放显示。
视口的常见设置（了解）：
|
width=device-width |
视口的宽度，大多手机浏览器视口的宽度是980。 device-width 表示采用设备的宽度 例如：手机是5.5寸，那么视口也采用5.5寸宽度 |
|
initial-scale=1 |
移动设备上，打开页面时的初始化缩放级别。 取值：1-5 1表示100%，5表示500% |
|
minimum-scale=1 |
移动设备上，页面可以 最小缩放的级别。 |
|
maximum-scale=1 |
移动设备上，页面可以 最大缩放的级别。 |
|
user-scalable=no |
移动设备上，页面禁止缩放。 如果设置“user-scalable=no”，则“minimum-scale”和“maximum-scale”无效 |
3_bootsrap布局容器的更多相关文章
- 学习WPF——WPF布局——了解布局容器
WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归 ...
- 学习WPF——WPF布局——初识布局容器
StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window x:Class="Wpf ...
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- Android自定义ViewGroup（四、打造自己的布局容器）
转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51500304 本文出自:[openXu的博客] 目录: 简单实现水平排列效果 自定义Layo ...
- WPF 10天修炼 第四天- WPF布局容器
WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...
- jQuery EasyUI布局容器layout实例精讲
这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...
- elementUI 学习入门之 container 布局容器
Container 布局容器 用于布局的容器组件,方便快速搭建页面基本结构 <el-container> : 外层容器.当子元素包含 <el-header> 或 <el- ...
- GTK入门学习：布局容器之固定布局
前面我们学习的水平.垂直和表格布局容器,控件会跟着容器大小的变化进行自己主动适应.而固定布局容器里的控件则不会跟着变化( 则固定不变 ). 固定布局的创建: GtkWidget *gtk_fixed_ ...
- GTK入门学习：布局容器之水平布局
假设我们希望窗体里多放加入几个控件,直接加入是不成功的.由于窗体仅仅能容纳一个控件的容器. 这时候.我们须要借助布局容器,我们先把布局容器加入到窗体里.然后再把所须要加入的控件放在布局容器里. 布局容 ...
随机推荐
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- 递归--练习5--noi1751分解因数
递归--练习5--noi1751分解因数 一.心得 想清楚子问题 想清楚递推表达式 没有全部AC说明还有自己没有想到的位置,试边界情况和查看题目要求 二.题目 1751:分解因数 总时间限制: 10 ...
- java读取PHP接口数据的实现方法（四）
PHP文件: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3 ...
- Eclipse 中 ctrl+鼠标左键 快捷查看资源失效
Eclipse 中 ctrl+鼠标左键 快捷查看资源失效 看看eclipse 工作空间配置的jdk是什么版本,看看本地环境变量中的jdk是什么版本,将二者的版本统一即可. 笔者从git上clone一个 ...
- 5.4完成其他模块的xadmin后台注册
courses adminx.py from .models import Course, Lesson, Video, CourseResource import xadmin class Cou ...
- python中多进程
多进程 什么是进程 进程:正在进行的一个过程或者说一个任务,而负责执行任务的是CPU. 进程和程序的区别 程序仅仅是一堆代码而已,而进程指的是程序的运行过程. 举例 想象以为有着一手好厨艺的科学家肖亚 ...
- [QT]加快qt编译：设置默认多核编译qt
使用环境:win7 + QT Creator 4.2.1 + QT5.8 + MinGW5.3.0 32bit 设置默认多核编译qt 来源:http://stackoverflow.com/ques ...
- HDU4819 Mosaic【树套树】
LINK 题目大意 给你一个\(n*n\)矩阵,每个点有初始权值 q次询问每次把一个矩形的中心节点变成这个矩形中最大值和最小值的平均数 思路 很显然的树套树啊 就是一开始傻逼了没想到怎么去维护这个东西 ...
- java spring boot 出现 java.lang.UnsatisfiedLinkError
java.lang.UnsatisfiedLinkError: E:\ruanjian\jdk\bin\tcnative-1.dll: Can't load IA 32-bit .dll on a A ...
- nginx brotli 压缩试用
brotli 的压缩比相对gzip 有好多提升 测试试用docker 测试代码 https://github.com/rongfengliang/rollup-babel-demolibrary 运行 ...