博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap---Fluid layout 流布局
阅读量:7191 次
发布时间:2019-06-29

本文共 437 字,大约阅读时间需要 1 分钟。

流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作为单位来确定每一块的宽度。这种布局非常适合一次编写,然后自适应各种不同大小的屏幕(手机,PAD…)。

方法/步骤

1

<div class="container-fluid">

  <div class="row-fluid">

    <div class="col-md-2">

    </div>

    <div class="col-md-10">

    </div> 

  </div> 

</div>

       按顺序添加这几个类。最外面包含块有 container-fluid类,表明内容布局是流布局,其主要作用是作为一个包含块来容纳流布局内容。里面包含块的内容有 row-fluid类(非常重要),决定是否是流布局。然后里面的内容块代码编写与网格系统一致,依然是从col-md-21到col-md-12,分别 对应于不同的百分比。

转载于:https://www.cnblogs.com/zhp404/articles/4285331.html

你可能感兴趣的文章
python设计模式之单例模式
查看>>
Flex 布局教程:语法篇
查看>>
JVM内存模型和内存分配学习心得
查看>>
学术家族树典型用户的场景模拟
查看>>
CUDA-GPU编程
查看>>
JSP+Servlet实现验证码生成
查看>>
Winform下的Datagrid的列风格(1)—DataGridComboBoxColumn (ZHUAN)
查看>>
Java中instanceof的用法
查看>>
返回一个二维整数数组中最大联通子数组的和
查看>>
[学习笔记]阶和原根
查看>>
js事件委托
查看>>
计算机硬件
查看>>
gattAttribute_t 含义 中文解释
查看>>
jquery 选择器汇总
查看>>
Nodejs 学习资料
查看>>
设计模式(三) 抽象工厂模式
查看>>
置换群的快速幂运算
查看>>
post7
查看>>
Spring.net 学习IOC------准备
查看>>
zend studio xdebug配置详解
查看>>