1.Bootstrap其实就是一个常用的框架，使得很多常用的css样式不用我们自己去手写，可以直接复制粘贴bootstrap里面的代码，需要改的部分自己修改就行
2.要使用这个bootstrap框架的话直接在百度查，然后下载就行
3.使用时需要注意的就是要先把模板定义好：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//
cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//
cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//
cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
4.如何看bootstrap文档
（1）主要分为三大块：全局CSS样式、组件（里面其实就是一堆预定义好的层次结构）、插件
·对于组件里面的图标，图标下面的那些字母其实就是class名
（2）注意一下激活状态，实践项目中经常会用到这种效果
（3）栅格系统（重点）
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 （viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
•“行（row）”必须包含在
.container
（固定宽度）
或
.container-fluid
（100% 宽度）
中，以便为其赋予合适的排列（aligment）和内补（padding）。
•通过“行（row）”在水平方向创建一组“列（column）”。
•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
•类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
•通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
•负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
•栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
•如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
•栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
通过研究后面的实例，可以将这些原理应用到你的代码中。
栅格系统的偏移：
·横格一行默认为只能使用12份
·偏移的宽度也是在这12份里面的
·所以一行能够放置的元素的计算 需要考虑偏移值
（4）注意响应式工具，也会经常用到
·container类是一个容器，在移动端界面里面固定宽度且居中，并且具有响应式的效果（根据设备做出相对应的调整）
这节笔记写的有点乱，因为看的是两个不同的视频，很多东西是后期看另外一个视频的时候加上来的，希望大家理解。
·语法：col-offset-x —— 其中xx和栅格系统对应屏幕宽度是一致的
扫一扫
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
