Bootstrap的栅格化系统

最新推荐文章于 2024-10-13 17:45:47 发布

小巷下起了雨

最新推荐文章于 2024-10-13 17:45:47 发布

阅读量5.1k

点赞数 1

分类专栏： front-end(bootstrap) 文章标签： bootstrap 栅格化系统 col media

本文链接：https://blog.csdn.net/qq_28057577/article/details/77017472

版权

本文介绍了Bootstrap的栅格化系统，包括其描述、代码示例和媒体查询。Bootstrap栅格系统允许根据设备视口大小灵活地展示最多12列的内容。通过.container和.row类，以及.col-xs-*, .col-sm-*, .col-md-*和.col-lg-*等类，可以创建响应式布局。示例代码展示了不同设备尺寸下，如何调整列的宽度。媒体查询在不同视口宽度下设置.container的宽度，实现响应式效果。" 103643004,6876524,理解Base64编码：原理与应用,"['数据编码', '网络协议', '信息安全']

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

1.Bootstrap栅格化系统

1.1 描述

1.2 代码示例

1.3 媒体查询

2. Bootstrap基本css样式的使用

1.Bootstrap栅格化系统

1.1 描述

bootstrap栅格化系统可以根据设备视口的大小变化去适当扩展到最多12列的显示状态，它必须用.container(固定宽度)或. container-fluid(100%宽度)来包裹，并且通过.row类来定义每一行，最后用col-xs-*、col-sm-*、col-md-* 、col-lg-*来指定最多12列中每一列的显示宽度，相当于把增高container的宽度按自定义的比例分配显示。

1.2 代码示例：

 
     
   
 
        
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--添加视口meta实现布局的自动适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
​
    <!--引入bootstrap样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet">