BootStrap网格布局

  如何使用BootStrap样式

  BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了。

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

  在代码中,直接使用class就可以使用其定义的样式,例如使用它button样式,就可以按照下面的方式:

<button class="btn btn-primary" type="button">Reset</button>

  什么是网格布局

  目前流行的响应式布局,在显示界面设定了集中宽度,当宽度满足一定的标准时,就是用当前宽度支持下的样式。

  这样就可以使一种开发,支持移动端、以及各种分辨率的显示器,达到良好的使用效果。

  BootStrap把网页分成12个网格,并有下面四中宽度:自动、750px、970px和1170px

  当屏幕属于其中某个区间时,自动使用对应的样式。

  使用的基本语法,类似下面:container---->row---->column

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

  提供个简单的样例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基本用法</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <button class="btn btn-primary col-md-8" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-primary col-md-3" type="button">test</button>
    <button class="btn btn-primary col-md-6" type="button">test</button>
    <button class="btn btn-primary col-md-3" type="button">test</button>
  </div>
</div>
</body>
</html>

  主要要满足网格数目不超过12个,超过的部分会自动挤到下一列!

  样式运行效果分别如下:

  最大的宽度下:

  中等宽度下:

  最小宽度下:

  网格列偏移

  BootStrap中支持网格的列偏移:直接在样式中col-md-offset-*就可以达到偏移效果。

  例如下面的代码:

<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <button class="btn btn-primary col-md-4 col-md-offset-4" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
</div>

  第一行的第二个button就达到了列偏移4个网格的效果:

  网格嵌套

  在BootStrap中也支持网格的嵌套,同样也需要嵌套中的网格满足12格的划分原则

<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <div class="col-md-8">
        <div class="row">
            <button class="btn btn-info col-md-4" type="button">test</button>
            <button class="btn btn-info col-md-4" type="button">test</button>
            <button class="btn btn-info col-md-4" type="button">test</button>
          </div>
    </div>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
</div>

  效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

Python实现图像空域随机水印加入与提取

本文要点在于Python扩展库pillow中Image类的运用。图像空域随机水印的主要思路在于:在原始图像中随机选取一些位置替换为水印图片中的非背景像素,同时生...

5095
来自专栏HTML5学堂

前端特效开发 | 点击查看大图相册效果

HTML5学堂(码匠):图片的展示是一个网站中最吸引人的区域,除了图片本身的内容精彩以外,常常还会有各种各样的展示形式。而对于前端开发来说,一个精美的图片展示效...

4898
来自专栏用户2442861的专栏

关于CSS中background样式的repeat和no-repeat的坐标问题

http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html

821
来自专栏WindCoder

Ps中懵懂斋老师的抽线方法

首先,打开要抽线的图片(Ctrl+O),复制图层(Ctrl+J)。抽线效果一般不需要保留色彩。使用图像>调整>去色(Shift+Ctrl+U),然后再复制一个图...

1461
来自专栏有趣的django

3.python词云图的生成

2633
来自专栏前端黑板报

纯CSS实现宽高相等(或者其他比例)

动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。 基础结构与样式: 1 2<div class="box"> </div> ...

3677
来自专栏菩提树下的杨过

Matplotlib新手上路(中)

接上回继续 一、多张图布局(subplot) 1.1 subplot布局方式 import matplotlib.pyplot as plt plt.figu...

3626
来自专栏林德熙的博客

wpf VisualBrush 已知问题

本文告诉大家,visualBrush 已知 bug ,希望大家使用 VisualBrush 时可以知道

2061
来自专栏WindCoder

20种常用的 Ps技术

一种简单的数码照片后期润饰 1 打开图片,执行色像/饱和度(-40)降低饱和度。 2 新建一图层,将图层模式改为柔光,用画笔工具将需要润饰的部分画几下,这里...

1801
来自专栏我和PYTHON有个约会

ionic中的$inoicModal

在ionic中,除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】

822

扫码关注云+社区

领取腾讯云代金券