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布局容器的更多相关文章

  1. 学习WPF——WPF布局——了解布局容器

    WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归 ...

  2. 学习WPF——WPF布局——初识布局容器

    StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window x:Class="Wpf ...

  3. Android 在布局容器中动态添加控件

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

  4. Android自定义ViewGroup（四、打造自己的布局容器）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51500304 本文出自:[openXu的博客] 目录: 简单实现水平排列效果 自定义Layo ...

  5. WPF 10天修炼 第四天- WPF布局容器

    WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...

  6. jQuery EasyUI布局容器layout实例精讲

    这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...

  7. elementUI 学习入门之 container 布局容器

    Container 布局容器 用于布局的容器组件,方便快速搭建页面基本结构 <el-container> : 外层容器.当子元素包含 <el-header> 或 <el- ...

  8. GTK入门学习：布局容器之固定布局

    前面我们学习的水平.垂直和表格布局容器,控件会跟着容器大小的变化进行自己主动适应.而固定布局容器里的控件则不会跟着变化( 则固定不变 ). 固定布局的创建: GtkWidget *gtk_fixed_ ...

  9. GTK入门学习：布局容器之水平布局

    假设我们希望窗体里多放加入几个控件,直接加入是不成功的.由于窗体仅仅能容纳一个控件的容器. 这时候.我们须要借助布局容器,我们先把布局容器加入到窗体里.然后再把所须要加入的控件放在布局容器里. 布局容 ...

随机推荐

  1. Android多个Module统一配置相同jar或库的版本号

    Android Studio多个Module依赖相同的库时对版本号进行统一配置 在Android项目中,一个项目经常会依赖其他的一个甚至多个库文件,在这种依赖的时候最常见的一个错误就是 jar包版本不 ...

  2. Aho-Corasick算法

    2018-03-15 10:25:02 在计算机科学中,Aho–Corasick算法是由Alfred V. Aho和Margaret J.Corasick 发明的字符串搜索算法,用于在输入的一串字符串 ...

  3. Java IO流-Properties

    2017-11-05 21:37:50 Properties Properties:Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其 ...

  4. 2-10~2-11 配置iptables防火墙增强服务 selinux简单讲解

    学习一个服务的过程: 1.此服务器的概述:名字,功能,特点,端口号 2.安装 3.配置文件的位置 4.服务启动关闭脚本,查看端口 5.此服务的使用方法 6.修改配置文件,实战举例 7.排错(从下到上, ...

  5. Eclips安装SVN插件

    1.eclipse -> Help ->Install New Software->add 2.弹出窗的"Name"和"URL"中输入如下内容 ...

  6. 001——php字符串中的字符串定义

    <?php /** * 一.定义字符串: * ''单引号 ""双引号 <<<定界符 */ /* $url='http://baidu.com'; $baid ...

  7. 蓝桥杯练习系统历届试题 剪格子 dfs

    问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+|10* 1|52|+--****--+|20|30* 1|*******--+| 1| 2| 3|+--+--+--+ ...

  8. POJ 3279 Fliptile 状态压缩,思路 难度:2

    http://poj.org/problem?id=3279 明显,每一位上只需要是0或者1, 遍历第一行的所有取值可能,(1<<15,时间足够)对每种取值可能: 对于第0-n-2行,因为 ...

  9. 外汇EA(LRY_FX_Robot_V5)

    EA介绍 EA类型是马丁+策略,EA主要功能有风控设置(预付款.浮亏.加仓层数等达到多少进行操作).移动止损(包括隐藏移动止损).帮我操作手动单子(如果你开了首仓不会操作这个功能可参帮你加仓平仓移动止 ...

  10. OMAP4之DSP核（Tesla）软件开发学习（三）使能DSP核

    目标: 1.编译或直接获取DSP映像tesla-dsp.bin. 2.boot并使能DSP核(这个可以看启动打印或者进入/d/remoteproc/omap-rproc.0/参看dsp调试信息).   ...