bootstrap是什么？
一套易用，优雅，灵活，可扩展的前端工具集---Bootstrap
GitHub上介绍的Bootstrap：
- 简单灵活可用于架构流行的用户界面和交互接口的HTML、CSS、JavaScript工具集。
- 基于HTML5、CSS3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网， 样式向导文档。
- 自定义jQuery插件，完整的类库，基于Less等。
Bootstrap安装方法
-
进入官网先下载，要求速度的话，下载用于生产环境的bootstrap。
TIM图片20190111163600.png - 在GitHub上建立一个空仓库，在Gitbase上
git clone之后在分别运行以下代码，先把远程仓库变为本地仓库。
echo "# 111" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:lliqi/111.git
git push -u origin master
2.png
-
把下载下来的文件夹复制到变为本地仓库的远程仓库中。
TIM图片20190111164544.png touch index.htmlvi index.html
<html lang = "zh-Hans">
<head>
<meta charset = "UTF-8">
<title>我的第一个 BS demo</title
<link rel = "stylesheet" href = "./css/bootstrap.min.css">
<script src = "./js/jquery.min.js"></script>
<script src = "./js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
以上文件均在下载的文件夹中，一定要在引入bootstrap之前确保电脑里有jQuery，如果没有，采用npm i jquery，安装jQuery。
- 以上变安装完毕。
CSS全局样式：网格布局
- bootstrap官方教程
- 进入全局CSS样式
- 网格布局
- 所有的内容都包含在.container中，.row的存在使元素的行宽宽15px，因为他默认有负margin。
margin-left:-15px;margin-right:-15px。
<div class="container">
...
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
- 平均分12个格子，后面的数字是几，就占几个格子,和里面问文字是没关系的，和class的文字有关，但是一定要用row包裹。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
- 一旦分的格数超过12，就会自动换行，以下代码11自动换行，2和11单独沾满一行。
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-11">.col-md-11</div>
</div>
- 一旦分隔数小于12，就不会充满12格，中间的空隙可以发生偏移，叫列偏移
- 列偏移
- 偏移多少列，就在
col-md-offset-后面写数字
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
CSS全局样式：响应式
- media媒体查询的划分
- 0-768，超小号屏幕，手机
col-xs - 768-992，小号屏幕，iPad
col-sm - 992-1200，中号屏幕
col-md - 1200-无穷大，大号屏幕
col-lg
- 语法：可以给一个div同时加多个布局,优先使用小型屏幕。
<div class="col-lg-1 col-md-4 col-sm-3 col-xs-6">.col-md-1</div>
其中，col-xs-6可以放2个width: 50%，即12/6.col-sm-3可以放4个width:25%，即12/3. - 注意宽度变化。
CSS全局样式：其他样式
- h1-h6写在col里面,h和small可以混在一起用。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> - 表格：代码没有写，右键在审查元素里面复制粘贴copy-copyHTML.
- 如果想要添加类，一定不要添加在布局的div上，采用方法：新添加一个div，添加一个新class。
- 可用的类
组件：
- 没有代码就审查元素copy.
- 文档中红色字看一遍。
-
aria-label="..."可以删掉 - 想实现左右布局，在.row里面嵌套.row就可以了。
<div class = "container">
<div class = "row">
<p></p>
<div class = "row">
<div class = "col-md-6">
<button></button>
</div>
<div class = "col-md-6">
<span></span>
</div>
</div>
</div>
- 右浮，写
pull-right，同时不写col，使宽度达到自适应。 - 下载的bootsrtap中右可选的主题CSS，如果用得到，添加即可。
<link rel = "stylesheet" href = "./css/bootstrap.theme.css"> - 或者花钱买更好的主题。
JS插件
- 先学JS
- 在学jQuery
- 把bootstrap文档看完
小知识点
- Bootstrap默认支持jQuery。
- （Twitter）前端写的。
- Bootstrap知乎评价不好。（小公司用的）
- 版本:http://www.bootcss.com/
- 生产环境：给付费用户用的环境就是生产环境
- 开发环境：npm i -g http-server（测试用）
- 引入bootstrap.js会先检查是否有jQuery，所以必须先下载jQuery.
npm i jquery - 要在JS之前引用jQuery。要先检测是否有jQuery。
<script src = "./js/jquery.min.js"></script>
<script src = "./js/bootstrap.min.js"></script>
- .row是有负margin，所有的内容都在.container中。row可以使行宽宽15px.
- 布局使用div，是因为div没有默认样式
