【bootstrap__栅格】栅格实例

栅格盒模型设计的精妙之处

容器两边具有15px的padding
行 两边具有-15px的margin
列 两边具有15px的padding

为了维护槽宽的规则，
列两边必须得要15px的padding
为了能使列嵌套行
行两边必须要有-15px的margin
为了让容器可以包裹住行
容器两边必须要有15px的padding

bootstrap栅格系统&源码分析

 highlighter-hljs
 	流体容器
		width:auto
		两侧15px padding
	固定容器
		阈值
			xs（小于768px）		width：auto
			sm（大于等于768px）	width：720+槽宽
			md（大于等于992px）	width：940+槽宽
			lg（大于等于1200）		width：1140+槽宽
		两侧15px padding
	行
		两侧-15px margin
	列
		公共样式
			两侧有15px 的padding
			相对定位
		float
		width
			1~12
		left和right属于列排序
		left
		right
			0~12
			0：auto
		margin属于列偏移
		margin-left
			0~12
      列排序
	注意阈值上样式的设置不能跳跃

列偏移

 highlighter-hljs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>列偏移</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .row {
            background-color: pink;
        }
 
        div[class|=col] {
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">col-lg-4</div>
    </div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

代码

以最左边线为基准，pull拉，向左偏移，push推，向右偏移

上一篇BootStrap__容器

 highlighter-hljs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        a:link, a:visited, a:hover, a:active {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="jumbotron">
    <div class="container">
        <h1>Hello, world!</h1>
    </div>
</div>
<div class="container">
    <div class="row">
 
        <div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
            <div class="thumbnail">
                <img src="img/Svelte.png" alt="...">
                <div class="caption text-center">
                    <h3>
                        <a href="javascript;:" title="Svelte 中文网">4 Svelte<br/>
                            <small>中文网</small>
                        </a>
                    </h3>
                    <p>Svelte 是构建 Web 应用程序的一种新方法。Svelte 是一个编译器，它将声明性组件转换成高效的 JavaScript 代码，并像做外科手术一样细粒度地更新 DOM。</p>
                </div>
            </div>
        </div>
 
        <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6 ">
            <div class="thumbnail">
                <img src="img/TypeScript.png" alt="...">
                <div class="caption text-center">
                    <h3>
                        <a href="javascript;:" title="TypeScript 中文手册">3 TypeScript<br/>
                            <small>中文手册</small>
                        </a>
                    </h3>
                    <p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
                </div>
            </div>
        </div>
 
        <div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-0">
            <div class="thumbnail">
                <img src="img/React.png" alt="...">
                <div class="caption text-center">
                    <h3>
                        <a href="javascript;:" title="React 用于构建用户界面的 JavaScript 框架">2 React<br/>
                            <small>用于构建用户界面的 JavaScript 框架</small>
                        </a>
                    </h3>
                    <p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
                </div>
            </div>
        </div>
 
        <div class="col-lg-3 col-lg-pull-9 col-md-4 col-md-pull-8 col-sm-6 col-sm-push-0">
            <div class="thumbnail">
                <img src="img/Webpack.png" alt="...">
                <div class="caption text-center">
                    <h3>
                        <a href="javascript;:" title="Webpack 是前端资源模块化管理和打包工具">1 Webpack<br/>
                            <small>是前端资源模块化管理和打包工具</small>
                        </a>
                    </h3>
                    <p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
                </div>
            </div>
        </div>
 
    </div>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
posted @   一只桔子2233  阅读(322)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
历史上的今天：
2019-06-26 css 瀑布流
2019-06-26 div 浮动
2019-06-26 Js 获取当前日期时间及其它操作（转）
点击右上角即可分享
微信分享提示
AI IDE Trae