Boostrap排版、链接样式设置了基本的全局样式。分别是：为body元素设置background-color:#fff；使用@font-family-base、@font-size-base和@line-height-base a 变量作为版本的基本参数；为所有链接设置了基本颜色@link-color，并且当链接处于:hover状态时菜添加下划线。这些样式在scaffoliding.less文件中可以找到对应的源码。
布局容器:Bootstrap需要为页面内容和栅格系统包裹一个:container容器。Bootstrap提供了两个作此用处的类。由于padding等属性的原因，这两种容器类不能相互嵌套。
.container类用于固定宽度病支持响应式布局的容器。
.container-fluid类用于100%宽度，占据全部视口(viewport)的容器。
固定布局
bootstrap提供了一个通用的固定宽度的布局方式
<div class="container">
流式布局
利用<div class="container-fluid">代码可以创建一个流式、两列的页面，非常适合应用和文档类页面。
Bootstrap默认的栅格系统为12例，形成一个940px宽的容器，默认没有响应式布局特性。若加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整，在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。
媒体查询(media query)：在栅格系统中，我们在Less文件中使用以下媒体查询来创建关键的分界点阈值。
//小屏幕 平板 大于等于768px
@media (min-width:@screen-sm-min)
//中等屏幕 桌面显示器 大于等于992px
@media (min-width:@screen-md-min)
//大屏幕 大桌面显示器 大于等于1200px
@media (min-width:@screen-xd-min)
对于简单的两列式布局，创建一个.row容器，并在容器中刚加入合适数量的.span*列即可。由于默认的是12列的栅格，所有.span*列所跨越的栅格数之和最多是12。
Bootstrap还包含了一组Less变量和mixin用于生成简单、语义化的布局。
变量：通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。还可以定制mixin
@grid-columns : 12
@grid-gutter-width : 30px
@grid-float-breakpoint : 768px
mixin用来和栅格变量一同使用，为每个列(column)生成语义化的CSS代码。
偏移列
把列向右移动可使用.offset*类。每个类都给列的左边距增加了指定单位的列。
<div class="span4 offset4"> .offset4 将.span4右移了4个列的宽度。
嵌套列
在默认的栅格系统里，在已有的.span*内添加一个新的.row并加入.span*列，可以实现嵌套。被嵌套中的每列列数总和要等于父级别。
<div class="row">
<div class="span9">
Level 1
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 3</div>
</div>
</div>
</div>
流式栅格
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统过一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
列排序：通过使用.col-md-push-*、.col-md-pull-*类可以很容易的改变列(column)的顺序
<div class="row">
<div class="col-md-9 col-md-push-3">我在后面哦</div>
<div class="col-md-3 col-md-pull-9">我跑到前面去了呀</div>
</div>
启用响应式特性
通过在文档中的<head>标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。若你已经在定制页面编译好一个Bootstrap，那么只需添加一个meta标签。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<title>index_栅格系统</title>
<link rel="stylesheet" href="d:\bootstrap\css\bootstrap.min.css" />
<script src="d:\jQuery\jquery-1.9.1.min.js" ></script>
<script src="d:\bootstrap\js\bootstrap.min.js"></script>
<script src="d:\bootstrap\js\Application.js" ></script>
<script src="d:\bootstrap\js\holder.js" ></script>
<style type="text/css">
.col-md-12{
background: #ccc;
}
.col-md-3{
background: #fff;
}
.col-md-6{
background: #fff;
}
.row{
margin-bottom: 10px;
}
.footer{
background: #ccc;
}
</style>
</head>
<body>
<!-- 整体布局格式 -->
<div class="container">
<!-- 栅格布局 分成12行 -->
<div class="row">
<div class="col-md-12" >
<h3>bootstrap col-md-12</h3>
<p>dddddddddddddddddddddd</p>
</div>
<div class="row" >
<div class="col-md-3">
<img src="E:\photo\歌词控_JJ\1.jpg" ></img>
</div>
<div class="col-md-3">
<img src="E:\photo\歌词控_JJ\1.jpg" ></img>
</div>
<div class="col-md-6">
<img src="E:\photo\歌词控_JJ\1.jpg" ></img>
</div>
<!-- 防止样式漂浮 -->
<div class="clearfix"></div>
</div>
<div class="col-md-12">
<img src="E:\photo\歌词控_JJ\2.jpg" ></img>
</div>
<div class="footer" >
<div class="col-md-12">
<p>foreverforever</p>
</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
栅格系统与版式设计是现代平面设计中的重要组成部分，尤其在文字版式的排版上扮演着关键角色。栅格系统，简单来说，就是一种将页面划分成等份的虚拟结构，它可以帮助设计师更好地组织版面的元素，确保设计的整体性和...
网页设计中的栅格系统是设计行业的一项重要技术，它以固定格子布局的方式组织页面内容，使得网页设计更加整洁、有序，提升了用户体验和页面可用性。其历史悠久，最早可追溯至17世纪法国的印刷管理改革，随后在二战后...
Bootstrap栅格系统
Bootstrap栅格系统是Web开发中的一个关键工具，它允许开发者创建具有高度响应性和自适应性的网页布局。这个系统是Bootstrap框架的核心组成部分，旨在简化多设备显示的复杂性，确保网页在PC、平板和手机等不同屏幕...
Bootstrap栅格系统是一种基于12列的响应式布局框架，旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果，优化用户体验。Bootstrap栅格系统的...
Bootstrap栅格系统是Web开发中广泛使用的前端框架，它的核心特性之一就是强大的响应式栅格布局。这个"bootstrap.zip"压缩包包含的就是Bootstrap栅格系统的源码，这为我们提供了深入理解其工作原理的机会。 ...
响应式栅格系统生成器响应式栅格系统生成器响应式栅格系统生成器响应式栅格系统生成器
栅格系统是网页设计中的一个重要概念，它是一种用于组织页面内容的工具，使得网页在不同设备上呈现时能保持良好的视觉效果和用户体验。Bootstrap栅格系统是目前最流行且广泛使用的框架之一，它通过行（row）和列...
栅格系统 更好地帮助你学习前端
在网页设计领域，960栅格系统是一种广泛采用的设计框架，它可以帮助设计师高效地创建出结构清晰、布局均匀的网页。960栅格系统的名称来源于其基本的宽度设置——960像素，这个宽度是基于大多数显示器的分辨率而设定...
Bootstrap栅格系统是网页设计和开发中的一个关键组成部分，尤其对于构建响应式网站至关重要。Bootstrap框架的栅格系统提供了一种高效、灵活的方式来组织和排列网页内容，使其能够在各种屏幕尺寸上良好展示，从手机到...
响应式栅格系统是网页设计中的一个重要组成部分，它允许页面在不同设备和屏幕尺寸上保持良好的展示效果。在本文中，我们将深入探讨如何利用CSS Grid布局来构建一个强大的响应式栅格系统，以及如何结合SCSS（Sassy ...
Bootstrap栅格系统是Web开发中最常用的前端框架之一，由Twitter开发并开源，它提供了一套响应式、移动设备优先的流式布局工具，使得开发者能够快速构建美观且适应各种屏幕尺寸的网页。这个名为"bootstrap栅格系统....
在前端开发领域，栅格系统（Grid System）是一种布局方式，它可以帮助开发者高效地创建响应式、自适应的网页设计。在本项目中，我们关注的是基于Flexbox的栅格系统封装，这是一种现代且强大的CSS布局模式。Flexbox...
这个压缩包“03.Bootstrap栅格系统用法.rar”显然包含了关于如何有效利用Bootstrap栅格系统的教学资源，例如视频文件“03.Bootstrap栅格系统用法.mp4”。在这里，我们将深入探讨Bootstrap栅格系统的基本原理、其在C#...
在第五章中，我们将深入探讨Bootstrap的核心组件之一——栅格系统。栅格系统是Bootstrap实现页面布局的主要方式，它允许开发者通过简单的类名控制元素的排布，从而轻松创建复杂的网页结构。 Bootstrap栅格系统基于...
960栅格系统是一种广泛应用于网页设计中的布局框架，旨在提供一种标准化、高效的方法来组织页面内容。这个系统基于960像素的宽度，以此为基础构建网页布局，确保在不同分辨率的屏幕上都能呈现出良好的视觉效果和用户...
Bootstrap栅格系统是Web开发中一个非常重要的工具，它是一个响应式的布局框架，能够帮助开发者快速构建适应不同屏幕尺寸的网站。在“任务3 Bootstrap栅格系统”中，我们将学习如何利用Bootstrap栅格系统实现招商银行...
Bootstrap栅格系统是Web开发中一个非常重要的概念，尤其对于使用C#进行后端开发的程序员来说，理解并掌握这个前端框架的栅格系统能够帮助他们构建响应式、跨平台的用户界面。Bootstrap是由Twitter开发并开源的一个...