JavaWEB07 Bootstrap基础

今日内容 学习目标
使用bootstrap重写首页

学会通过官方提供的demo实例,完成自己需要的功能

能够从已有html文档中找到将要修改的位置,并进行简单调整

 

 

 

1. BootStrap概述

  • Bootstrap,基于HTML\CSS\JAVASCRIPT的前端框架(半成品)。其预定义一套CSS样式和与样式对应的jQuery代码,我们只需要提供固定HTML结构,添加固定的class样式,就可以完成指定效果的实现
  • Bootstrap在jQuery的基础工作,可以理解其就是jQuery的一个插件
  • Bootstrap是的web开发更加快捷,代码优雅,美观大方
  • Bootstrap基础入门使用的都是自带CSS样式,高级开发中需要使用H5\CSS3\动态CSS语言Less进行自定义开发
  • 国内一些移动开发者较为熟悉的框架,如Wex5前端开源框架,也是基于Bootstrap源码进行性能优化而来

2. 响应式布局

  • 响应式布局:一个网站能够兼容多个终端(手机,pad),为不需要为每个终端做一个特定的版本,解决移动互联网浏览问题
  • Bootstrap就是响应式布局最成功的体现,为了兼容不同的浏览器jQuery,为了适配不同的终端采用CSS3 Media Query(媒体查询)

3. 环境搭建

3.1 下载:http://d.bootcss.com/bootstrap-3.3.5.zip

3.2 目录结构

bootstrap/
├── less/ less源码(动态CSS技术)
├── js/ 模块js
├── fonts/ 字体(CSS3使用字体图标)
├── dist/ 发布版内容
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/ 文档(主要demo案例)
    └── examples/

3.3 内容结构

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

3.4 基本模板



  
    
    
    
    
    
    
    Bootstrap基本模板

    
    

    
    
    
  
  
    

你好,世界!

前端开发中建议:网站优化时,除了立即需要工作的js存放在head外,将大部分js文件防止在页面的末尾

4. 全局CSS样式

4.1 viewport 视口

width

设置layout viewport  的宽度,为一个正整数,或字符串"width-device"

initial-scale

设置页面的初始缩放值,为一个数字,可以带小数

minimum-scale

允许用户的最小缩放值,为一个数字,可以带小数

maximum-scale

允许用户的最大缩放值,为一个数字,可以带小数

height

设置layout viewport  的高度,这个属性对我们并不重要,很少使用

user-scalable

是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

* 必须要设置meta viewport标签,设置浏览器视口宽度为设备理想宽度

<meta name="viewport" content="width=device-width, initial-scale=1">

4.2 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

...

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

...

案例演示



  
    
    
    
    Bootstrap容器介绍
    
    
    
    
    
    
    	
  
  
		
		

你好,世界!

你好,世界!

你好,世界!

JavaWEB07 Bootstrap基础_第1张图片

4.3 排版

4.3.1 页面主体

标题

HTML 中的所有标题标签,

 到 
 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。在标题内还可以包含  标签或赋予 .small 类的元素,可以用来标记副标题。

JavaWEB07 Bootstrap基础_第2张图片

页面主体

Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予  元素和所有段落元素。另外,

 (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

 

JavaWEB07 Bootstrap基础_第3张图片

中心内容

通过添加 .lead 类可以让段落突出显示。

JavaWEB07 Bootstrap基础_第4张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.3.2 内联文本元素

Marked text

高亮文本,使用标签

被删除的文本

对于被删除的文本使用  标签。

JavaWEB07 Bootstrap基础_第5张图片

无用文本

对于没用的文本使用  标签。

JavaWEB07 Bootstrap基础_第6张图片

插入文本

额外插入的文本使用  标签。

JavaWEB07 Bootstrap基础_第7张图片

带下划线的文本

为文本添加下划线,使用  标签。

JavaWEB07 Bootstrap基础_第8张图片

小号文本

对于不需要强调的inline或block类型的文本,使用  标签包裹,其内的文本将被设置为父容器字体大小的 85%。标题元素中嵌套的  元素被设置不同的 font-size 。

你还可以为行内元素赋予 .small 类以代替任何  元素。

JavaWEB07 Bootstrap基础_第9张图片

着重

通过增加 font-weight 值强调一段文本。

斜体

用斜体强调一段文本。

JavaWEB07 Bootstrap基础_第10张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.3.3 对齐

通过文本对齐类,可以简单方便的将文字重新对齐。

JavaWEB07 Bootstrap基础_第11张图片

4.3.4 改变大小写

通过这几个类可以改变文本的大小写。

JavaWEB07 Bootstrap基础_第12张图片

4.3.5 缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的  元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对使用辅助技术的用户也可见), 但需要包含 title 属性。

基本缩略语

首字母缩略语

 

 

 

 

 

 

 

4.3.6 地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 
 可以保留需要的样式。

JavaWEB07 Bootstrap基础_第13张图片

4.3.7 引用

默认样式的引用

将任何 HTML 元素包裹在 

 中即可表现为引用样式。对于直接引用,我们建议用 

 标签。

JavaWEB07 Bootstrap基础_第14张图片

多种引用样式

对于标准样式的 

,可以通过几个简单的变体就能改变风格和内容。

命名来源

添加 

 用于标明引用来源。来源的名称可以包裹进 标签中。

JavaWEB07 Bootstrap基础_第15张图片
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。 JavaWEB07 Bootstrap基础_第16张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.3.8 列表

无序列表

JavaWEB07 Bootstrap基础_第17张图片

有序列表

JavaWEB07 Bootstrap基础_第18张图片

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

JavaWEB07 Bootstrap基础_第19张图片

内联列表

通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

JavaWEB07 Bootstrap基础_第20张图片

描述

JavaWEB07 Bootstrap基础_第21张图片

水平排列的描述

.dl-horizontal 可以让 

 内的短语及其描述排在一行。开始是像 
 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

JavaWEB07 Bootstrap基础_第22张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.4 表格

基本实例

为任意 

 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。

 之内的每一行增加斑马条纹样式。

 

跨浏览器兼容性

条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持。

 中的每一行对鼠标悬停状态作出响应。

JavaWEB07 Bootstrap基础_第23张图片

条纹状表格

通过 .table-striped 类可以给 

JavaWEB07 Bootstrap基础_第24张图片

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

JavaWEB07 Bootstrap基础_第25张图片

鼠标悬停

通过添加 .table-hover 类可以让 

JavaWEB07 Bootstrap基础_第26张图片

紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

JavaWEB07 Bootstrap基础_第27张图片

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
JavaWEB07 Bootstrap基础_第28张图片

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

 

垂直方向的内容截断

响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部的内容截断。特别是,也可以截断下拉菜单和其他第三方组件。

 

Firefox 和 fieldset 元素

Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式,导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决,但是以下代码并未集成在 Bootstrap 中:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}
JavaWEB07 Bootstrap基础_第29张图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.5 表单

4.5.1 基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 
  • 多选和单选框

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent , you'll need to add the .disabled class to the parent .radio.radio-inline.checkbox, or .checkbox-inline.

默认外观

JavaWEB07 Bootstrap基础_第33张图片

内联单选和多选框







  • 下拉列表(select)

注意,很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。

对于标记了 multiple 属性的 

  • 静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行,为 

 元素添加 .form-control-static 类即可。

JavaWEB07 Bootstrap基础_第35张图片


  • 焦点状态

我们将某些表单控件的默认 outline 样式移除,然后对 :focus 状态赋予 box-shadow 属性。

在本文档中,我们为上面实例中的输入框赋予了自定义的样式,用于演示 .form-control 元素的 :focus 状态。

  • 禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed 鼠标状态。

  • 被禁用的 fieldset

 设置 disabled 属性,可以禁用 
 中包含的所有控件。

JavaWEB07 Bootstrap基础_第36张图片

  • 只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态。

  • Help text

Block level help text for form controls.

JavaWEB07 Bootstrap基础_第37张图片



...
A block of help text that breaks onto a new line and may extend beyond one line.
  • 校验状态

Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label.form-control 和 .help-block 元素都将接受这些校验状态的样式。

JavaWEB07 Bootstrap基础_第38张图片

A block of help text that breaks onto a new line and may extend beyond one line.
  • 添加额外的图标

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标(feedback icon)只能使用在文本输入框  元素上。

(success)
(warning)
(error)
@
(success)

为水平排列的表单和内联表单设置可选的图标

JavaWEB07 Bootstrap基础_第39张图片

(success)
@
(success)

可选的图标与设置 .sr-only 类的 label

如果你使用 .sr-only 类来隐藏表单控件的  (而不是使用其它标签选项,如 aria-label 属性), 一旦它被添加,Bootstrap 会自动调整图标的位置。

JavaWEB07 Bootstrap基础_第40张图片

(success)
@
(success)
  • 控件尺寸

通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

JavaWEB07 Bootstrap基础_第41张图片







水平排列的表单组的尺寸

通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

JavaWEB07 Bootstrap基础_第42张图片

调整列(column)尺寸

用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度。

4.5 Bootstrap栅格系统

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 通过“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。

4.5.1 栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度 None (自动) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列(column)数 12
最大列(column)宽 自动 ~62px ~81px ~97px
槽(gutter)宽 30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

实例1:从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。

JavaWEB07 Bootstrap基础_第43张图片

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

实例2:流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

...

实例3:移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-* 和 .col-md-*。请看下面的实例,研究一下这些是如何工作的。

JavaWEB07 Bootstrap基础_第44张图片


.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

实例4:手机、平板、桌面

在上面案例的基础上,通过使用针对平板设备的 .col-sm-* 类,我们来创建更加动态和强大的布局吧。

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

实例5:多余的列(column)将另起一行排列

如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。

JavaWEB07 Bootstrap基础_第45张图片

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.

4.5.2 响应式列重置

即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix 和 响应式工具类。

.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

除了列在分界点清除响应, 您可能需要 重置偏移, 后推或前拉某个列。请看此栅格实例。

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

4.5.3 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

JavaWEB07 Bootstrap基础_第46张图片

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

You can also override offsets from lower grid tiers with .col-*-offset-0 classes.

4.5.4 嵌套列

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

4.5.5 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

4.6 Less mixin 和变量

除了用于快速布局的预定义栅格类,Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

4.6.1 变量

通过变量来定义列数、槽(gutter)宽、媒体查询阈值(用于确定合适让列浮动)。我们使用这些变量生成预定义的栅格类,如上所示,还有如下所示的定制 mixin。

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

4.6.2 mixin

mixin 用来和栅格变量一同使用,为每个列(column)生成语义化的 CSS 代码。

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

实例展示

你可以重新修改这些变量的值,或者用默认值调用这些 mixin。下面就是一个利用默认设置生成两列布局(列之间有间隔)的案例。

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
...
...

 

 

 

 

 

 

你可能感兴趣的:(JavaWEB)