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

BootStrap 网格系统

作者: 博为峰51Code教研组 | 来源:发表于2017-05-03 19:26 被阅读0次

网络系统

bootstrap允许将页面划分成共12个等宽逻辑单元,既允许单独地使用这12个等分逻辑单元,也可以将其相邻的列合并成一个更宽的逻辑单元,甚至在一个逻辑单元中再划分12个子逻辑单元。如下图所示:

网格用到的类样式Bootstrap的网络系统支持可响应式布局,当其列屏幕大小发生变化时则自动计算列宽。

共有4个:

xs (phones)

sm (tablets)

md (desktops)

lg (larger desktops)

下面是BootStrap网络的基本结构:

"row">

"col-*-*">

"row">

"col-*-*">

"col-*-*">

"col-*-*">

"row">

...

示例

下面的示例是Bootstrap官方提供的基于Bootstrap构造HTML面页基本模板。

"en">

Bootstrap Example

"utf-8">

"viewport"content="width=device-width, initial-scale=1">

"stylesheet"href="css/bootstrap.min.css">

"js/jquery.min.js">

"js/bootstrap.min.js">

"text/css">

div{

border-left:1px dotted blue;

border-bottom:1px dotted blue;

}

"row">

"col-sm-1">1

"col-sm-1">2

"col-sm-1">3

"col-sm-1">4

"col-sm-1">5

"col-sm-1">6

"col-sm-1">7

"col-sm-1">8

"col-sm-1">9

"col-sm-1">10

"col-sm-1">11

"col-sm-1">12

"row">

"col-sm-4">4-1

"col-sm-4">4-2

"col-sm-4">4-3

"row">

"col-sm-4">4

"col-sm-8">8

"row">

"col-sm-6">6-1

"col-sm-6">6-2

效果如下图所示:

相关文章

  • 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/dqjltxtx.html