bootstrap布局基础

最新推荐文章于 2024-05-08 16:31:38 发布

IC-ic.ic

最新推荐文章于 2024-05-08 16:31:38 发布

阅读量2.5k

点赞数 2

文章标签： bootstrap css html

本文链接：https://blog.csdn.net/weixin_55743273/article/details/121254930

版权

本文详细介绍了Bootstrap的基础布局和栅格系统。Bootstrap是一个前端开发框架，包括HTML、CSS和JavaScript组件。布局中关键元素是.container容器，用于包裹内容。栅格系统采用12列响应式设计，根据列数相加情况调整元素排列方式，如相加等于12则占满宽度，小于12留有空白，大于12则换行。同时，文章还提及了响应式工具的使用。

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

一、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