【bootstrap__栅格】栅格实例

代码

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

上一篇BootStrap__容器

<!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>

猜你喜欢

转载自www.cnblogs.com/kikyoqiang/p/13195322.html