本文详细介绍了Bootstrap的基础布局和栅格系统。Bootstrap是一个前端开发框架，包括HTML、CSS和JavaScript组件。布局中关键元素是.container容器，用于包裹内容。栅格系统采用12列响应式设计，根据列数相加情况调整元素排列方式，如相加等于12则占满宽度，小于12留有空白，大于12则换行。同时，文章还提及了响应式工具的使用。
文章目录
一、bootstrap布局
1.什么是bootstrap布局
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，提供了优雅的HTML和CSS规范，由动态CSS语言Less写成。
2.布局容器
bootstarp需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好了这个类
3.使用方法
1创建文件夹结构
2创建html骨架结构
3引入相关样式文件
4书写内容
做完这步后就可以去网站里面找已经写好的模型进行修改，就可以快速的写出需要做的样式
二、栅格系统
1.栅格系统
指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局，然后bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为12列
2.栅格选项参数
| 超小屏幕（小于768px） | col-xs-份数 |
|---|---|
| 小屏设备（>=768px ~ <992px） | col-sm-份数 |
| 中等屏幕（>= 992px ~ <1200px） | col-md-份数 |
| 宽屏设备（>=1200px） | col-lg- 份数 |
2.1 份数相加结果出现的情况
1.如果孩子的份数相加 等于 12 则孩子能占满整个 的container 的宽度
2.如果孩子的份数相加 小于 12 则占不满整个宽度会有空白
3.如果孩子的份数相加 大于 12 则多出来的那一列会另起一行显示
2.1.1
相加得12的代码演示：
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
div {
height: 40px;
background-color: pink;
border: 1px solid green;
}
</style>
</head>
<body>
<div class
最低0.47元/天 解锁文章
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
