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不是特别难的框架,但是有几点需要掌握:首先需要会找组件,其次需要会对找到的组件进行样式修改(我们用框架是需要框架适应我们的项目,不是项目适应框架!)

猜你喜欢

转载自blog.csdn.net/qq_42049445/article/details/83650844