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入门学习：布局容器之水平布局
假设我们希望窗体里多放加入几个控件,直接加入是不成功的.由于窗体仅仅能容纳一个控件的容器. 这时候.我们须要借助布局容器,我们先把布局容器加入到窗体里.然后再把所须要加入的控件放在布局容器里. 布局容 ...
随机推荐
- Http缓存知识；HTTPS, HTTP2相关知识；百度统计和即时线上客服。
安装 : 百度统计 来统计用户流量, Intercom 来做即时线上客服. 这两个是 JavaScript 插件放在 HTML 上的. HTTP缓存: https://developers.googl ...
- 从invalidAuthenticationToken❌想到需要忽略：verify_authenticity_token。
https://www.cnblogs.com/chentianwei/diary/2018/07/11/9296126.html 这篇日记记录了我遇到的invalidAuthenticaitonTo ...
- 分享6款优秀的 AR/VR 开源库
今天,为大家推荐几款优秀的 AR/VR 开源库,希望能对大家有所帮助~ 1.AR.js AR.js 是一款应用于 Web 的高效增强现实(AR)库,基于 three.js + jsartoolkit5 ...
- 1003: [ZJOI2006]物流运输 最短路+dp
https://www.lydsy.com/JudgeOnline/problem.php?id=1003 数据范围很小,怎么瞎搞都行,n方dp,然后跑出最短路暴力转移,需要注意的是不能使用的可能有多 ...
- HDU 4522 (恶心建图)
湫湫系列故事——过年回家 Time Limit: 500/200 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...
- PostgreSQL常用插件收集
hexdump -C 数据表文件 -- 查看表文件中数据. pg_stat_statements pgcompacttable -- 在减少锁的情况下,清理表和索引的老空间. pg_repack--P ...
- 如何优化tomcat配置优化
tomcat默认参数是为开发环境制定,而非适合生产环境,尤其是内存和线程的配置,默认都很低,容易成为性能瓶颈. tomcat内存优化 linux修改TOMCAT_HOME/bin/catalina.s ...
- CUDA 安装完成以后如何判断安装是否成功
最近在家里过寒假,可能这是还在学校里带着最大的福利了,无意之中翻出了多年前买的几本关于CUDA编程的书,于是随便在自己电脑上配置了一下环境,试试能不能把当年没有看完的书给看完了,于是有了今天这个判断C ...
- I.MX6 Manufacturing Tool V2 (MFGTool2) Emmc mksdcard.sh hacking
#!/bin/sh # 参考文章: # . MFGTool Emmc mksdcard.sh MFGTool Emmc mksdcard.sh comment # http://jordonwu.gi ...
- C语言使用pthread多线程编程(windows系统)二
我们进行多线程编程,可以有多种选择,可以使用WindowsAPI,如果你在使用GTK,也可以使用GTK实现了的线程库,如果你想让你的程序有更多的移植性你最好是选择POSIX中的Pthread函数库,我 ...