Bootstrap网格系统

最新推荐文章于 2022-07-10 18:28:12 发布
最新推荐文章于 2022-07-10 18:28:12 发布
阅读量207 收藏
点赞数 2
分类专栏： Bootstrap 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengqiuming/article/details/86566298
版权

一 实现原理

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>实现原理</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
</div>
</body>
</html>

2 效果

二 工作原理

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>基本用法</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-8">.col-md-8</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-3">.col-md-3</div>
    </div>
</div>
</body>
</html>

2 效果

三 列偏移

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>列偏移</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
    <h4>列向右移动四列的间距</h4>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
        <div class="col-md-2">.col-md-2</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
    </div>
</div>
<br/>

<div class="container">
    <h4>发生行断裂</h4>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
        <div class="col-md-2">.col-md-2</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
    </div>
    <div class="row">
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
</div>

</body>
</html>

2 效果

四 列排序

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>列排序</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">.col-md-4</div>
        <div class="col-md-8 col-md-pull-4">.col-md-8</div>
    </div>
</div>
</body>
</html>

2 效果

五 列的嵌套

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>列的嵌套</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">col-md-6</div>
                <div class="col-md-6">col-md-6</div>
            </div>
        </div>
        <div class="col-md-4">col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-8">

            <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4">col-md-4</div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

2 效果

 

chengqiuming
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap总结与例子
08-02
对bootstrap常用的25个知识点进行了简单总结，附带总结文档与代码实例。总结文档月代码时一一对应的
BootStrap基础
最新发布
热爱生活,热爱技术,对未知永远保持好奇!
11-03 279
BootStrap基础
Bootstrap学习心得——前端学习阶段性总结（非知识性）
m0_46544453的博客
10-20 2456
在学习完HTML,CSS,JS,jQuery后，我花了两天进行了bootstrap的学习。主要就是结合文档进行一些视觉和使用方式的修改，用的主要还是前面三个的东西，这让我在实现一些东西的时候更省时间了。 在学习前面三个东西的时候我就在想，可不可以通过搞一些属于自己的通用的小东西来节省写页面的时间（那时只是听说过框架，在学jQuery时是第一次接触框架这个东西，但jQuery并没有给我焕然一新简单的感觉）。在了解完bootstrap后，这个框架给我了强烈的冲击：之前要写个把小时的东西现在从文档复制然后改几.
Bootstrap总结
qq_63339311的博客
11-21 1491
Bootstrap感悟：二级目录三级目录 二级目录 三级目录
bootstrap -- 学习总结
isfor_you的博客
01-26 1767
1.bootstrap简介 Bootstrap是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本 引入库（两种方法）： 1.外联引入 先将下载的三个css、jquery、js文件放入项目文件中，然后通过link和script标签分别引入文件 <link rel="stylesheet" type="text/css" href="assets/bootst
Bootstrap 网格系统布局详解
08-31
二、什么是Bootstrap网格系统？ Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更...
Bootstrap网格系统详解
09-02
Bootstrap网格系统是前端开发中广泛使用的布局工具，它基于12列的响应式设计，能够帮助开发者轻松地创建适应各种屏幕尺寸的布局。这个系统的核心在于它的灵活性和易用性，使得网页设计能够快速响应不同设备的显示...
Bootstrap 网格系统
12-13
总的来说，Bootstrap网格系统是构建响应式网站的关键工具，它简化了跨设备的布局设计，让开发者能够快速创建适应不同屏幕尺寸的网页。通过理解并熟练运用Bootstrap的网格系统，设计师和开发者能够更高效地创建出用户...
bootstrap网格系统使用方法解析
08-31
Bootstrap网格系统是网页布局设计中常用的一种工具，它基于12列的响应式布局，能够帮助开发者快速构建灵活且适应不同设备屏幕的页面结构。在本文中，我们将深入解析Bootstrap网格系统的使用方法。 首先，Bootstrap...
第一次接触神奇的Bootstrap网格系统
09-01
Bootstrap网格系统是Web开发框架Bootstrap的核心特性之一，它极大地简化了网页布局的复杂性，使得开发者能够快速构建响应式和自适应的页面设计。Bootstrap的网格系统基于一个12列的网格模型，允许灵活地分配内容区域...
WEB前端框架应用（Bootstrap）课程设计
03-07
利用CSS样式和栅格系统进行布局，并且利用Bootstrap框架中的CSS组件和JavaScript插件丰富页面，增加页面的美观和互动，本项目写的是一个房屋装修的网站，有四个网页
web网页制作实训心得
06-16
web网页制作实训心得，web网页制作实训心得，web网页制作实训心得，
课程设计报告
04-10
该课设包含了按照软件工程思想开发软件的流程，是关于二手书城的开发
bootstrap中自己总结的各种demo
11-11
各种bootstrap中出现过的实例基本都可以找到，还有一些demo
【Bootstrap-学习小结】
橙子的博客
07-10 988
简介：是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性， 拥有样式库、组件和插件。常用来开发响应式布局（1）基本结构：栅格系统 （2）丰富的css样式库：只需要改变标签的class属性值，就可以给标签应用不同的样式。 （3）布局组件：有丰富的组件库 （4）插件：基于jQuery的插件，功能强大。（1）浏览器按照设备类型来划分，主要包括PC端浏览器和移动端浏览器。 （2）浏览器内核主要包括Blink、WebKit和Trident等。 （3）PC端的浏览器主要包括Google
Bootstrap学习心得
wsy_2979的博客
12-11 2191
Bootstrap简介        Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Les...
bootstrap学习心得总结
weixin_41871233的博客
03-27 3183
官方文档：添加链接描述
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值