Bootstrap基础---网格系统

原创 2016年06月01日 20:26:22

看到Bootstrap 可视化布局之后,感觉还是很震撼的,之前的代码都是自己一点点写,现在拖动一下就出来了效果,所以决定尝试一下。今后会持续更新自己学的笔记。
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
1.Bootstrap引入

<!DOCTYPE html>
<html>
<head>
   <title>在线尝试 Bootstrap 实例</title>
   <!--引入Bootstrap-->
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

      <h1>Hello, world!</h1>

</body>
</html>

2.HTML5文档类型
Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型(Doctype)。

<!DOCTYPE html>
<html>
<!--页面内容-->
</html>

3.移动设备优先
Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。为了使网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页head中添加viewport meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">

width控制设备的宽度,当被不同屏幕分辨率的设备浏览时,设置为device-width可以确保它能正确呈现在不同设备上。
initial-scale=1.0确保网页加载时,以1:1的比例呈现,不会有任何的缩放。
user-scalable=no 可以禁用缩放功能
maximum-scale=1.0和user-scalable=no 一起使用,禁止缩放,用户只能滚动屏幕。
4.响应式图像

<img src="img1.jpg" class="img-responsive" alt="响应式图像">

img-responsive为图像赋予了max-width:100%和height:auto属性,让图像按比例缩放,不超过其父元素的尺寸
inline-block,元素相对于它周围的内容以内联形式呈现

.img-responsive{
display:inline-block;
height:auto;
max-width:100%;
}

5.网格系统
Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
网格系统是通过一系列包含内容的行和列来创建页面布局。工作原理:
(1)行必须放置在.container class内,以便获得适当的对齐和内边距
(2)使用行来创建列的水平组
(3)内容应该放在列内,且唯有列是行的直接子元素
(4)预定义网格类,比如.row和.col-xs-4,可用于快速创建网格布局
(5)列通过内边距来创建列内容之间的间隙。
(6)网格系统是通过制定您想要横跨的十二个可用的列创建。如果创建三个相等的列,则使用三个 .col-xs-4
媒体查询

//超小设备(手机,小于,768px)
@media (max-width: @screen-xs-max) { ... }
//小型设备(平板电脑,768px起)
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//中型设备(台式电脑,992px起)
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
//大型设备(大台式电脑,1200px起)
@media (min-width: @screen-lg-min) { ... }

网格实例:堆叠水平

<div class="container">
    <h1>Hello,world!</h1>
    <div class="row">
    <div class="col-md-6" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
    <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段
    </p>
    <p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段
    </p>
    </div>
        <div class="col-md-6" style="background-color:#dedef8;box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
    <p>第三段第三段第三段第三段第三段第三段第三段
    </p>
    <p>第四段第四段第四段第四段第四段第四段第四段
    </p>
    </div>
    </div>
<div>
元素被添加,确保居中和最大宽度。 一旦添加了容器,接下来您需要考虑以行为单位。添加
,并在行内添加列
。 网格中每一行由12个单位组成,定义了两个列,每列6个单位。
//在手机上,它将是左边 25% 右边 75% 的布局。在平板电脑上,它将是 50%/50% 的布局。在大型视口的设备上,它将是 33%/66% 的布局。
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
//在小设备浏览时无法确定网格显示的位置
 <div class="clearfix visible-xs"></div>

偏移列
col-xs=*类不支持偏移,可以通过一个空的单元格来实现
为了在大屏幕上使用偏移,使用col-md-offset-*,这个类会把左边距增加几列,其范围是从1到11

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row" >
      <div class="col-xs-6 col-md-offset-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p>
      </div>

   </div>
</div>

嵌套列
为了嵌套默认的网格,请添加一个新的.row,并在一个已有的col-md-* 列内添加一组col-md
列排序

 <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
     </div>
<div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右边
      </div>
    </div>
版权声明:本文为博主原创文章,未经博主允许不得转载。

Bootstrap网格系统

Bootstrap 官方文档中有关网格系统的描述:     Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用...
  • liuyan19891230
  • liuyan19891230
  • 2015年12月30日 21:12
  • 5025

Bootstrap学习笔记—关于网格系统

Bootstrap学习—关于网格系统1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。举例: 2、在行(.row)中可以添加列(....
  • flywaterfree
  • flywaterfree
  • 2016年04月05日 18:42
  • 405

Bootstrap-网格布局系统

本网格布局系统属于Scaffolding(框架,布局)部分。在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System)。本文讨论第一种...
  • nightelve
  • nightelve
  • 2013年12月04日 08:19
  • 10271

Bootstrap学习笔记(四)网格系统

实现原理 网格系统的实现原理非常简单,仅仅是通过定义容器container大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应...
  • u014744118
  • u014744118
  • 2017年02月05日 23:42
  • 324

响应式开发(五)-----Bootstrap CSS----------Bootstrap 网格系统

如果我们看过一些bootstrap的框架,经常看到col-sm-3等样式class。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系...
  • q383965374
  • q383965374
  • 2017年01月21日 11:24
  • 1758

详解Bootstrap网格系统

bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。bootstrap框架的网格系统工作原理: 1、数据行(.ro...
  • three_bird
  • three_bird
  • 2016年05月24日 10:03
  • 1318

bootstrap 网格系统(Grid system) 总结与实践

概述: 小知识点 1、@media 会在网页宽度为大于768、992、1200像素,设置网页container修饰div宽度分别为 750、970、1170 2、col-xs-*、 col-sm-*、...
  • m0_37355951
  • m0_37355951
  • 2017年06月27日 20:58
  • 343

玩转Bootstrap(基础) (4.网格系统实现原理)

代码 基本用法
  • Rodgexue
  • Rodgexue
  • 2015年08月21日 11:33
  • 3842

bootstrap 基础知识学习(图片+网格系统)

七、图片(306行~335行) 基本样式 1、img-responsive:响应式图片,主要针对于响应式设计 2、img-rounded:圆角图片 3、img-circle:圆形图片 ...
  • wangjiaohome
  • wangjiaohome
  • 2015年07月13日 12:00
  • 2987

Bootstrap学习笔记——网格系统

1 实现原理Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统(Grid System),可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义...
  • gengfu_php
  • gengfu_php
  • 2017年10月03日 21:56
  • 168
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap基础---网格系统
举报原因:
原因补充:

(最多只允许输入30个字)