基本简介

1、Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列

2、栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局

3、“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。

基本案例

<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.row div {
border: 1px solid #000;
}
</style> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">1</div>
<div class="col-lg-10">10</div>
</div>
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-10">10</div>
</div>
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-10">10</div>
</div>
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-1">1</div>
<div class="col-xs-10">10</div>
</div>
</div> <br><br> <div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介1</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介2</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介3</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介4</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介5</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介6</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介7</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">简介8</div>
</div>
</div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

移动web——bootstrap栅格系统的更多相关文章

  1. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  2. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  3. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  4. Bootstrap栅格系统(布局)

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

  5. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  7. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  8. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  9. 第二百三十五节,Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...

随机推荐

  1. [NOIP2004]FBI树

    题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树,它的结点类型也包括F结点,B结点和I结点三 ...

  2. 利用Clojure统计代码文件数量和代码行数

    ;; 引入clojure的io包 (use '[clojure.java.io]) ;; 遍历目录将所有符合要求的文件做为列表返回 (defn walk [dirpath pattern] (doal ...

  3. 这篇讲angular 的$q的讲得不错

    原文: https://segmentfault.com/a/1190000000402555 ---------------------------------------------------- ...

  4. JavaSE学习笔记--Item1 注解Annotation

    从 JDK 5.0 開始, Java 添加了对元数据(MetaData) 的支持, 也就是 Annotation(注解). 什么是Annotation,以及注解的作用? 三个主要的 Annotatio ...

  5. Linuxserver沦陷为肉鸡的全过程实录

    Linuxserver沦陷为肉鸡的全过程实录 Linuxserver沦陷为肉鸡的全过程实录 从防火墙瘫痪说起 查找黑客行踪的方法 沦陷过程分析 1 oracle用户password被破解 2 黑客动作 ...

  6. LeetCode 21. Merge Two Sorted Lists (合并两个有序链表)

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  7. 关于C语言指针的一些新认识(2)

    在使用C语言编程的过程中,遇到了很多关于指针使用的小问题,这里总结一下就当做是编程的小技巧啦 Q1. 如何用printf( )输出指针 这个问题相当于如何用printf( )输出地址,答案是:用"%p ...

  8. mac关闭和开启启动声

    1 关闭 sudo nvram SystemAudioVolume=%01 2 开启 sudo nvram -d SystemAudioVolume

  9. 速度上手LM4F LaunchPad 输出多路PWM波

    最近转战到TI的Cortex M4平台后,发现网上关于TI的LM4F120 Launchpad 资料太少了,而且其中大部分都是TI员工或者其合作伙伴提供的,例程太少,导致新手上手很慢. 我只是要实现几 ...

  10. Sql2005常用函数大全

    --聚合函数use pubsgoselect avg(distinct price) --算平均数from titleswhere type='business'go use pubsgoselect ...