`
gutou9
  • 浏览: 144514 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

bootstrap 网格系统

 
阅读更多

最小单位 col 有四种:col-xs-*col-sm-*col-md-*col-lg-*, 分别适用于手机(768px 以下),平板(768-992px),桌面(992px+)和超大屏幕(1200px+), 

 

 

/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { ... }

/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { ... }

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作:

  超小设备收集(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px)
网格行为 一直是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的 以折叠开始,断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列 # 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes
分享到:
评论

相关推荐

    基于Bootstrap网格系统的可折叠侧边栏特效

    bootstrap-collapsible-sidebar是一款基于Bootstrap网格系统的可折叠侧边栏特效。该特效通过Bootstrap网格系统,少量的CSS和jQuery代码来完成类似侧边栏面板的折叠效果。

    Bootstrap 网格系统布局详解

    二、什么是Bootstrap网格系统? Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更...

    jQuery可伸展的Bootstrap图片网格布局代码.zip

    在这个代码示例中,jQuery被用来增强Bootstrap网格系统的功能,特别是在响应式布局的动态调整上。jQuery允许开发者在用户交互或页面加载后执行特定的JavaScript代码,从而实现更复杂的行为。 可能的实现方式是,当...

    【Bootstrap网格系统全攻略】构建响应式布局的秘籍

    1. **响应式布局**:Bootstrap的网格系统可以自动调整布局以适应不同的屏幕尺寸。 2. **预制组件**:提供了丰富的UI组件,如按钮、表单、导航条、卡片、弹窗等。 3. **定制性**:可以通过Sass变量轻松定制Bootstrap...

    Bootstrap网格系统详解

    Bootstrap网格系统是前端开发中广泛使用的布局工具,它基于12列的响应式设计,能够帮助开发者轻松地创建适应各种屏幕尺寸的布局。这个系统的核心在于它的灵活性和易用性,使得网页设计能够快速响应不同设备的显示...

    第一次接触神奇的Bootstrap网格系统

    Bootstrap网格系统是Web开发框架Bootstrap的核心特性之一,它极大地简化了网页布局的复杂性,使得开发者能够快速构建响应式和自适应的页面设计。Bootstrap的网格系统基于一个12列的网格模型,允许灵活地分配内容区域...

    第四篇Bootstrap网格系统偏移列和嵌套列

    Bootstrap网格系统是前端开发中广泛使用的布局工具,它基于12列的响应式设计,能够帮助开发者轻松创建灵活、响应式的网页布局。本篇将详细讲解Bootstrap中的偏移列(Offset Columns)和嵌套列(Nested Columns)的...

    基于Bootstrap的可拖拽式网格系统插件

    在基于Bootstrap的可拖拽式网格系统插件——jquery.gridstrap.js中,我们能够实现更灵活的布局设计,使用户可以直观地通过拖放操作调整页面元素的位置。 该插件的核心功能是构建一个基于Bootstrap的响应式网格系统...

    Bootstrap 网格系统

    总的来说,Bootstrap网格系统是构建响应式网站的关键工具,它简化了跨设备的布局设计,让开发者能够快速创建适应不同屏幕尺寸的网页。通过理解并熟练运用Bootstrap的网格系统,设计师和开发者能够更高效地创建出用户...

    bootstrap-collapsible-sidebar:使用Bootstrap网格系统,一些CSS和一些jQuery创建可折叠的侧边栏

    总的来说,创建一个Bootstrap可折叠侧边栏需要对Bootstrap网格系统、CSS样式以及jQuery有一定的了解。通过熟练掌握这些技术,你不仅可以创建出美观的侧边栏,还能提升网站的用户体验,使其更加互动和易用。

    jQuery Bootstrap网格布局和列表布局切换代码

    在Bootstrap中,网格系统是基于12列的栅格布局,允许开发者创建响应式的页面布局。通过调整列的数量和排列方式,可以轻松地适应不同屏幕尺寸。例如,我们可以用`.col-sm-*`,`.col-md-*`和`.col-lg-*`类来定义不同...

    基于Bootstrap的可拖拽式网格系统插件jquery.gridstrap.js.zip

    总的来说,"jquery.gridstrap.js.zip"提供的这个插件为前端开发者提供了一种创新的方式来利用Bootstrap网格系统,创建出具有高度交互性和自定义性的布局。它可以帮助开发者提高效率,同时提升用户体验,使得网页布局...

    bootstrap-grid:Bootstrap网格系统的独立版本

    Bootstrap 3网格系统的独立版本。 请参阅文件以获取演示。 如果要使用Bootstrap 4中的网格,则应直接使用Bootstrap。 它在其可下载的软件包和npm软件包中包括其网格系统的,因此请继续使用它而不是此软件包。 为...

    flutter_bootstrap:Flutter Bootstrap网格系统

    Flutter中用于响应式布局的Bootstrap Grid系统的部分实现。 入门 您应该确保在Flutter项目中添加以下依赖项。 dependencies : flutter_bootstrap : " ^1.0.0+2 " 然后,您应该运行flutter packages upgrade或在...

Global site tag (gtag.js) - Google Analytics