首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用Twitter Bootstrap 2获得16列响应式布局?

了解 Twitter Bootstrap 2 的响应式布局,可以通过以下步骤实现:

  1. 在 HTML 文件中使用正确的标签将内容分为 16 列。例如:
代码语言:txt
复制
<div class="container">
  <div class="row">
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
    <div class="col-md-1">Content</div>
  </div>
</div>
  1. 确保在 CSS 文件中正确设置样式。例如:
代码语言:txt
复制
.container {
  margin-right: auto;
  margin-left: auto;
}

.row {
  margin-bottom: -15px;
}

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
  padding-left: 15px;
  padding-right: 15px;
}
  1. 在 JavaScript 文件中设置适当的事件处理函数,例如:
代码语言:txt
复制
$(document).ready(function () {
  // 隐藏导航栏的固定定位
  setNavbarPosition();
});

function setNavbarPosition() {
  var navbarHeight = $('.navbar').height();
  var contentHeight = $('.content').height();
  var offset = contentHeight - navbarHeight;
  $('.navbar').css('margin-top', offset);
}

通过这些步骤,您可以实现 Twitter Bootstrap 2 的 16 列响应式布局。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

rem响应布局-自动将px转换为rem--px2rem插件的使用

当你在项目中采用rem做响应页面的时候,如果代码里面写的是rem单位的话,会不好判断各种距离、宽高的具体数值,下面介绍一款插件:px2rem,使用此插件可以在代码里依然写px,启动项目会自动将...px单位转换为可响应的rem单位 第一步 installcnpm install postcss-px2rem px2rem-loader --save 第二步 在项目src目录下新建util文件夹(如已有请忽略...') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize,需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件...plugins: [ postcss ] } } } } 注意事项 如果某一行css代码就想使用...本人亲测可行 效果展示 如此一来,只需经过一次配置,项目所有地方只要想用rem做响应就可以直接写px了,棒棒的

90010
  • 12个最佳的响应网页设计教程,轻松带你入门!

    这篇文章是一篇新手文章,对于还不懂什么是响应设计的设计师一个很好的开篇解释。 2. ...本视频解释了什么是响应网页设计,结合具体的例子介绍让你更加了解,当然最重要的是视频中详细的介绍如何通过写代码去设计一个响应网页布局。 3. ...本教程帮组你如何使用bootstrap框架来开发响应网页,你可以从中学到: 使用Twitter bootstrap制作响应网页 了解bootstrap组件的使用 学习要求: 对Html有基本理解 希望扩展知识的...从本教程中,你可以学习到如何使用响应WordPress模板来创建你的网站以及如何选择响应WordPress主题。 7. ...响应网页设计的工具 Bootstrap Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观

    3.1K40

    Bootstrap运用终极指南

    Bootstrap是一个功能强大的、以移动端为优先的响应前端框架,它是用CSS、HTML和JavaScript构建的。与从零开始编程,甚至许多其他框架相比,Bootstrap都有许多优势。...你可以在Bootstrap使用Less,CSS,甚至是Sass(前提是你下载了Saas版的Bootstrap)。 2. 响应栅格: Bootstrap使用12列响应栅格,它支持嵌套和偏移元素。...你可以将特定的bootstrap元素和已有的CSS代码一起使用如何选择和安装Boostrap? 下载Boostrap主要有两种版本: 编译版本或源码版本。...虽然Bootstrap响应、移动端优先的前端框架,但如果你想开发一个非响应的站点,可以选择禁用响应布局。...Social Buttons for Twitter Bootstrap 2 插件提供了矢量、可缩放、支持视屏和可定制的社交按钮。 26.

    4.1K11

    分享12款最佳的Bootstrap设计工具

    12.Bootstrap Designer ?   Bootstrap Designer是一款在线运行工具,无需下载和安装。使用该工具你可以创建出令人惊叹的HTML5模板。   ...通过Bootstrap Button Generator,你只需输入你想指定给新按钮的样式的CSS类,并简单调整图标的颜色,即可获得新的图标,然后复制代码,粘贴在任意你想要的地方即可。   ...Layoutit是一个在线工具, 它可以简单而又快速搭建Bootstrap响应布局,操作基本是使用拖动方式来完成,很简单,而元素都是基于Bootstrap框架集成的, 所以这工具很适合Web设计师和前端开发人员使用...3.WordPress Twitter Bootstrap CSS ?   在WordPress中包含最新的Twitter Bootstrap Javascript库。   ...2.Bootmetro ?   这是一款非常灵活且简单的框架,能为你带来类似Windows 8的视觉体验。

    1.7K80

    互联网时代,如何成为优秀的web前端开发者?

    本经验贴分享如何成为优秀web前端开发者的经验,供读者参考。...步骤1 打好基础,关注前沿 HTML5与CSS3 优秀的前端开发者,除了必须掌握传统的HTML、div+css布局,还要熟悉最新的HTML5以及CSS3 2、PS基础不可缺 photoshop...cs6 优秀的前端开发者需要懂一些PS的知识,至少会使用PS进行切图。...4、熟练掌握Bootstrap等优秀前端框架 Bootstrap Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。...5、熟悉移动前端的知识和调试技巧、熟练掌握响应设计 响应网站设计 响应网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局

    66180

    BootStrap

    目录 BootStrap 下载与安装 Normalize.css 全局CSS样式 布局容器 栅格系统 简介 媒体查询 栅格参数 排版 表格 参数 表单 按钮 图片 组件 图标 不要和其他组件混合使用 导航条....container 类用于固定宽度并支持响应布局的容器。 ......提供了一套响应、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。...它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局; 简介 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。...媒体查询 在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值 简单理解为,响应布局的实现,比如我们在pc端的界面是一个样,到了移动端也要正常显示的

    3.3K10

    移动开发之响应布局

    移动开发之响应布局 1.响应开发 1.1 响应开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。...设置宽度为970px 大屏幕(大桌面显示器,大于等于1200px):宽度设置为1170px 但是我们也可以根据实际情况自己定义划分 2.Bootstrap前端开发框架 2.1 Bootstrap...简介 Bootstrap来自Twitter(推特),是目前最受欢迎的前端框架。...=1200px):宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap...Bootstrap提供了一套响应,移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多十二列 Bootstrap里面container宽度是固定的,但是不同屏幕下

    2.2K20

    后台管理UI的选择

    优点:轻量、功能强大、免费、兼容性好、帮助详细、使用的人多生态好 缺点:非响应布局、某些系统看起来有点土(客户与老板的感觉、确实与最新的那些UI有差距) 获得:上网搜索、网盘搜索大把被搭建好了基础功能的框架...六、Metronic Metronic 是一套精美的响应后台管理模板,基于强大的 Twitter Bootstrap 框架实现。...优点: 支持HTML5 和 CSS3 自适应,基于响应 Twitter Bootstrap框架,同时面向桌面电脑、平板、手机等终端。 整合AngularJS 框架。...八、Admin LTE AdminLTE 是一个基于Bootstrap 3.x的免费主题,它是一个完全响应管理模板。高度可定制的,易于使用。适合从小型移动设备到大的台式机很多的屏幕分辨率。...Social Buttons 特点: 响应布局,支持多种设备 打印增强 丰富可排序的面板组件 18个插件与3个自定义插件 轻量、快速 兼容主流浏览器,IE8不兼容 支持Glyphicons, Fontawesome

    5K21

    译文:9个用于web前端开发的CSS开源框架

    Twitter开发,Bootstrap兼具实用性、功能性以及可扩展性。 Bootstrap也提供了大量的例子来帮助你入门。...添加描述 通过bootstrap,你可以将不同的组件和布局联系起来,来创造一个有趣的页面设计,它也提供了大量详细的文档。...添加描述 5 Foundation Foundation声称自己是世界上最高级的响应前端框架,它为建设一个专业的网站提供了高级的功能和教程。...但是,它并不是最活跃的项目,上一次的更新是在2014年,所以在使用之前需要更多的维护。它获得了MIT的许可,这也意味着你可以自由的对其进行操作。...添加描述 8 Materialize Materialize是一款基于GoogleMaterial Design 的响应前端框架,其中包含了Materialize的贡献者开发的其他主题和组件。

    1.1K10

    移动开发-响应

    移动开发-响应布局 响应开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置,从而适配不同设备 设备划分 尺寸区间 超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px...~ < 992px 中等屏幕 (桌面显示器) >= 992px ~ <1200px 宽屏设备 (大桌面显示器) >= 1200px 响应布局容器: 响应需要一个父级做为布局容器,来配合子级元素来实现变化效果...: Bootstrap 来自Twitter,是目前最受欢迎的前端框架,Bootstrap是基于 HTML、CSS 和Javascript ,它简洁灵活,使得Web开发更快捷 中文官网:http://www.bootcss.com...: Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,它提供了两个作此用处的类 container 类: 响应布局的容器 固定宽度 大屏 ( >=1200px) 宽度定为..."col-lg-4">1 2 列排序: 通过使用 .col-md-push 和

    2.4K20

    利用 React 和 Bootstrap 进行强大的前端开发

    介绍创建响应、交互和外观引人入胜的 Web 界面是现代前端开发人员的基本技能。幸运的是,借助 React 和 Bootstrap 等工具的出现,制作这些 UI 变得更加简单,花费的时间更少。...在本文中,我们将探讨如何Bootstrap 与 React 结合使用,进行高效和强大的前端开发。React 和 Bootstrap为什么选择 React 和 Bootstrap?...其使用虚拟 DOM 和基于组件的架构导致更高效的代码,易于维护和调试。另一方面,Bootstrap 是由 Twitter 开发的强大前端框架。...Bootstrap 的 Navbar、Nav 和 Container 组件构建了一个响应的导航栏。...它们一起使用可以创建外观引人入胜、响应和动态的 Web 界面。虽然一开始可能看起来复杂,但像 react-bootstrap 这样的工具使整合过程相对无缝。

    83810

    BootStrap应用开发学习入门

    响应设计(重点): Bootstrap响应 CSS 能够自适应于台式机、平板电脑和手机; BootStrap包含内容(主要包含): 基本结构:Bootstrap 提供了一个带有网格系统、链接样式...; BS全局显示、排版和链接 响应布局以及图像响应 BS支持跨浏览器一致性:使用了 Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性.../dt> Item 2 WeiyiGeek.List列表 (4) 容器 容器(Container): 固定宽度并支持响应布局的容器<div class="container...并确保了所有的容器包含所有的浮动元素*/ .container:after { clear: both; } container 与 container-fluid类区别说明: (0).container 类用于固定宽度并支持<em>响应</em><em>式</em><em>布局</em>的容器...<em>响应</em><em>式</em>实用工具 描述:可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。 注意:<em>响应</em><em>式</em>实用工具目前只适用于块和表切换。 WeiyiGeek.

    17.5K20

    Jump Start Bootstrap 第1章

    创造一个移动端友好(mobile-friendly)的响应网页,网格系统是必不可少的;我们将在这章的后面讨论响应网页设计和网格系统。 Bootstrap它对我有什么帮助?...响应网页设计概述 响应网页设计(Responsive web design)允许开发者创建一个可以在运行中改变布局的网站。...响应网页通常是流畅的,他们根据屏幕的大小来调整自己,并且与移动设备的触控界面兼容。通过使用响应网页设计,开发者可以创建强大的网页应用,取代iOS和Android等平台上的原生应用。...让我们假设我们使用Bootstrap来创建桌面布局。我们已经使用它的网格系统来创建响应设计,这样布局就会自动调整以适应平板电脑和移动设备。 在平板设备上,布局将如图所示。...这是一个非常基本的关于响应设计的行为的概述。显然,我们可以做的比前面提到的例子要多得多。在第2章学习网格系统时,我们将学习更多关于响应性web设计的知识。

    3.5K40

    web移动端开发(7)上传码云+响应布局_bootstrap框架

    下面要学习响应布局啦,加油,马上就要结束了,狠想开启js了. 响应布局 响应开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的....响应布局容器 响应需要一个父级作为布局容器,来配合子级元素来实现变化效果....,所以我们只考虑使用它的样式库.控制引入权在框架本身,使用者要按照框架所规定的规范进行开发. bootstrap使用四部曲: 1.创建文件夹 2.创建html骨架结构 3.引入相关样式文件 4.书写内容...bootstrap提供了一套响应,移动设备优先的流式栅格系统,随着屏幕或视口的尺寸的增加,系统会自动最多分为12列....响应工具 为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容.

    2.8K11

    前端之BootStrap

    BootStrap简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架...简单,直观,强悍的前端开发框架,让web开发更迅速 优点: 快速,简单,灵活的栅格系统,小而强大,响应布局,跨平台等 为什么使用BootStrap?...容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap响应设计:Bootstrap响应 CSS 能够自适应于台式机、平板电脑和手机。...组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。...Bootstrap使用 Example1 <!

    51650

    BootStrap应用开发学习入门

    响应设计(重点): Bootstrap响应 CSS 能够自适应于台式机、平板电脑和手机; BootStrap包含内容(主要包含): 基本结构:Bootstrap 提供了一个带有网格系统、链接样式...; BS全局显示、排版和链接 响应布局以及图像响应 BS支持跨浏览器一致性:使用了 Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性.../dt> Item 2 WeiyiGeek.List列表 (4) 容器 容器(Container): 固定宽度并支持响应布局的容器<div class="container...并确保了所有的容器包含所有的浮动元素*/ .container:after { clear: both; } container 与 container-fluid类区别说明: (0).container 类用于固定宽度并支持<em>响应</em><em>式</em><em>布局</em>的容器...<em>响应</em><em>式</em>实用工具 描述:可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。 注意:<em>响应</em><em>式</em>实用工具目前只适用于块和表切换。 WeiyiGeek.

    14.6K30
    领券