Bootstrap学习笔记 Hello_yihao的博客

来源：互联网发布：acdsee mac pro注册机编辑：程序博客网时间：2024/05/03 09:35

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

阅读全文

2 0