目录：
1.Bootstrap栅格化系统
1.1 描述
1.2 代码示例
1.3 媒体查询
2.Bootstrap基本css样式的使用
1.Bootstrap栅格化系统
   1.1 描述
        bootstrap栅格化系统可以根据设备视口的大小变化去适当扩展到最多12列的显示状态，它必须用.container(固定宽度)或.container-fluid(100%宽度)来包裹，并且通过.row类来定义每一行，最后用col-xs-*、col-sm-*、col-md-* 、col-lg-*来 指定最多12列中每一列的显示宽度，相当于把增高container的宽度按自定义的比例分配显示。
   
    1.2 代码示例：
1 
<!DOCTYPE html>

2 
<html>

3 
<head lang="en">

4 
    <meta charset="UTF-8">

5 
    <!--添加视口meta实现布局的自动适应-->

6 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

7 
​

8 
    <!--引入bootstrap样式文件-->

9 
    <link href="css/bootstrap.min.css" rel="stylesheet">

10 
​

11 
    <!--引入jq（必须在bootstrap.min.js文件之前）-->

12 
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>

13 
​

14 
    <!--引入bootstrap js-->

15 
    <script type="application/javascript" src="js/bootstrap.min.js"></script>

16 
    <title>Bootstrap学习</title>

17 
</head>

18 
<body>

19 
​

20 
    <div class="container">

21 
        <div class="row" style="margin-top: 40px;color: white">

22 
            <div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color: #1b6d85">

23 
                　苏苏是一痴心的女子，

24 
                象一朵野蔷薇，她的丰姿；

25 
                象一朵野蔷薇，她的丰姿

26 
                来一阵暴风雨，摧残了她的身世。

27 
            </div>

28 
​

29 
            <div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color:grey">

30 
                　苏苏是一痴心的女子，

31 
                象一朵野蔷薇，她的丰姿；

32 
                象一朵野蔷薇，她的丰姿

33 
                来一阵暴风雨，摧残了她的身世。

34 
​

35 
            </div>

36 
            <div class="col-xs-3 col-lg-6" style="padding-top:20px;height:240px;background-color:darkred">

37 
                这荒草地里有她的墓碑

38 
                淹没在蔓草里，她的伤悲；

39 
                淹没在蔓草里，她的伤悲——

40 
                啊，这荒土里化生了血染的蔷薇！

41 
            </div>

42 
            <div class="col-xs-3 col-lg-3" style="padding-top:20px;height:240px;background-color:blueviolet">

43 
​

44 
                那蔷薇是痴心女的灵魂，

45 
                在清早上受清露的滋润，

46 
                到黄昏里有晚风来温存，

47 
                更有那长夜的慰安，看星斗纵横。

48 
            </div>

49 
        </div>

50 
    </div>

51 
</body>

52 
</html>

 细心的伙伴可以发现我代码里面每列div设置了col-xs-*和col-lg-* 其实其中我们故意把大设备中 4个div的列数大于12,我们看看他在电脑(大设备)下的显示效果：
我们设置的在xs设备大小下显示的列数刚好是12,我们来看一下在移动端他的显示效果是不是刚好一行显示完
好的，上面的例子印证了bootstrap一行最多显示12列的情况。还可以看见我们并没有为div中的文字内容设置边距，但是看上面的效果似乎是有的，是的这就是bootstrap为我们的每一列内容div的左右两边都添加了15px的内边距，如下图。
好了，上面的我们学习以后，我们需要思考一个问题，bootstrap是怎样实现在不同设备上使用不同的样式的呢，答案是媒体查询。
    1.3 媒体查询
1 
@media (min-width: 1200px)

2 
.container {

3 
    width: 1170px;

4 
}

5 
@media (min-width: 992px)

6 
.container {

7 
    width: 970px;

8 
}

9 
@media (min-width: 768px)

10 
.container {

11 
    width: 750px;

12 
}

上面这部分css来自bootstrap.min.css，其实很明显可以看出他是通过@media媒体查询根据视口的min-width大小去对应设置不同的宽度的。
最后添加一个视口宽度与类前缀的对应关系表：
视口大小 超小屏幕 手机(<768px) 小屏幕 平板(>=768px) 中等屏幕 桌面显示器(>=992px) 大屏幕 桌面显示器(>=1200px)
类前缀 .col-xs-* .col-sm-* .col-md-* col-lg-*
好了bootstap的栅格化系统就学习到这儿。

Bootstrap的栅格化系统相关推荐

  1. 栅格化系统的原理以及实现

    更多技术文章 什么是栅格化 在一个有限的.固定的平面上,用水平线和垂直线(虚拟的线,"参考线"),将平面划分成有规律的一系列"格子"(虚拟的格子),并依托这些格 ...

  2. bootstrap解析-栅格系统

    .container(布局容器) 屏幕宽1200px以上(col-lg) 1. 默认width为1170px 2. padding,lefet和right各为15px,所以内容width为1140px ...

  3. 一文带你马上清楚bootstrap的栅格系统

    bootstrap的栅格系统 我们都知道bootstrap的栅格系统是为了实现网站的响应式布局,但bootstrap提供了一套响应式.移动设备优先的流式栅格系统,它会将网页分为12等价(宽度),举个例 ...

  4. Bootstrap 默认栅格系统

    Bootstrap的默认栅格系统为固定宽度布局,宽度为940px,共包含12列,每列的宽度为 60px,列间隙为 20px.如图 2‑1所示: 图2-1 Bootstrap默认栅格系统 HTML代码 ...

  5. 基于SSM+SpringBoot+MySQL+Thymelaf+Bootstrap的个人理财系统

    项目运行截图 个人登录 个人页面 零钱理财 工资理财 期限理财 基金理财 银行推荐 银行推荐 资金记录 安全网贷 我的理财 我的借贷 技术描述 开发工具: Idea/Eclipse 数据库: mysq ...

  6. html栅格系统格式,Bootstrap的栅格系统是什么？栅格系统详解

    本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统.栅格参数是什么,列偏移.列嵌套怎么设置.有一定的参考价值,有需要的朋友可以参考一下,希望对你 ...

  7. Bootstrap之栅格系统偏移

    Bootstrap之栅格系统偏移 Bootstrap之栅格系统偏移: 在Bootstrap中可能会使用到offset(偏移),具体语法格式如下: <div class="col-md- ...

  8. 深入理解BootStrap Item7 -- 栅格系统（布局）

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

  9. 【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页

    文章目录 1.bootstrap基本模板:meta/title,link/script 2.两种布局容器/栅格系统:自动补 3.样式_表格/按钮/图片/表单:class属性,for属性联动 4.组件_ ...

最新文章

  1. AI如何设计，才能人类利益最大化？
  2. 导弹拦截(pascal)
  3. idea ctrl+shift+f快捷键失效
  4. 7限制cpu使用_Kubernetes 资源配额使用指南 | Linux 中国
  5. MyBatis与Hibernate比较
  6. 华为手机丢失定位网站_手机端网站优化要从网站的设计和定位开始入手
  7. html渐变编织背景,【报Bug】uniapp设置了css渐变背景色编译时会报错
  8. java基础语法3 方法
  9. 【连载】如何掌握openGauss数据库核心技术？秘诀三：拿捏存储技术（4）
  10. 分享一个SQL文件的合并的小程序
  11. java 字符串 数字个数_JAVA 统计字符串中中文，英文，数字，空格的个数
  12. Weblogic 9.2 for Linux AS4u5安装配置
  13. 532. 数组中的K-diff数对
  14. 1436：数列分段II
  15. 黑盒测试——因果图法
  16. 数字接龙 用计算机完成318,微信报名接龙数字如何排列对齐传递
  17. PB函数大全【转自 http://blog.csdn.net/xiaoxian8023 】
  18. 0基础学绘画怎么临摹
  19. jquerymobile-16 select menu
  20. Java基础学习汇总

热门文章

  1. 教你如何更好的编写JAVA单元测试
  2. Snagit长截图或完整截图技巧
  3. 面试 | 今日头条测试开发岗位面试题目回顾
  4. flutter瀑布式图文列表
  5. iPhone刷机iOS9 Beta和iWatch刷机watchOS2 Beta详细步骤
  6. Flask 吐血400错误
  7. net-tools is needed by mysql-community-server-5.7.21-1.el7.x86_64
  8. Excel工资条一键发送系统
  9. Android MediaRecorder 后台视屏录制
  10. zabbix微信告警HTML,ZABBIX实现微信告警