<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>栅格系统</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.a{ height: 50px; border: 1px solid #ccc; background-color: #eee; }
</style>
</head>
<body>
<!-- <div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">1</div>
</div>
<div class="row">
<div class="col-md-9 a">9</div>
<div class="col-md-3 a">3</div>
</div>
<div class="row">
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
</div>
</div> -->
<!-- <div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 a">a</div>
</div>
</div> -->
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
<div class="row">
<div class="col-md-9 a" style="padding: 0">
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
<div class="col-md-4 a">4</div>
</div>
<div class="col-md-3 a">3</div>
</div>
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
效果图：
相关推荐
本节课我们主要学习一下 Bootstrap 的栅格系统，提供了一套响应式、移动设备优先的流式栅格系统。 一．移动设备优先 在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽...
Bootstrap栅格系统是Web开发中一个非常重要的工具，它是一个响应式的布局框架，能够帮助开发者快速构建适应不同屏幕尺寸的网站。在“任务3 Bootstrap栅格系统”中，我们将学习如何利用Bootstrap栅格系统实现招商银行...
在第24章“资讯”中，我们可能探讨了如何利用Bootstrap来创建新闻、博客或者其他信息展示页面，确保内容在不同设备上都能完美呈现。Bootstrap通过其强大的栅格系统、预定义的组件以及可自定义的样式，为开发者提供了...
这个ACCP8.0 Y2的Web前端框架与移动应用开发课程的第三章主要聚焦于Bootstrap组件的使用，旨在帮助学生深入理解如何构建美观且用户友好的网页。 Bootstrap的核心特性包括一个响应式的栅格系统，预定义的CSS样式，...
1. **响应式设计**：Bootstrap3.3.1版本内置了响应式网格系统，它允许网页布局根据用户的设备屏幕尺寸自动调整，确保在不同设备上都能呈现出良好的视觉效果。无论是大屏幕的台式机，还是小屏幕的手机或平板，模板都...
2. **栅格系统**：Bootstrap 的栅格系统允许开发者轻松创建自适应的网页布局，通过定义行（row）和列（column）实现灵活的排版。 3. **预定义组件**：Bootstrap 包含许多预定义的 UI 组件，如导航条、按钮、表单、...
2. **行（Row）和列（Column）**：使用Bootstrap的栅格系统，表单元素可以被放置在`.row`内，并分配到特定的`.col-*`类，确保在不同设备尺寸下的响应式布局。 3. **表单控制组（Form Groups）**：`.form-group`类...
5. **插件集成**：Bootstrap的生态系统中有许多第三方插件，如JQuery、Chart.js、SweetAlert等，这些插件可能已被集成到模板中，增强了图表展示、通知提示等功能，提升了用户体验。 6. **定制与优化**：尽管模板...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了一套完整的工具集，用于快速构建美观、响应式的网页和后台管理系统。"简洁响应式Bootstrap后台管理系统模板"是一个基于Bootstrap框架设计的，专为后台...
这个“bootstrap第一次大作业”是一个理想的起点，可以帮助新手快速掌握网页开发的基本概念，尤其是使用Bootstrap进行响应式设计的能力。通过完成这个项目，学习者将能够构建一个功能齐全、美观的网页，并为进一步的...
第一章 bootstrap介绍 第二章 排版样式 第三章 表格和按钮 ...第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章，后面带开发实例！
第5~8章则分别讲解了CSS动态样式LESS的特性和使用、各种Bootstrap组件的特性和使用、各种Bootstrap插件的特性和使用、Bootstrap的扩展等内容；第9章逐步讲解了利用Bootstrap开发一个社区分享网站的全部流程和方法，...
1. 响应式布局：Bootstrap 3 包含一套基于栅格系统的响应式布局，允许页面在不同设备上自适应显示，从小型手机到大型桌面显示器都能提供良好的用户体验。 2. 预置组件：框架内包含多种预设的UI组件，如导航条、下拉...
- 响应式布局：Bootstrap的栅格系统可以根据屏幕大小自动调整页面布局，确保在各种设备上都能良好显示。 - 组件丰富：包括导航栏、按钮、表单、模态框、下拉菜单等，可以快速构建常见UI元素。 - 样式统一：预设的...
响应式网页开发实战中的第14章主要讲解了如何利用Bootstrap框架来构建高效且美观的网页，特别是关于天气预报和机票预订的实例。Bootstrap是一种流行的前端开发框架，它提供了丰富的预定义样式、组件和JavaScript插件...
Bootstrap的核心特性包括响应式布局、栅格系统、CSS样式和JavaScript插件。响应式布局确保了在不同设备和屏幕尺寸上的良好显示效果，而栅格系统则通过简单的类名控制网页元素的排列方式。CSS样式提供了大量的预设...
学习使用Bootstrap3栅格系统是Web开发中的一个重要环节，Bootstrap作为一个流行的前端框架，其栅格系统为开发者提供了强大的响应式布局能力。本文将详细介绍如何搭建Bootstrap开发环境以及如何利用栅格系统进行网页...