美文网首页我爱编程
bootstrap网格系统

bootstrap网格系统

作者: 子非鱼666 | 来源:发表于2016-06-18 15:47 被阅读76次

基本用法:
网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏(970px)为例进行介绍,其他屏幕的使用也类似这一种。关于屏幕尺寸如下图:

屏幕尺寸图
列偏移
有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度

列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)。

相关文章

  • Bootstrap学习(一)入门

    Date: 2018-10-17 1、Bootstrap网格系统 Bootstrap网格系统定义: Bootstr...

  • Jump Start Bootstrap 中文版 第2章

    第2章 Bootstrap 网格系统 在这一章,我们将讨论Bootstrap一个最重要的功能:网格系统。我们将学会...

  • BootStrap 网格系统

    网络系统 bootstrap允许将页面划分成共12个等宽逻辑单元,既允许单独地使用这12个等分逻辑单元,也可以将其...

  • bootstrap网格系统

    基本用法:网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootst...

  • Bootstrap网格系统

    基本的网格结构下面是 Bootstrap 网格的基本结构: 1 row必须在container中,是行的概念,原本...

  • Bootstrap网格系统

    Bootstrap 4包含了一个强大的移动优先的网格系统,它是基于一个12列的布局,有5种响应尺寸(对应不同的屏幕...

  • Bootstrap网格系统

    尺寸对应尺寸对应图 所有类名① 容器:container, example-container, containe...

  • 2018-09-17bootstrap基本的用法

    Bootstrap的网格系统将屏幕...

  • Bootstrap初学

    为什么前端不用Bootstrap 1.Bootstrap 引入 2.网格/栅栏系统 布局容器 .container...

  • 0215--Bootstrap

    1.Bootstrap网格系统(Grid System)Bootstrap 提供了一套响应式、移动设备优先的流式网...

网友评论

    本文标题:bootstrap网格系统

    本文链接:https://www.haomeiwen.com/subject/vstbdttx.html