开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Twitter bootstrap:是否可以使用span5或span4两行来容器流体？

当然可以。在Twitter Bootstrap中，您可以使用span5和span4来创建一个流体容器，这将使您的布局更加灵活。以下是如何使用这些类的一些建议：

使用span5和span4创建一个两行的流体容器：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span5">
      <!-- 内容 -->
    </div>
    <div class="span4">
      <!-- 内容 -->
    </div>
  </div>
  <div class="row-fluid">
    <div class="span5">
      <!-- 内容 -->
    </div>
    <div class="span4">
      <!-- 内容 -->
    </div>
  </div>
</div>

使用span5和span4创建一个两列的流体容器：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span5">
      <!-- 内容 -->
    </div>
    <div class="span4">
      <!-- 内容 -->
    </div>
  </div>
</div>

使用span5和span4创建一个两列的流体容器，并在每一列中添加一个嵌套的两行容器：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span5">
      <div class="row-fluid">
        <div class="span5">
          <!-- 内容 -->
        </div>
        <div class="span4">
          <!-- 内容 -->
        </div>
      </div>
      <div class="row-fluid">
        <div class="span5">
          <!-- 内容 -->
        </div>
        <div class="span4">
          <!-- 内容 -->
        </div>
      </div>
    </div>
    <div class="span4">
      <div class="row-fluid">
        <div class="span5">
          <!-- 内容 -->
        </div>
        <div class="span4">
          <!-- 内容 -->
        </div>
      </div>
      <div class="row-fluid">
        <div class="span5">
          <!-- 内容 -->
        </div>
        <div class="span4">
          <!-- 内容 -->
        </div>
      </div>
    </div>
  </div>
</div>

这些示例展示了如何使用span5和span4创建一个流体容器，您可以根据需要进行调整和优化。请注意，Twitter Bootstrap已经不再更新，您可以考虑使用其继任者Bootstrap 5。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

bootstrap的span4 class无效了么？『神兽必读』

问题 span4 class is not working with twitter bootstrap 作为一个从事web开发的新新人类，我很高兴我使用上了Twitter Bootstrap了，我试着用下面的代码创建三个列... <h4 class...我是否需要修改bootstrap.css文件，还是说默认的bootstrap.css并没有这个span4。...where xx can be lg, md, sm or xs and # ranges from 1 to 12 bootstrap3.0版本不再使用原来spanX的class了，你该使用col-xx...-##的形式了 ##请用1到12数字代替 xx可以选用的有 lg: large md: middle sm: small xs: Extra Small(更小的)

8432 0

Web前端知识(五)

我是一个span5 4.2....BootStarp基本使用 4.2.3.1.下载 4.2.3.2.目录结构 4.2.4.BootStrap实战 4.2.1.起步找到bs中的模板 4.2.2.全局CSS样式 4.2.2.1...4.2.2.2.2.布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。...注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。...,可给设置padding l包含一个.container或.container-fluid容器,从而让导航条居中显示或者自适应显示 l添加.navbar-inverse可以改变导航栏显示的背景颜色导航条居中

1.4K4 0

深入解析 CSS 选择器

浏览器通过优先级来判断哪些样式与一个元素最为相关，从而在该元素上应用这些样式。二、CSS 选择器的分类 ? 三、不同种类选择器的用法接下来我们看一看基本选择器之外的其他选择器。...c0e218 ; } /* :default 表示一组相关元素中的默认(选中)表单元素此处 :default 应用于默认设置了 checked 的 radio 表单上 */ /* 该选择器可以在.../* ::first-line 匹配选中块级元素的第一行 */ .div4::first-line { color: #9dab86 } /* ::marker 匹配选中有序或无序列表的序号或符号...一个选择器中只能使用一个伪元素 CSS3 中伪元素应该用双冒号，以便区分伪元素和伪类。但是旧版的规范未做明确区分，所以大多数浏览器中支持部分伪元素使用单双冒号两种写法。...">span4 div5span5 <div class=

7195 0

bootstrap容器

容器类型Bootstrap提供了两种容器类型：固定宽度容器（Fixed-Width Container）和流体容器（Fluid Container）。...流体容器流体容器是一个占据100%宽度的容器，内容将根据屏幕尺寸自动调整，并充满整个可用空间。使用.container-fluid类可以创建流体容器。...-- 页面内容 -->在上述示例中，我们使用元素创建了一个流体容器，并添加了.container-fluid类。...容器嵌套在Bootstrap中，容器可以进行嵌套，以创建复杂的页面布局。可以在一个容器内部放置另一个容器，并使用不同的容器类型进行组合。...响应式布局Bootstrap的容器组件还提供了响应式布局的支持，可以根据不同的屏幕尺寸调整容器的布局和样式。Bootstrap使用CSS的媒体查询（media query）来实现响应式布局。

1.1K3 0

Sass 基础(五)

@if 　　@if 指令是一个SassScript,它可以根据条件处理样式块，如果条件为true返回一个样式块，反之　　false 返回另一个样式块，在Sass 中除了@if之，还可以配合@else...如下代码，先来一个使用through 关键字。　　　　...　　　　　　} 　　　　.item-2{ 　　　　　　width:4em; 　　　　} 　　　　.item-3{ 　　　　　　　　width:6em; 　　　　} 　　　　在来一个...; } 　　　　unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。　　　　如果字符没有带引号，返回的将是字符串本身。　　　　...quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，　　　　需要用单引号或双引号括起，否则编译的时候将会报错。

7718 0

几个小处理提高前端性能

图片设定不响应重绘的尺寸，如果你的不设定尺寸、同时外部容器没有定死高宽，则图片在首次载入时候，占据空间会从0到完全出现，左右上下都可能位移，发生大规模的重绘。...可以参见新浪微博载入时候页面高度随着图片显示不断变高的问题，这些都让浏览器重绘了，一是体验可能不好，二是烧CPU的。你可以使用width/height控制，或者在CSS中设置。...或者使用存储动态载入HTML或模板HTML，降低首屏加载的渲染时间。具有复杂动画的元素绝对定位-脱离文档流，避免强烈的回流。...现代浏览器可以渐进使用CSS3 transition实现动画效果，比改变像素值来的高性能。不使用iframe，据说开销最大的DOM元素。...base64 url技术，例如虚点效果：四、资源的复用团队CSS样式库，快速构建网站 – Bootstrap有点类似我们这个味道，.span1,.span2,.span3,.span4,.span4

1.2K2 0

Bootstrap入门【人类的天堂】

Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。...用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简介灵活，使Web开发更加快捷总结：Bootstrap是一个建立在一个页面，可以在三个中断(PC、平板、手机... 只有一个普通的按钮 Bootstrap的button: Bootstrap的button 我们来刷新页面看一下效果对比，Bootstrap...style type="text/css"> .container{ background-color: pink; } Div自动居中了固体布局就是页面两边后自动留白，div自动居中流体容器...，永远是占满整行栅格系统(Grid System)概念栅格系统，可以理解为就是网格，格子每行最多12个格子，如果想要再多可以使用栅格嵌套实现案例：演示Bootstrap网格系统栅格系统

8192 0

BootStrap

目录 BootStrap 下载与安装 Normalize.css 全局CSS样式布局容器栅格系统简介媒体查询栅格参数排版表格参数表单按钮图片组件图标不要和其他组件混合使用导航条...弹框模态框 BootStrap BootStrap官网中文文档 Bootstrap框架有很多样式，直接CV微调使用 Bootstrap的样式绝大部分都是通过class来调节的 Bootstrap...动态效果是依赖于jQuery使用的，在使用Bootstrap动态效果前需要导入jQuery 下载与安装方式一：本地（没网可以备选） https://v3.bootcss.com/getting-started...它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局；简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。...栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

3.3K1 0

数组（ArrayPool数组池、Span结构）

如果一个应用需要创建和销毁许多的数组，垃圾收集器就要花费很多的功夫来做这些工作，为了较少垃圾收集器的工作，这里我们可以使用ArrayPool类来使用数组池。...我们使用Return()方法将数组返回到池中，这里使用了一个可选参数clearArray，指定是否清除该数组，不清除的话下一个从池中租用这个数组的人可以读取到其中的数据。...清除数据可以避免这种情况，但是会消耗更多的CPU时间。 Span 　　Span介绍　　为了快速访问托管或非托管的连续内存，可以使用Spam结构。...以此来判断是否复制成功。上面例子中span4长度为3，而span长度为14，这里是复制成功了，然后其下面的操作，因为span3的长度是10，span复制给span3失败了。因为span3不够大。　　...，来降低数组创建和销毁时消耗的性能，减少垃圾回收器的工作，使用Span可以快速的访问托管及非托管代码，创建切片来对数组和长字符串进行一定的操作。

1.5K2 0

Bootstrap笔记

引导指令,引导程序Bootstrap 是当下最流行的前端框架（界面工具集）；特点就是灵活简洁，代码优雅，美观大方；其目的是为了让 Web 开发更敏捷；是 Twitter 公司的两名前端工程师 Mark...-- 你自己的样式或其他文件 --> <!...，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，...引导指令,引导程序 Bootstrap 是当下最流行的前端框架（界面工具集）；特点就是灵活简洁，代码优雅，美观大方；其目的是为了让 Web 开发更敏捷；是 Twitter 公司的两名前端工程师...，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度

3.4K9 0

组件分享之前端组件——bootstrap-treeview 简单的tree树组件

组件基本信息组件：bootstrap-treeview 开源协议：Apache-2.0 License 内容本次分享的组件是用于前端开发使用的tree树组件。...下面是其开源库中的描述内容：一个简单而优雅的解决方案来显示分层的树结构(即树视图)，同时充分利用了Twitter Bootstrap所提供的最佳功能。...image.png 需要的支持文件： Bootstrap v3.3.4 (>= 3.0.0) jQuery v2.1.3 (>= 1.9.0) 使用说明： 1、在页面中引用对应css和js文件 2、创建一个容器，作为生成的树存储位置 3、进行启动加载，具体data格式可以参考上面的开源库地址中的README。...vue、react等占据，但仍然有一些小伙伴们仍在使用一体化开发，jsp开发等，这类前端组件文章主要就用于这类场景下的快速使用，有需要的可以持续关注。

1.5K3 0

移动端WEB开发之响应式布局

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。...原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...简介 Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。...栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。...div> 右侧响应式工具为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

3.4K3 1

移动开发-响应式

~ < 992px 中等屏幕 (桌面显示器) >= 992px ~ <1200px 宽屏设备 (大桌面显示器) >= 1200px 响应式布局容器: 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果...原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化也可以根据实际情况自己定义划分 Bootstrap 简介...: Bootstrap 来自Twitter，是目前最受欢迎的前端框架，Bootstrap是基于 HTML、CSS 和Javascript ，它简洁灵活，使得Web开发更快捷中文官网：http://www.bootcss.com...占据全部视口 (viewport) 的容器栅格系统介绍: 栅格系统英文为 Grid systems ,翻译为网格系统，是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局 Bootstrap....hidden-sm 可见隐藏可见可见 .hidden-md 可见可见隐藏可见 .hidden-lg 可见可见可见隐藏为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

2.4K2 0

移动开发之响应布局

响应时需要一个父级作为布局容器，来配合子集元素来实现变化效果原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面的子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化...2.Bootstrap前端开发框架 2.1 Bootstrap 简介 Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。...Bootstrap使用四部曲：创建文件夹结构创建html骨架结构引入相关样式文件书写内容 2.3 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container...Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多十二列 Bootstrap里面container宽度是固定的，但是不同屏幕下...右侧 3.6 响应式工具为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

2.2K2 0

Bootstrap UI 编辑器

更神奇的是，Bootstrap 会根据用户的每个选择来重新建立框架，方便用户的下载和使用。 2. ...在 Bootstrap 准备好的内容和代码片段的基础上提供一个又好又优雅的方法来编辑和美化 html，也因此它是个明智的选择。...Fancy Boot Fancyboot 是个非常有用的 Bootstrap 自定义工具，允许用户编辑 Bootstrap 的配置，自动预览他们的修改结果。通过滑动菜单可以选择需要使用的插件和组件。...此 Bootstrap UI 编辑器拥有许多很强大的功能，包括客户端，服务端验证，支持键盘，live 事件，可定制的容器空间等等。...PaintStrapPaintStrap 使用 Adobe kuler/COLOURlovers 颜色组合来生成漂亮的 Twitter Bootstrap 主题。

3.2K5 0

【Java 进阶篇】深入了解 Bootstrap 栅格系统

本文将深入介绍 Bootstrap 栅格系统，面向初学者，帮助您充分了解如何使用它来构建响应式网页。什么是 Bootstrap 栅格系统？...容器的作用是确保内容在不同屏幕尺寸上居中对齐，并提供一些内边距，以便内容不会触及屏幕的边缘。 row：行是一组列的容器。每行（row）在页面上都是水平排列的，可以包含一个或多个列（col）。...列偏移和偏移量有时候，您可能希望在列之间创建一些空白，或将列向右移动。Bootstrap 提供了列偏移（offset）类，可以帮助您实现这些效果。...Bootstrap 允许您使用列排序（order）类来轻松实现这一点。...自定义栅格系统如果您希望创建自定义的栅格系统，而不仅仅使用Bootstrap的默认样式，您也可以使用Bootstrap的Sass版本或Less版本，以便更灵活地定义栅格系统的参数，例如列数、断点、列宽等

3182 0

Web-第五天 BootStrap学习

由Twitter 公司的设计师Mark Otto和Jacob Thornton合作开发。...响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。...栅格特点 “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中 “列（column）” 可以作为行（row）”的直接子元素。...行使用的样式“.row”，列使用样式“col-*-*” 内容应当放置于“列（column）”内列大于12时，将另起一行排列栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类...style="font-size: #f00;">￥998 1.7 重写首页之footer 1.7.1 案例分析通过分析，该模块需要使用栅格划分上下两行

5.1K5 0

Bootstrap运用终极指南

绑定JavaScript的组件: Bootstrap附带了一组JavaScript组件来添加功能。开发人员操作模态窗口、工具提示、弹窗警告等变得更加容易，甚至可以完全跳过编写脚本。 7....你可以将特定的bootstrap元素和已有的CSS代码一起使用。如何选择和安装Boostrap？下载Boostrap主要有两种版本: 编译版本或源码版本。...如果你想快速地在Rails、Compass或仅支持Sass的项目中使用Bootstrap，那么这个版本是不二之选。...只需要在CSS中省略viewport元标记，覆盖每个网格层容器的宽度，删除导航栏上所有折叠和展开行为，并在使用网格布局时对它们进行一些调整就可以了。关于操作详情，你可以阅读入门文档中的说明。...Tocify 是一个jQuery目录插件，可以用Bootstrap进行主题化。 29. Bootpag 是一个用于动态分页的jQuery插件，可以使用Bootstrap或自己实现。 30.

4.1K1 1

第122天：移动端开发常见事件和流式布局

2、 viewport 在移动端用来承载网页的这个区域就是我们的视觉窗口viewport，这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。 ?...user-scalable：用户是否可以缩放，yes或no（1或0）。 7 8 栅格系统：Bootstrap...中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比。

3.6K4 0

BootStrap基础

BootStrap简介 1、什么是bootstrap? 简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。...端和移动端 4.Bootstrap是依赖于jQuery库的，所以使用BootStrap时必须导入jQuery库栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口...栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。... 总结在BootStrap的学习中，大部分都是依赖于使用API，利用里面的框架和案例来实现自己想要的功能和布局，所以学会看文档很重要...这是我第一次学习和使用响应式布局的框架，多加摸索，就是在学习，以后自己使用属于自己的一套框架。下一篇博客，我用BootStrap基础来实现一整个响应式网页的布局。

9602 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭