Bootstrap学习笔记 Hello_yihao的博客

最新推荐文章于 2022-01-02 13:43:38 发布

Hello_yihao

最新推荐文章于 2022-01-02 13:43:38 发布

阅读量576

点赞数 2

分类专栏：学习笔记文章标签： bootstrap css html5

本文链接：https://blog.csdn.net/Hello_yihao/article/details/78275641

版权

学习笔记专栏收录该内容

19 篇文章 2 订阅

订阅专栏

Bootstrap学习笔记

使用步骤

导入bootstrap文档
引入文件

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
引入css文件
<link rel="stylesheet" href="bootstrap.min.css"/>

在引入的css文件下面可以引入自己定义的css文件方便修改样式。
引入完css后首先引入 jQuery 文件 bootstrap 的js插件是基于jQuery文件

<script src="jquery-1.10.2.min.js"></script>
<script src="bootstrap.min.js"></script>

也可以直接引入百度静态资源库

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

栅格系统：
原理：

通过定义容器的大小，平分为12份，再调整内外边距，
最后在结合媒体查询，就制作出了功能强大的栅格系统

栅格系统工作原理

一行数据（row）必须包含在.container中以便赋予其合适
的对齐方式和内边距
使用行在水平方向创建一组列，具体内容放在列内，列可以作为行的直接子元素内置的一大堆样式，可以使用col-xs-4（占四列宽度）的样式来快速创建栅格

栅格容器
定义12栅格容器需要给外层容器设置类名 .container
定义行：<div class="row"></div>
定义列：<div class="col-md-1">第一列</div>
.col-xs-：超小屏
.col-sm-：小屏
.col-md-：中屏
.col-lg-：大屏
<div class="col-md-1">第一列</div>col-md-后面的数值表示占比1表示 1占12分之一 2表示占12分之2……

 <div class="row">
        <div class="col-md-4">占四份</div>
        <div class="col-md-8">占八份</div>
    </div>

一行12格第一列占一行（12）的4/12 第二列占一行的8/12
不满足12格时根据占比会自动补充
偏移列
将内容（列）向右推如果推出了12栅格所占的比例其后的内容就会掉下去

<div class="row">
        <!--col-md-offset-1 向右推一格-->
        <div class="col-md-4 col-md-offset-1">占四份</div>
        <div class="col-md-5 col-md-offset-2">占五份</div>
    </div>

col-md-offset-数值数值是几就表示向右推几格
调换列的位置
调换列的位置，前面的跑到后面后面的跑前面。
1. 从结构上调换（太土，不合适）
2. col-md-push-5 : 向后挪5格 col-md-pull-4 ：向前挪4格

<div class="row">
        <div class="col-md-4 col-md-push-5">占四份</div>
        <div class="col-md-5 col-md-pull-4">占五份</div>
    </div>

列嵌套
根据其父级来划分栅格

<div class="row">
        <div class="col-md-9">father
            <div class="row">
                <div class="col-md-6">father>child1</div>
                <div class="col-md-6">father>child2</div>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>

在代码.row中其第一个子元素中，又嵌套了一行，而一行中又有两列，但这两列划分栅格却是在他们父级中来划分，与其祖父无关

代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <title></title>

    <style>
        body{
            margin-top: 50px;
        }
        div{
            outline: 1px solid green;
        }
        .parent{
            outline: none;
        }
        .parent>div:nth-child(2){
            margin-top: 10px;
        }
    </style>
</head>
<body>
<!--12栅格-->
<!--定义容器-->
<div class="container parent">
    <!--定义行-->
    <div class="row">
        <!--定义列 md：中屏 占比是 1 占了12份的1份-->
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <div class="col-md-1">第一列</div>
        <!--多出来的部分会掉下来-->
        <div class="col-md-1">第十三列</div>
        <div class="col-md-1">第十四列</div>
    </div>

    <div class="row">
        <div class="col-md-4">占四份</div>
        <div class="col-md-8">占八份</div>
    </div>
    1.不满足12格时 会自动补充
    <div class="row">
        <div class="col-md-4">占四份</div>
        <div class="col-md-7">占七份</div>
    </div>
    2.不满足12格时 根据占比会自动补充
    <div class="row">
        <div class="col-md-3">占三份</div>
        <div class="col-md-6">占六份</div> 占三份
    </div>
    3.不满足12格时 根据占比会自动补充
    <div class="row">
        <div class="col-md-2">占二份</div>
        <div class="col-md-5">占五份</div> 占五份
    </div>
    将内容（列）向右推  如果推出了12栅格所占的比例 其后的内容就会掉下去
    <div class="row">
        <!--col-md-offset-1 向右推一格-->
        <div class="col-md-4 col-md-offset-1">占四份</div>
        <div class="col-md-5 col-md-offset-2">占五份</div>
    </div>
    调换 列 的位置，前面的跑到后面 反之。 <br/>
        1. 从结构上调换 （太土，不合适）<br/>
        2. col-md-push-5 : 向 后 挪5格  col-md-pull-4 ：向 前 挪4格
    <div class="row">
        <div class="col-md-4 col-md-push-5">占四份</div>
        <div class="col-md-5 col-md-pull-4">占五份</div>
    </div>
    列嵌套  根据其父级来划分栅格
    <div class="row">
        <div class="col-md-9">father
            <div class="row">
                <div class="col-md-6">father>child1</div>
                <div class="col-md-6">father>child2</div>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

使用工具： webstorm
浏览器：chrome

Hello_yihao

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap学习笔记 Hello_yihao的博客

Bootstrap学习笔记栅格列嵌套列移动使用步骤导入bootstrap文档引入文件meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>引入css文件link r
复制链接

扫一扫

专栏目录