Bootstrap学习笔记 Hello_yihao的博客

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Hello_yihao/article/details/78275641

Bootstrap学习笔记


使用步骤

  1. 导入bootstrap文档
  2. 引入文件
<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


没有更多推荐了,返回首页