Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

复制

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

复制

<div class="container-fluid">
  ...
</div>

时间： 2024-11-05 12:22:27

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类的相关文章

Bootstrap学习笔记（2）--栅格系统深入学习

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/bootstrap.css"/> 7 <script src="j

一．移动设备优先在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放比例.最大缩放比例和禁止用户缩放 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">一般在页面开头加上

初学者--bootstrap（四）栅格系统----在路上（8）

----------------------------------------------------栅格系统:是bootstrap提供的响应式布局方式----------------------------------------------------------- 栅格系统的核心: 就是把容器container划分12等分,也就是版心被划分12等份. 下面的介绍也是以bootstrap中全局css样式:详情可观看http://v3.bootcss.com/css/了解,在这不再赘述. 现

第 5 章栅格系统

学习要点: 1.移动设备优先 2.布局容器 3.栅格系统主讲教师:李炎恢本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流式栅格系统. 一．移动设备优先在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放比例.最大缩放比例和禁止用户缩放 <meta name="viewport" content="

第5章栅格系统

本节课我们主要学习一下 Bootstrap 的栅格系统, 提供了一套响应式.移动设备优先的流式栅格系统. 一．移动设备优先在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放比例.最大缩放比例和禁止用户缩放 <meta name="viewport" content="width=device-width, initial-scale=

Bootstrap3学习笔记 Bootstrap3文档和栅格系统

?? Bootstrap 使用到的某些 HTML 元素和 CSS 属性须要将页面设置为 HTML5 文档类型. 1)例如以下开头html标签: <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2)Bootstrap3是依照移动设备优先设计的框架.为了确保适当的绘制和触屏缩放.须要加入viewport元数据标签: <meta name="viewport" content=&qu

Bootstrap 栅格系统理解与总结

Bootstrap 栅格系统学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快的熟练运用Bootstrap. 这里,我就对Bootstrap中非常重要好用的栅格系统做一个以实例为向导的总结: (1)第一步:创建栅格系统的容器 <div class="container-fluid"> <div class="row"> .

从零开始Bootstrap3

从开发人员的角色编写 bootstrap3 的基础教程,初学者可以按此教程一步一步操作一遍,就可以掌握bootstrap3的基础用法. 目录一.框架搭建 1.1 引入文件 1.2 布局容器 1.3 栅格系统 1.4 关于颜色二.常用样式 2.1 文本操作 2.2 表格操作 2.3 按钮三. 常用组件 3.1 字体图标 3.2 下拉菜单 3.3 按钮组 3.4 标签页 3.5 警告框 3.6 模态窗口 3.7 工具提示条四. Hello World 一.框架搭建: 1.1 引入文件使用B

BootStrap——BootStrap练习（栅格系统、组件、插件）

1.头部:主要运用了栅格系统(对于不同的设备应该如何布局来适应屏幕,如何隐藏元素等) <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12"> <img src="img/top1.jpg" /> </div> <div class=&