web前端开发第一阶段——bootstrap响应式布局

最新推荐文章于 2024-06-19 12:43:25 发布

资本理念

最新推荐文章于 2024-06-19 12:43:25 发布

阅读量327

点赞数

分类专栏： web前端笔记总结

本文链接：https://blog.csdn.net/qq_43151638/article/details/102825318

版权

web前端笔记总结专栏收录该内容

78 篇文章

订阅专栏

本文介绍了Bootstrap框架在web前端开发中的应用，重点讲解了容器的标签大小、栅格系统的布局方式以及缩略图组件的使用。同时提到了Bootstrap中的偏移量、浮动样式和响应式工具，并强调在开发环境中，为了提高效率，可以使用带有注释和警告的代码，而在生产环境中，代码会进行压缩，去除警告和注释。最后，提供了Bootstrap的官方网址供进一步学习。

摘要由CSDN通过智能技术生成

ps:

记熟class样式，可提高速度
其中js使用的jquery库
开发环境：程序员使用时
有空格有注释，有警告，有提示的代码
生产环境：用户直接使用时
压缩，没有警告，没有注释

bootstrap

容器：标签大小

固定容器：container
	大屏1170、中屏970、小屏750、超小屏100% 
流体容器：container-fluid 100%

栅格系统：通过一系列row和column的组合来布局

分成12份
row:tr 行
col:份
col-lg-3:大屏占3份
lg:大屏——屏幕范围大于1200px 
md:中屏——屏幕范围992px--1200px
sm:小屏——屏幕范围768px-992px
xs:屏幕范围<768 超小屏

缩略图——组件

偏移量：

col-md-offset-1:列偏移量，改变margin值使内容移动   向右
col-md-push-1：通过定位使内容移动（对兄弟标签位置无影响）向右
col-md-pull-1： 向左移

浮动样式：

pull-left：左浮动
pull-right：右浮动 
affix:固定定位但是需要自己写left等值

响应式工具：

	hidden-xs：超小屏隐藏
	visible-xs:可见，其它屏隐藏

字体图标库

基类：glyphicons
	使用字体图标先给class加一个基类，再加上字体图标的名称

笔记补充

- 偏移量
- 使用 col-md-offset-x 样式，通过改变 margin 值内容移动，会影响兄弟标签
- 使用col-md-push-x 样式，通过定位的方式使内容向右移动，不会对兄弟标签产生影响
- 使用 col-md-pull-x 样式，通过定位的方式是内容向左移动，不会对兄弟标签产生影响
- 浮动样式：
- pull-left：左浮动
- pull-right：又浮动
- affix：固定定位，但是需要自己写 left top right botoom 的值
- 响应式工具
- hidden-xs：只有超小屏幕隐藏
- visible-xs：只有超小屏幕时可见，其它屏幕时隐藏
- 字体图标库
- 基类：glyphicons
	使用字体图标时先给 span 的class加一个基类，在加上字体图标的名称

官网——bootstrap
https://www.bootcss.com/