web前端CSS框架Bootstrap笔记

Bootstrap笔记
前言：bootstrap的核心：

1.媒体，即需要对虽然栅格系统是响应的，但是有些文字之类的不是响应的，所以需要进行单独适配
@media screen and (max-width: 785px) {
body {
background-color:lightblue;
}
}对小屏幕进行一些字体或图标、导航栏的大小修改
2.对一些标签对不同的屏幕大小进行隐藏一些不必要的内容

1.字体图标大小通过fontsize修改，而不是width
2.当一个控件设定好了，想要让它在现有样式下，变宽，可以通过padding来调节
3. 当需要下面这种样式时可以用无序列表dl来写

4.padding和margin的区别
5.Img居中，得加center-block，要不然改不了，因为有img-responsive所以不能居中
6.要学会查bootstrap组件
7.图片居中center-block
8.当需要从数据库中引入图片时，不能直接给图片加属性，需要通过JQuery代码修改，如

9.对文本居中可以在div中使用累text-center
10.做网页的时候注意不要用单色
11.当把导航栏固定了，需要更改body，即如果你对导航栏的pading进行修改，那就需要修改body的padding-top为导航条padding加导航条宽度

12.还有就是字体图片，两种：A.是bootstrap自带的字体图标（去Bootstrap网站上找就行）B.是阿里图标库，将需要的图标加入购物车，然后加入项目中，先复制项目的Css链接，在文档中link它，然后再复制需要的图标代码（这些都是类）,通过在i或p中添加该类就行
13.可以通过加pull-right或pull-left使组件向左或者向右对齐
14.栅格系统：可以通过hidden-lg之类的设计相应的组件在相应的屏幕隐藏（当需要一些单独的div，可以不加每个div加栅格系统，但是这个div需要在栅格系统中）

总结：bootstrap不是特别难的框架，但是有几点需要掌握：首先需要会找组件，其次需要会对找到的组件进行样式修改（我们用框架是需要框架适应我们的项目，不是项目适应框架！）