css-Bootstrap的使用方法：复制粘贴

bootstrap是什么？

一套易用，优雅，灵活，可扩展的前端工具集---Bootstrap
GitHub上介绍的Bootstrap：

• 简单灵活可用于架构流行的用户界面和交互接口的HTML、CSS、JavaScript工具集。
• 基于HTML5、CSS3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网， 样式向导文档。
• 自定义jQuery插件，完整的类库，基于Less等。

Bootstrap安装方法

1. 进入官网先下载，要求速度的话，下载用于生产环境的bootstrap。

   
   
   

   TIM图片20190111163600.png
2. 在GitHub上建立一个空仓库，在Gitbase上git clone之后在分别运行以下代码，先把远程仓库变为本地仓库。

echo "# 111" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin [email protected]:lliqi/111.git
git push -u origin master

2.png

3. 把下载下来的文件夹复制到变为本地仓库的远程仓库中。

   
   
   

   TIM图片20190111164544.png
4. touch index.html
5. vi index.html

以上文件均在下载的文件夹中，一定要在引入bootstrap之前确保电脑里有jQuery，如果没有，采用npm i jquery，安装jQuery。

6. 以上变安装完毕。

CSS全局样式：网格布局

1. bootstrap官方教程
2. 进入全局CSS样式
3. 网格布局

• 所有的内容都包含在.container中，.row的存在使元素的行宽宽15px，因为他默认有负margin。margin-left:-15px;margin-right:-15px。

  ...


  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1
  
.col-md-1

• 平均分12个格子，后面的数字是几，就占几个格子,和里面问文字是没关系的，和class的文字有关，但是一定要用row包裹。

  
.col-md-4
  
.col-md-4
  
.col-md-4


  
.col-md-6
  
.col-md-6

• 一旦分的格数超过12，就会自动换行，以下代码11自动换行，2和11单独沾满一行。

  
.col-md-2
  
.col-md-11

• 一旦分隔数小于12，就不会充满12格，中间的空隙可以发生偏移，叫列偏移

4. 列偏移

• 偏移多少列，就在col-md-offset-后面写数字

  
.col-md-4
  
.col-md-4 .col-md-offset-4

CSS全局样式：响应式

• media媒体查询的划分

1. 0-768，超小号屏幕，手机col-xs
2. 768-992，小号屏幕，iPad col-sm
3. 992-1200，中号屏幕col-md
4. 1200-无穷大，大号屏幕col-lg

• 语法：可以给一个div同时加多个布局,优先使用小型屏幕。
  
  .col-md-1
  
  其中，col-xs-6可以放2个width: 50%，即12/6. col-sm-3可以放4个width:25%，即12/3.
• 注意宽度变化。

CSS全局样式：其他样式

• h1-h6写在col里面,h和small可以混在一起用。
  

  h1. Bootstrap heading Secondary text

• 表格：代码没有写，右键在审查元素里面复制粘贴copy-copyHTML.
• 如果想要添加类，一定不要添加在布局的div上，采用方法：新添加一个div，添加一个新class。
• 可用的类

组件：

• 没有代码就审查元素copy.
• 文档中红色字看一遍。
• aria-label="..."可以删掉
• 想实现左右布局，在.row里面嵌套.row就可以了。

• 右浮，写pull-right，同时不写col，使宽度达到自适应。
• 下载的bootsrtap中右可选的主题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。

• .row是有负margin，所有的内容都在.container中。row可以使行宽宽15px.
• 布局使用div，是因为div没有默认样式