`

Bootstrap--栅格系统

 
阅读更多
Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器。
如加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。
查看bootstrap.css可知.row类的样式为:
.row {
  margin-left: -20px;
  *zoom: 1;
}

<h2>栅格系统</h2>
<div class="bs-docs-grid">
    <div class="row show-grid">
      <div class="span1" >1</div>
      <div class="span1" >1</div>
      <div class="span1" >1</div>
      <div class="span1" >1</div>
      <div class="span1" >1</div>
      <div class="span1" >1</div>
      <div class="span1" >1</div>
      <div class="span1" >1</div>
      <div class="span1" >1</div>
    </div>
    <div class="row show-grid">
      <div class="span2">2</div>
      <div class="span3">3</div>
      <div class="span4">4</div>
    </div>
    <div class="row show-grid">
      <div class="span4">4</div>
      <div class="span5">5</div>
    </div>
    <div class="row show-grid">
      <div class="span9">9</div>
    </div>
</div>


  • 大小: 4 KB
分享到:
评论

相关推荐

    bootstrap-table.js

    Bootstrap Table充分利用了Bootstrap的栅格系统、排版和组件,确保在不同设备和屏幕尺寸上都能呈现出良好的用户体验。 在压缩包"Bootstrap_Table"中,除了`bootstrap-table.js`和`bootstrap-table.css`外,可能还...

    bootstrap-table-fixed-columns-master.zip

    6. **响应式设计**:考虑在不同屏幕尺寸下的显示效果,确保固定列在移动设备上也能正常工作,可能需要结合Bootstrap的响应式栅格系统进行调整。 7. **兼容性测试**:进行浏览器兼容性测试,确保在主流浏览器(如...

    Java bootstrap-3.4.1-dist 前端框架

    1. **栅格系统**:Bootstrap的核心特性之一是其灵活的栅格系统,它允许开发者创建响应式的网页布局。通过使用行(row)和列(column)类,可以轻松地定义元素在不同屏幕尺寸下的显示方式,适应各种设备,从手机到桌面...

    bootstrap-datetimepicker时间组件

    - Bootstrap的栅格系统可用于调整组件在页面中的布局。 6. **示例代码**: ```html $('#datetimepicker').datetimepicker({ format: 'YYYY-MM-DD HH:mm', locale: 'zh-CN' }); ``` 7. **常见问题及...

    bootstrap-5.3.2-dist.zip

    4. **网格系统**:Bootstrap的网格系统允许开发者创建响应式的布局,通过12列的栅格来调整内容在不同设备上的显示。它支持自适应列大小,实现不同屏幕尺寸下的流畅布局。 5. **响应式工具**:Bootstrap提供了一组...

    bootstrap-3.3.7-dist

    这些CSS文件定义了Bootstrap的所有样式,包括栅格系统、排版、表单、按钮、导航、警告提示、模态框等,使得开发者可以快速构建出美观且一致的用户界面。 2. **Fonts**: - `fonts`目录包含了 Glyphicons 字体图标...

    bootstrap-3.3.7-dist.zip

    - **栅格系统**:Bootstrap的栅格系统基于12列布局,允许开发者创建响应式网页,根据屏幕大小自动调整元素的排列方式。 - **导航条**(Navbar):提供了一种创建顶部固定导航菜单的方式,支持折叠和展开,适应不同...

    bootstrap-4.6.0-dist.zip

    在4.6.0中,可能会有对栅格系统的调整,比如增加新的断点,优化在不同屏幕尺寸下的布局行为。 5. **定制器**:Bootstrap 4.6.0可能继续提供在线定制器,允许开发者选择需要的组件、颜色方案和字体,生成自定义的CSS...

    bootstrap-table插件包

    Bootstrap Table利用了该框架的栅格系统、组件和JavaScript插件,使得表格在不同设备和屏幕尺寸下都能良好显示。 4. **网页表格**:Bootstrap Table不仅提供基本的HTML表格功能,还增加了许多增强功能,如列排序、...

    bootstrap-3.3.7-dist.rar,免费下载

    - **栅格系统**:Bootstrap的栅格系统是基于12列的响应式布局,允许灵活地创建不同屏幕尺寸下的布局。 - **响应式设计**:Bootstrap 3已经内置了响应式CSS,确保网站在手机、平板和桌面电脑上有良好的显示效果。 - *...

    twitter-bootstrap-v2.1.1-0-gc52368d.zip

    1. **栅格系统**:Bootstrap的栅格系统是其响应式设计的基础,它允许开发者创建灵活的布局,根据不同的设备屏幕尺寸自动调整。2.1.1版本中,这个系统可能包括12列的网格,以及预定义的类来帮助定位内容。 2. **预...

    bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js

    `bootstrap.min.css`是Bootstrap的核心CSS文件,经过压缩和优化,用于引入框架的样式规则,包括栅格系统、排版、组件样式和全局CSS变量。这个最小化的版本减少了文件大小,加快了页面加载速度。 `bootstrap.bundle....

    easyui-bootstrap-gh-pages.zip

    例如,使用Bootstrap的栅格系统创建响应式布局,然后嵌入EasyUI的组件如数据网格、对话框等,通过添加特定的类名和属性来实现功能。 CSS部分,EasyUI和Bootstrap的样式可能会有冲突,因此在项目中可能需要进行适当...

    bootstrap及bootstrap-table

    1. **栅格系统**:Bootstrap的栅格系统允许开发者轻松地创建响应式的布局。它基于12列的网格,可以根据屏幕尺寸动态调整内容的排列方式,从而实现不同设备上的良好显示效果。 2. **CSS样式**:Bootstrap提供了大量...

    bootstrap.zip---栅格系统源码

    Bootstrap栅格系统是Web开发中广泛使用的前端框架,它的核心特性之一就是强大的响应式栅格布局。这个"bootstrap.zip"压缩包包含的就是Bootstrap栅格系统的源码,这为我们提供了深入理解其工作原理的机会。 ...

    bootstrap-2.3.2-dist

    此外,它还有一套统一的栅格系统,用于创建灵活的网格布局。 4. **JavaScript插件**:Bootstrap 2.3.2包含多个JavaScript插件,如轮播、模态、下拉菜单、工具提示和弹出框等。这些插件基于jQuery库,可以通过简单的...

    startbootstrap-sb-admin-gh-pages_TheFront_boostrap_

    Bootstrap的CSS主要包括栅格系统、排版、颜色方案、按钮、表单、导航、组件等。例如,栅格系统允许开发者轻松创建响应式布局,适应不同设备的屏幕大小;按钮和表单的样式可以统一网站的UI风格;组件如模态框、下拉...

    bootstrap-datepicker

    由于 bootstrap-datepicker 是基于 Bootstrap 的,所以可以利用 Bootstrap 的栅格系统和类来自定义控件的外观。此外,还可以通过修改 CSS 样式来个性化界面。 8. **插件扩展** 除了基础功能,bootstrap-...

Global site tag (gtag.js) - Google Analytics