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. JavaScript变量： 变量命名原则

    变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的原则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你的Ja ...

  2. ActiveStorage. 英文书Learnrails5.2的案例，看如何放到云上。

    ActiveStorage. 英文书Learnrails5.2的案例 本例子目标:增加一个avatar image给每个用户. 准备: 需要安装Imagemagick software.它可以crea ...

  3. mysql安装不上怎么办 mysql安装失败原因和解决方法

    困难1:MySQL 5.1 安装过程中报apply security setting错误 1.卸载MySQL. 2.删除目录 C:\Documents and Settings\All Users\A ...

  4. 识别User Agent屏蔽一些Web爬虫防采集

    识别User Agent屏蔽一些Web爬虫防采集 from:https://jamesqi.com/%E5%8D%9A%E5%AE%A2/%E8%AF%86%E5%88%ABUser_Agent%E5 ...

  5. MHA-ATLAS-MySQL高可用2

    六,配置VIP漂移 主机名 IP地址(NAT) 漂移VIP 描述 mysql-db01 eth0:192.168.0.51 VIP:192.168.0.60 系统:CentOS6.5(6.x都可以) ...

  6. 基于Open XML 导出数据到Excel

    数据导出的结果: 步骤1.新建一个Excel 文档,模板根据自己需要设置 步骤2.使用OpenXml  打开Excel 文件 步骤3.点击ReflectCode 功能,生成相应的代码文档 using ...

  7. 我的octopress配置

    在github上用octopress搭建了自己的blog,octopress号称是"专门给黑客打造的博客(A blogging framework for 把hackers)",使 ...

  8. 『转』谷歌发布Windows版Chrome App Launcher

    据国外媒体报道,谷歌发布了Windows版Chrome App Launcher,Windows用户现在因此能够使用谷歌的许多网络应用,如Chrome浏览器.Gmail.Google Drive和Ch ...

  9. ps/sql developer 登录远程服务器

    Ref PLSQL Developer远程登录的方法

  10. threading模块创建线程

    什么是线程 (thread) 线程也是一种多任务编程方式,可以使用计算机的多核资源.线程被称为轻量级的进程. 线程特征 *线程计算机多核分配的最小单位 *一个进程可以包含多个线程 *线程也是一个运行的 ...