Bootstrap基础---网格系统

最新推荐文章于 2018-11-11 11:32:56 发布

刘小妞

最新推荐文章于 2018-11-11 11:32:56 发布

阅读量550

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/liuwengai/article/details/51558735

版权

Bootstrap 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

看到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>

刘小妞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap基础---网格系统

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

扫一扫