Bootstrap 中文文档教程
Bootstrap 中文文档教程
Bootstrap 中文文档教程
全局样式和grid布局—Bootstrap中文使用指南
全局样式1.要求html5文档类型
Bootstrap使用的css属性和html元素依赖于html5的文档类型声明，请确保每个Bootstrap的页面包含下面的代码：
<!DOCTYPE html>
<html>
...
</html>
2.排版和链接样式
全局的排版和链接样式放在scaffolding.less文件内（关于less教程后面会有详细说明）。默认做了如下处理：
移除body的外边距
设置body的背景颜色为白色
使用@baseFone，@baseFontSize，@baseLineHeight属性作为排版基础
使用@linkColor设置了全局链接颜色和:hover伪属性的下划线
3.默认样式重置
从 Bootstrap 2开始，CSS重置样式基于Normalize.css，新的重置样式，可以在reset.less中找到（Bootstrap做了许多的简化）。
默认栅格布局系统
Bootstrap的默认布局系统由总宽度为940px的12列组成。
它能够适应各个分辨率的显示设备，比如手机、平板、超高分辨率屏幕等。
（ps：请看demo）
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
上面的代码将创建二列栅格，span4容器占总宽度的4/12即（1/3）。
1.如何处理列的偏移
比如我们希望有个栅格是右靠齐。
<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>
第二个span4容器，增加个offset4样式名，表示跟前一个容器相隔4个列距离。
2.处理列的嵌套
（ps：请看demo）
在Bootstrap中使用静态（非浮动）的布局处理栅格的嵌套是非常简单的事。
<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>
.row的容器内部是一个占满12列的层(.span12)，下面嵌套个新的.row容器，内部是span6二列布局。
浮动布局系统
浮动布局系统，就是我们经常使用的float:left;布局方式，比较特殊的是bootstrap使用百分比来定义栅格的宽度。
1.浮动栅格的行容器
（ps：请看demo）
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
流动布局，行容器使用. row-fluid 样式名，其他地方不变。
.row-fluid {
width: 100%;
}
.row-fluid:before, .row-fluid:after {
content: "";
display: table;
}
.row-fluid:after {
clear: both;
}
2.宽度使用百分比，而不是像素值
浮动布局系统比静态布局系统，拥有更强的适应性，同样适应不同分辨率的屏幕。
.row-fluid > [class*="span"] {
float: left;
margin-left: 2.5641%;
}
.row-fluid > [class*="span"]:first-child {
margin-left: 0;
}
3.浮动布局中处理容器的嵌套
（ps：请看demo）
浮动布局中的嵌套处理有点不大一样:嵌套的栅格不需要匹配父容器的栅格数，每一行的宽度都占用父容器的100%宽度。
<div class="row-fluid">
<div class="span12">
Level 1 of column
<div class="row-fluid">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>
定制栅格
变量
默认值
描述
@gridColumns
12列的数量
@gridColumnWidth
60px列的宽度
@gridGutterWidth
20px列的间隔LESS中的变量
Bootstrap中定制一套自己的940px栅格系统，只需要很少的less变量。这些变量可以在variables.less中找到。
如何定制
你需要修改@grid*三个变量（指的是上面表格中的三个变量），并重新编译Bootstrap（less重新编译出新的css文件）。关于less的编译可以看 four ways documented to recompile，如果新增了列，务必在grid.less增加上对应的样式。
保留适应性
自适应的栅格系统只能用于默认的940px栅格。为了维持Bootstrap的自适应性，需要额外在 responsive.less中自定义栅格样式。
布局静态布局
<div class="container">
...
</div>
浮动布局
使用container-fluid样式名，产生浮动页面结构，下面的demo中演示了生成常用的2列布局。
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
效果如下图：
自适应设计
如何让栅格布局系统适应不同分辨率的屏幕？
需要用到css3的media queries，严重推荐阅读《CSS3 media queries使用参考指南》和《CSS3 Media Queries 详解》。Media Queries的引用，让你可以针对不同的设备定制不一样的css样式，可以很方便的让布局系统适应不同的媒体设备。
原文讲得比较晦涩，明河借用《CSS3 Media Queries 详解》举个简单例子：
<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">
样式表引用增加media属性。
screen： 媒体类型里的一种，10种媒体类型
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
screen and (min-width: 400px)的意思是当屏幕的宽度大于等于400px的时候，应用此条CSS，也就是说media非常像条件语句。
bootstrap支持的设备
Label
Layout width
Column width
Gutter width
智能手机等于小于480px无固定宽度无固定宽度介于智能手机和平板电脑之间等于小于767px无固定宽度无固定宽度平板电脑等于大于768px42px20px默认等于大于980px60px20px超分辨率等于大于1200px70px30px需要meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用media queries
Bootstrap默认不包含这些media queries的样式，你可以通过下列的方式引入：
页面引入bootstrap-responsive.min.css 和respond.min.js
重编译bootstrap时，增加@import “responsive.less”
修改和单独编译responsive.less为一个独立的文件
Bootstrap 的media queries代码
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }
// Large desktop
@media (min-width: 1200px) { ... }
学习地址：
http://docs.bootcss.com/bootstrap-2.3.2/docs/getting-started.html
Bootstrap 中文文档教程的更多相关文章
- thymeleaf模板、thymeleaf语法相关中文文档教程
thymeleaf模板在SpringBoot中是默认的模范引擎技术,SpringBoot不推荐使用比较老旧的jsp.但如果您想使用jsp的话,当然也可以.我这里为您讲述thymeleaf模板的基本th ...
- LVGL|lvgl中文手册(lvgl中文文档教程)
lvgl官方的教程是英文的,这个是我在做项目时根据lvgl官方文档做出来的lvgl中文文档(持续更新维护),不仅仅只是生硬照搬lvgl官方文档的翻译,同时总结了我们在实际开发中遇到的各种细节,让这个文 ...
- 57、Bootstrap中文文档
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...
- 12、Bootstrap中文文档（其它插件分享）
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...
- velocity.js 中文文档 (教程)
velocity.js 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. Vel ...
- [转]Magento 2中文文档教程 - 配置和运行cron(定时任务)
本文转自:https://blog.csdn.net/xz_src/article/details/72793476 cron(定时任务)概述 Magento 2 有许多功能需要用到cron(定时任务 ...
- Magento 2中文文档教程 - Magento 2.1.x 系统需求
Magento 2.1.x 系统需求 操作系统 (Linux x86-64) Linux发行版如红帽企业Linux(RHEL),CentOS,Ubuntu,Debian,等等 内存需求 升级的应用程序 ...
- bootstrap中文文档阅读记录
2017年1月12日20:26:26http://v3.bootcss.com/components/#navbar
- Swift语言教程中文文档
Swift语言教程中文文档 Swift语言教程(一)基础数据类型 Swift语言教程(二)基础数据类型 Swift语言教程(三)集合类型 Swift语言教程(四) 集合类型 Swift语言教程(五)控 ...
随机推荐
- 四十八：数据库之alembic常用命令和经典错误的解决办法
常用命令:1.init:创建一个alembic仓库2.reversion:创建一个新的版本3.--autogenerate:自动将当前模型的修改,生成迁移脚本4.-m:message,可以记录本次迁移 ...
- python学习笔记：（十五）迭代器和生成器
一.迭代器: 1.迭代器是python最强大的功能之一,是访问集合元素的一种方式. 2.迭代器是一个可以记住遍历的位置的对象. 3.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问结束.迭代 ...
- Java Enum枚举 遍历判断 四种方式（包括 Lambda 表达式过滤）
示例代码如下: package com.miracle.luna.lambda; import java.util.Arrays; /** * @Author Miracle Luna * @Date ...
- java调用支付宝 支付api 【沙箱环境】
由于支付宝支付api需要各种备案,但学校项目需要引入支付功能 先演示 ,所以采用 沙箱环境 一.登录支付宝 开放平台 及配置相关 https://openhome.alipay.com/platf ...
- 报错：java.lang.NoClassDefFoundError: com/google/inject/Injector
使用testng report,导入jar包:reportng.jar和velocity-dep-1.4.jar后,执行脚本,报错如下: 缺少依赖的jar包:guice-4.0.jar 导入依赖的ja ...
- SQL注入（bool型）
sqli-labs 靶场https://blog.csdn.net/qq_41420747/article/details/81836327 教程+靶场 1. https://blog.csdn.ne ...
- 在SQL Server 中创建外键
建外键的前提是此外键必须是另外一个表的主键. 建外键的步骤: 第一步打开要建外键表的设计器,右击选择“关系”. 然后弹出“外键关系”窗体,我们选择“添加”,然后点击“表和列规范”后面的小按钮, 就会弹 ...
- 【Linux 网络编程】网络IP地址结构体
(1)IPv4套接口地址结构通常也称为"网际套接字地址结构",它以"sockaddr_in"命名, 定义在<netinet/in.h> ...
- 初识JavaScript(三)
初识JavaScript(三) 我从上一讲<初识JavaScript(二)>了解到了类型.值.变量的定义以及特点,本节我将学习到JavaScript中的算术运算.二进制浮点数和四舍五入的错 ...
- python-day1(学前了解)
Markdown基本语法 各级标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 加粗 **加粗文本** 斜体 *我斜了* 高亮 ==我高亮了== 上标 2 ...