Bootstrap-栏格布局

开始之前先了解一下什么是Bootstrap?

Bootstrap是美国的一个著名社交软件公司:Twitter(推特)推出的一个开源前端框架!

Bootstrap有什么?

基本结构:Bootstrap内嵌了一个栅格系统、连接样式等!

CSS:Bootstrap有:全局CSS属性、可以定义基本HTML元素样式、可扩展的类(class)

组件:Bootstrap包含了很多可以重复使用的组件,可以创建画像、下拉菜单、导航、弹出框等等!

JavaScript插件:Bootstrap内嵌了一些jQuery的插件,你可以直接直接使用!

自定义:你可以自己定制Bootstrap组件,Less变量和jQuery插件来得到属于你自己的组件!

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

栏格布局是一个很强大的系统,下面来了解一下栏格布局系统的:由堆叠到水平

我们知道,Bootstrap是兼容各种设备的,并且:移动设备优先!

我们可以看一下Bootstrap在不同设备是如何工作的:

 

超小移动设备(手机)

 <768px

小屏幕设备(平板)

>=768px

中等设备(桌面)

>=992px

大屏幕设备(桌面)

>=1200px

栅格系统行为总是水平排列开始是堆叠在一起的,超过这些阈值将变为水平排列<-----同左<----同左
最大.container宽度None(自动)750px970px1170px
class前缀.con-xs-.con-sm-.con-md-.con-lg-
列数12121212
最大列宽自动60px78px95px
槽宽30px(每列左右均有15px)   
可嵌套
offsetsN/AYesYesYes
列排序N/AYesYesYes

从表格来看,Bootstrap可以适配不同屏幕大小(包括手机)的设备!

 

下面来看一个例子:从堆叠到水平:

<!DOCTYPE html>
<html>
<head>
    <title>从堆叠到水平</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        div{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
        }
    </style>
</head>
<body>
  <p style="text-align: center;font-size: 30px">栏格布局-由堆叠到水平</p>
   <div class="container">
        <--必须包含在:.row容器里面!-->
       <div class="row">
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
           <div class="col-md-1">.con-md-1</div>
       </div>
       
       <div class="row">
           <div class="col-md-8">.con-md-8</div>
           <div class="col-md-4">.con-md-4</div>
       </div>
       
       <div class="row">
           <div class="col-md-4">.con-md-4</div>
           <div class="col-md-4">.con-md-4</div>
           <div class="col-md-4">.con-md-4</div>
       </div>
       
       <div class="row">
           <div class="col-md-6">.con-md-6</div>
           <div class="col-md-6">.con-md-6</div>
       </div>
   </div>
    
</body>
</html>

最终效果:

 

这是堆叠效果,那水平怎么实现?

前面说了,bootstrap兼容所有设备,我们可以通过缩放浏览器窗口大小来模拟低分辨率的设备,就像下面:

可以看到,页面由开始的大屏幕设备的堆叠布局,逐渐变为小屏幕设备的水平布局!

 

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

阿沅lmo

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者