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. [sql]SET NOCOUNT ON 的作用

    使返回的结果中不包含有关受 Transact-SQL 语句影响的行数的信息. 说明: 场景1:(不使用SET NOCOUNT) 场景2:(使用SET NOCOUNT ON ) 场景3:(使用SET N ...

  2. 一.UTF8字符集csv文件在oracle下乱码问题处理

    1.问题描述 在excel中生成了一个UTF-8编码格式的csv文件准备导入数据库,在notpad++下打开显示正常,编码集为UTF-8,通过pl/sql dev导入oracle是出现乱码,此时初步推 ...

  3. python批量修改ssh密码

    由于工作需要本文主结合了excel表格,对表格中的ssh密码进行批量修改 以下是详细代码(python3): #!/usr/bin/env python#-*-coding:utf-8-*- impo ...

  4. 快速使用CSS 弹性盒子

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...

  5. hdu 6301 Distinct Values (双指针,水题)

    大意: 给定m个区间, 求构造一个长n且字典序最小的序列, 使得每个区间内的数各不相同 求出每个位置为左端点时向右延伸最大距离, 然后双指针, 每次从set中取最小 #include <iost ...

  6. restframework api（基础3CBV）

    一 CBV源码流程 urls.py from django.conf.urls import url from django.contrib import admin from app01 impor ...

  7. 【转】powerdesigner 数据类型与数据库数据类型对应

    The following numeric data types are available: Standard data type DBMS-specific physical data type ...

  8. Go安装一些第三方库

    原文链接:https://javasgl.github.io/go-get-golang-x-packages/ 侵权联系删除! go在go get 一些 package时候的会由于众所周知的原因而无 ...

  9. mt7601u: probe of xxxx failed with error -2

    /************************************************************************ * mt7601u: probe of xxxx f ...

  10. I.MX6 GPS Android HAL Framework 调试

    I.MX6 GPS Android HAL Framework 调试 一.参考文章: android4. GPS定位问题 http://blog.csdn.net/bzw073/article/det ...