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之仿微信发朋友圈图片选择功能

    最近项目中需要用到发表评论选择多张图片和拍照的功能,于是就仿照微信发表朋友圈的选择图片和拍照做了一个这样的案例,经过查找资料终于完成了此功能, 最近有时间就写出来和大家分享一下,希望对大家有所帮助. ...

  2. Leetcode 63

    //一维dp还是比较难写的class Solution { public: int uniquePathsWithObstacles(vector<vector<int>>&a ...

  3. 208. Implement Trie (Prefix Tree) -- 键树

    Implement a trie with insert, search, and startsWith methods. Note:You may assume that all inputs ar ...

  4. hdu 6144 Arithmetic of Bomb

    Arithmetic of Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. 【linux】查看进程

    查询所有:ps aux 查询某个用户:ps -u abc 终止某个进程:kill

  6. 穷举算法和递推算法（Java）

    穷举算法 概念: 最简单算法,依赖计算机的强大计算能力穷尽每一种可能的情况.穷举算法效率不高,但是适合一些没有明显规律可循的场合. 思想: 在使用穷举算法时,需要明确问题答案的范围,这样才可能在指定范 ...

  7. Java判断String类型变量是否可以转换数字类型

    正则表达式 首先要import java.util.regex.Pattern 和 java.util.regex.Matcher public boolean isNumeric(String st ...

  8. C#读写 AB PLC 直接通过节点来读写数据 读写 AllenBradley PLC

    本文将使用一个Github开源的组件库技术来读写AB PLC,使用的是基于以太网的实现,不需要额外的组件,读取操作只要放到后台线程就不会卡死线程,本组件支持超级方便的高性能读写操作 官网:http:/ ...

  9. java重写toString方法

    在输出对象属性时,重写toString按照你希望的输出形式重写 object类里的toString只是把字符串的直接打印,数字的要转化成字符再打印,而对象,则直接打印该对象的hash码.所以当你要想按 ...

  10. 折半查找(C语言)

    一.二分查找 在C和C++里,二分查找是针对有序数组所用的一种快速查找元素的方法. 二.二分查找的条件以及优缺点 条件:针对有序数组(元素从小到大或从大到小) 优点:查询速度较快,时间复杂度为O(n) ...