Bootstrap栅格系统 案例

简介: Bootstrap栅格系统 案例

5.png


第一行和第四行要记住


代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        .container div {
            height: 50px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>
</body>
</html>


注意


<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">


注意不要引入错误



相关文章
|
8月前
|
编解码 移动开发 前端开发
【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
|
8月前
|
机器学习/深度学习 存储 算法
基于Flask+Bootstrap+机器学习的世界杯比赛预测系统
基于Flask+Bootstrap+机器学习的世界杯比赛预测系统
120 0
|
8月前
|
机器学习/深度学习 数据采集 算法
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统(上)
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统
162 0
|
5月前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
273 4
|
5月前
|
自然语言处理 前端开发 数据可视化
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
|
7月前
|
开发框架 Java .NET
基于SpringBoot+Bootstrap【爱码个人博客系统】附源码
基于SpringBoot+Bootstrap【爱码个人博客系统】附源码
175 1
|
7月前
|
前端开发 Java 数据库连接
基于SSM+Bootstrap【爱校教务系统管理系统】附源码
基于SSM+Bootstrap【爱校教务系统管理系统】附源码
37 0
|
8月前
|
前端开发 容器
Bootstrap 5 保姆级教程(一):容器 & 网格系统
Bootstrap 5 保姆级教程(一):容器 & 网格系统
N..
|
8月前
|
开发框架 前端开发 容器
Bootstrap栅格系统
Bootstrap栅格系统
N..
108 0
|
8月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码