bootsrap栅格布局和图标引入

朱雀 2022-03-10 07:57 205阅读 0赞

> 栅格布局是什么？自带响应式？字体图标如何引入？统统在此告诉你！

*  栅格布局（响应式）

按行布局，每行最多12分配空间

![20190310112708359.png][]

<div class="container">
            <div class="row">
                <div class="block col-lg-12 col-md-12 col-sm-12 col-xs-12">1 2 3 4 5 6 7 8 9 10 11 12</div>
            </div>
    </div>

按父级元素宽分配空间

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

<div class="container">
            <div class="row">
                <div class="block col-lg-2 col-md-2 col-sm-2 col-xs-2">01</div>
                <div class="block col-lg-10 col-md-10 col-sm-10 col-xs-10">2345678912</div>
            </div>
            <div class="row">
                <div class="block col-lg-7 col-md-7 col-sm-7 col-xs-7">
                    <div class="block col-lg-5 col-md-5 col-sm-5 col-xs-5">12345</div>
                    <div class="block col-lg-7 col-md-7 col-sm-7 col-xs-7">6789101112</div>
                </div>
            </div>
        </div>

*  引入图标

一般用 i 标签引入图标，glyphicon引入类，后者引入具体图标

![20190310113702492.png][]

<i class="glyphicon glyphicon-play-circle" style="font-size: 50px;"></i>

[20190310112708359.png]: /images/20220310/08e2a7cf37514f018ecaeb8cf5ba827f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220310/f261d516bde04253b947f6b1cc1cb868.png
[20190310113702492.png]: /images/20220310/4d4c946c8c5347d4b7c2b19ea21d302a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap栅格布局

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（r

谁践踏了优雅/ 2023年07月19日 14:29/ 0 赞/ 49 阅读

相关 CSS栅格布局grid详解

栅格布局分为常规栅格和行内栅格，值分别为display:grid；和display:inline-grid；但是大多数栅格布局都是块级的。这里有一个需要注意的是，如果我们给一个

梦里梦外;/ 2023年06月12日 09:52/ 0 赞/ 24 阅读

相关 bootstrap栅格布局

首先，我们要为页面内容和栅格系统包裹一个 `.container` 容器： <div class="container"> ... </div>

一时失言乱红尘/ 2023年02月08日 12:59/ 0 赞/ 38 阅读

相关 LESS Grid 实现栅格布局

@import ‘variables.less’; [@import ‘module.less’;][import _module.less] //- 设备尺寸

女爷i/ 2022年05月26日 00:58/ 0 赞/ 259 阅读

相关 Qt5之栅格布局

1、创建栅格布局对象 // 2018年6月24日 23:22:02 改为栅格布局 gridLayout = new QGridLayout;

灰太狼/ 2022年05月21日 12:26/ 0 赞/ 522 阅读

相关手写一个栅格布局

虽然有很多框架可以使用栅格布局，但是使用起来需要指定屏幕的大小来做自适应，一长串，希望自己可以手写一个，根据指定的class类，例如，我们定义一个六列的布局，那么span-2的

淩亂°似流年/ 2022年05月20日 09:56/ 0 赞/ 232 阅读

相关栅格布局效果展示

文章： [https://blog.csdn.net/ayangann915/article/details/83744508][https_blog.csdn.net_a

朱雀/ 2022年04月22日 12:40/ 0 赞/ 298 阅读

相关栅格布局小案例——图片展览

在学习Bootstrap的过程中，对栅格布局有了一定了解，完成了一个简单的小案例，图片展览，在不同大小的屏幕下显示的效果不一样。 ![watermark_type_ZmFu

朴灿烈づ我的快乐病毒、/ 2022年04月22日 12:38/ 0 赞/ 253 阅读

相关 BootStrap_03 栅格布局

bootstrap – 一个标签中，同时有 col-xs , col-sm , col-md , col-lg .col-xs- 超小屏幕手机 (<768px) .co

不念不忘少年蓝@/ 2022年04月04日 07:56/ 0 赞/ 384 阅读

相关 bootsrap栅格布局和图标引入

> 栅格布局是什么？自带响应式？字体图标如何引入？统统在此告诉你！栅格布局（响应式）按行布局，每行最多12分配空间 ![20190310112708359.pn

朱雀/ 2022年03月10日 07:57/ 0 赞/ 206 阅读