Bootstrap 流式布局

Bootstrap 流式布局流式布局同理,将Bootstrap的流式栅格放到class="container-fluid"的流式容器中,即可创建流式布局。流式布局将填满整个视口宽度。如:<divclass="container-fluid"> <divclass="row-fluid">   <divclass="span2">     <!–

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

同理,将Bootstrap的流式栅格放到 class=”container-fluid” 的流式容器中,即可创建流式布局。流式布局将填满整个视口宽度。如:


Jetbrains全家桶1年46,售后保障稳定

  1. <div class="container-fluid">
  2.   <div class="row-fluid">
  3.     <div class="span2">
  4.       <!--Sidebar content-->
  5.     </div>
  6.     <div class="span10">
  7.       <!--Body content-->
  8.     </div>
  9.   </div>
  10. </div>

布局效果如图 2‑9所示:

Bootstrap流式布局图2-9 Bootstrap流式布局

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》,并全部在 GitHub 上开源。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/206807.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • ASP.Net之发展史「建议收藏」

    ASP.Net之发展史「建议收藏」前言    小咸儿在学习Asp.net之后,对于asp.net的认知一直模糊不清,今天就来给大家分享一下Asp.net到底是什么?而且了解了Asp.net的发展史后才能够明白Asp.net给我们带来了多大的福利,以及让自己如何从设计者的角度去思考Asp.net。    ASP.NET又称为ASP+,不仅仅是ASP的简单升级,而是微软公司推出的新一代脚本语言。

    2022年7月11日
    15
  • json 字段null丢失_什么是空字符串

    json 字段null丢失_什么是空字符串JSON.toJSONString(list,SerializerFeature.WriteMapNullValue);

    2022年9月18日
    3
  • sat错题分数换算表_acwing算法基础

    sat错题分数换算表_acwing算法基础给定 n 个还未赋值的布尔变量 x1∼xn。现在有 m 个条件,每个条件的形式为 “xi 为 0/1 或 xj 为 0/1 至少有一项成立”,例如 “x1 为 1 或 x3 为 0”、“x8 为 0 或 x4 为 0” 等。现在,请你对这 n 个布尔变量进行赋值(0 或 1),使得所有 m 个条件能够成立。输入格式第一行包含两个整数 n,m。接下来 m 行,每行包含四个整数 i,a,j,b,用来描述一个条件,表示 “xi 为 a 或 xj 为 b”。输出格式如果问题有解,则第一行输出 POSS

    2022年8月9日
    7
  • Myeclipse7.5 下载 安装 注冊 注冊码 100%成功

    Myeclipse7.5 下载 安装 注冊 注冊码 100%成功

    2021年12月1日
    45
  • WebStorm安装教程【2022年新版图解】

    WebStorm安装教程【2022年新版图解】对于入门JavaScript开发的者,最重要的就是安装WebStorm软件,一款非常优秀的JavaScript工具,在互联网上查询目前还没有一篇写得比较详细的WebStorm教程。今天我将使用WebStorm最新2022年版本,从下载到安装以及创建项目带大家完整的走一遍;一、WebStorm下载1、百度搜索查询WebStorm官网;认准官网网址,别在下载站下载可能会捆绑很多垃圾软件;2、打开WebStorm官网主介绍页面,点击“Download”进入下载页面;3、点击“Download”后就跳

    2022年6月16日
    85
  • linux恢复硬盘初始状态,初始化Linux数据盘(fdisk)[通俗易懂]

    linux恢复硬盘初始状态,初始化Linux数据盘(fdisk)[通俗易懂]初始化Linux数据盘(fdisk)TkV南京数据恢复-西数科技:硬盘/手机/SSD数据恢复专家.025-8360863618913825606查看PDFTkV南京数据恢复-西数科技:硬盘/手机/SSD数据恢复专家.025-8360863618913825606分享操作场景本文以云服务器的操作系统为“CentOS7.464位”为例,采用fdisk分区工具为数据盘设置分区。TkV…

    2022年5月27日
    58

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号