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(自动) 750px 970px 1170px
class前缀 .con-xs- .con-sm- .con-md- .con-lg-
列数 12 12 12 12
最大列宽 自动 60px 78px 95px
槽宽 30px(每列左右均有15px)      
可嵌套
offsets N/A Yes Yes Yes
列排序 N/A Yes Yes Yes

从表格来看,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兼容所有设备,我们可以通过缩放浏览器窗口大小来模拟低分辨率的设备,就像下面:

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

 

 

posted @ 2019-09-03 18:03  阿沅lmo  阅读(47)  评论(0编辑  收藏  举报