移动Web开发之Bootstrap (Web框架)

目录

一、为什么使用Bootstrap?

二、如何使用Bootstrap?

三、布局容器

3.1 container类

3.2 container-fluid类

四、栅格系统

4.1栅格选项参数

 4.2 列嵌套

4.3 列偏移

 4.4 列排序

 4.5 响应式工具


一、为什么使用Bootstrap?

1.标准化的html+css编码规范

2.提供一套简洁,直观,强悍的组件

3.有自己的生态圈,不断的更新迭代

4.让开发更简单。提高了开发的效率

二、如何使用Bootstrap?

下载网址:Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等,助力开发者掌握并使用这一框架。https://www.bootcss.com/

简单的四步曲,快速上手使用bootstrap:

1.创建文件夹结构

2.创建html骨架结构

3.引入相关样式文件

4.书写内容 

注意:新建bootstrap文件夹并把下载的css,fonts,js文件夹放入

 文件夹结构示例图如下:

 引入相关样式文件:

三、布局容器

3.1 container类

        响应式布局的容器,固定宽度

屏幕尺寸 尺寸设置
超小屏 小于768px  宽度设置为100%
小屏幕 大于等于768px 宽设为750px
中等屏幕 大于992px 宽设为970px
大屏幕 大于等于1200px 宽设为1170px

3.2 container-fluid类

        流式布局容器 百分百宽度,占据全部视口的容器,适合于单独做移动端开发。

四、栅格系统

4.1栅格选项参数

使用方法:

<div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
</div>

 4.2 列嵌套

特别提醒:列嵌套最好加一个行row这样可以取消父元素的padding值而且高度自动和父级一样高

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-4">a</div>
                    <div class="col-md-8">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

4.3 列偏移

使用.col-md-offest-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距

偏移的份数就是12减两个盒子的份数

代码展示:

//css部分
<style>
    .row div {
        height: 50px;
        background-color: pink;
    }
</style>
//html部分
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <div class="col-md-4 col-md-offset-4">右侧</div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>
</body>

 4.4 列排序

用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列顺序

代码展示:将左右盒子位置互换

//css部分---------------------
<style>
     .row div {
         border: 1px solid purple;
         height: 50px;
         background-color: pink;
     }
 </style>

//html部分--------------------
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>
</body>

 4.5 响应式工具

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 300px;
            background-color: purple;
        }
        
        .row div:nth-child(3) {
            background-color: pink;
        }
        
        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会显示</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">我会隐藏</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>

</html>

最后,container 提供了一个15px的padding,row 是 column 直接存在的容器,row 默认最多可有12个 column,也能消除container属性默认的padding值。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>