Bootstrap 中文文档教程

Bootstrap 中文文档教程

全局样式和grid布局—Bootstrap中文使用指南

全局样式1.要求html5文档类型

Bootstrap使用的css属性和html元素依赖于html5的文档类型声明，请确保每个Bootstrap的页面包含下面的代码：

  1. <!DOCTYPE html>

  2. <html>

  3. ...

  4. </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 中文文档教程的更多相关文章

  1. thymeleaf模板、thymeleaf语法相关中文文档教程

    thymeleaf模板在SpringBoot中是默认的模范引擎技术,SpringBoot不推荐使用比较老旧的jsp.但如果您想使用jsp的话,当然也可以.我这里为您讲述thymeleaf模板的基本th ...

  2. LVGL|lvgl中文手册(lvgl中文文档教程)

    lvgl官方的教程是英文的,这个是我在做项目时根据lvgl官方文档做出来的lvgl中文文档(持续更新维护),不仅仅只是生硬照搬lvgl官方文档的翻译,同时总结了我们在实际开发中遇到的各种细节,让这个文 ...

  3. 57、Bootstrap中文文档

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...

  4. 12、Bootstrap中文文档（其它插件分享）

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...

  5. velocity.js 中文文档 (教程)

    velocity.js 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. Vel ...

  6. [转]Magento 2中文文档教程 - 配置和运行cron(定时任务)

    本文转自:https://blog.csdn.net/xz_src/article/details/72793476 cron(定时任务)概述 Magento 2 有许多功能需要用到cron(定时任务 ...

  7. Magento 2中文文档教程 - Magento 2.1.x 系统需求

    Magento 2.1.x 系统需求 操作系统 (Linux x86-64) Linux发行版如红帽企业Linux(RHEL),CentOS,Ubuntu,Debian,等等 内存需求 升级的应用程序 ...

  8. bootstrap中文文档阅读记录

    2017年1月12日20:26:26http://v3.bootcss.com/components/#navbar

  9. Swift语言教程中文文档

    Swift语言教程中文文档 Swift语言教程(一)基础数据类型 Swift语言教程(二)基础数据类型 Swift语言教程(三)集合类型 Swift语言教程(四) 集合类型 Swift语言教程(五)控 ...

随机推荐

  1. linux 系统下删除tar.gz的tar

    在终端输入: 1.删除环境配置 vi /etc/profile 删除对应的jdk配置. 2.删除jvm rm /usr/lib/jvm 3.删除对应的tar解压的java目录. 4.输入 java 或 ...

  2. 项目中使token

    项目中使token 如果项目架构采用前后端分离,并采用分布式架构,通过定义接口API,与前端进行数据交互,前端通过html前行实现.若加入移动端(Andriod,ios)实现,可直接使用API接口实现 ...

  3. centos v7.0解决乱码

    [root@localhost ~]# ll 鎬荤敤閲4-rw-------. 1 root root 1045 8鏈 24 21:17 anaconda-ks.cfg [root@localhost ...

  4. windows系统安装的两个阶段

    windows visa .windows7.windows server 2008系统安装的两个阶段1.Boot.WIM----Windows PE系统.提供了windows7安装向导! 2.Ins ...

  5. Akka系列（四）：Akka中的共享内存模型

    前言...... 通过前几篇的学习,相信大家对Akka应该有所了解了,都说解决并发哪家强,JVM上面找Akka,那么Akka到底在解决并发问题上帮我们做了什么呢? 共享内存 众所周知,在处理并发问题上 ...

  6. deepin下安装Qt5&以及部分问题解决

    deepin安装Qt5 1 deepin商店里的Qt5版本太低,可以直接下载官方的Qt5安装包: 官方下载渠道:http://www.qt.io/download-open-source/ 离线镜像下 ...

  7. centos7下安装composer和git

    一.安装composer composer 属于php的包依赖管理工具. 1.进入Composer国内镜像网站文档页查看安装方法: https://docs.phpcomposer.com/00-in ...

  8. win10 powershell禁止运行脚本解决

    win10 现在默认策略为 Restricted 该策略情况下是禁止在终端下运行脚本文件的,所以我们想要通过powershell 来运行我们的脚本文件的话就需要我们更改其策略才行,如下命令可以帮助你 ...

  9. Winform CheckBox组,先横向排列,后纵向排列,点击文字,改变Checkbox的状态的方法

      开始选用的CheckedListBox控件,不能实现,改为使用ListView控件,可以满足需求.操作步骤如下: 1.将ListView的属性View改为SmallIcon. 2.CheckBox ...

  10. luogu P2791 幼儿园篮球题

    传送门 先看我们要求的是什么,要求的期望就是总权值/总方案,总权值可以枚举进球的个数\(i\),然后就应该是\(\sum_{i=0}^{k} \binom{m}{i}\binom{n-m}{k-i}i ...