Bootstrap三大核心内容的基础，即基础的CSS 布局语法。其包括基础排版（Typography）、代码（Code）、表 格（Tables）、表单（Forms）、按钮（Buttons）、图片 （Images）、辅助类（Helper Classes）和响应式设计 （Responsive utilities）。

本节目录：

概述

HTML5文档类型

由于Bootstrap使用了HTML5特定的HTML元素和CSS属性，所 以使用Bootstrap的时候，所有的HTML文件都需要在其顶部引用 HTML5的DOCTYPE属性

<!DOCTYPE html>

<html lang="en">

    ...

</html>

移动先行

在移动设备浏览器上，通过为viewport meta标签添加的userscalable=no可以禁用其缩放（zooming）功能。

响应式图片

为了能对图片的大小进行自适应缩放，Bootstrap在3.x版里添 加了一个.img-responsive样式，本质是为图片设置了maxwidth: 100%；和height: auto；属性

排版与链接

Bootstrap为网页设置了一些基本的全局样式、排版和链接风格

  1. 在body元素上取消了margin设置，改为默认为0，margin:0。
  2. 在body元素上设置了背景色为白色，background-color: #ffffff。
  3. 在布局排版方面，字体、字体大小、行间距使用的标准值

居中容器

一个页面（或元素）要居中显示，可以在外部容器上简单应 用.container样式即可。由于栅格系统依赖于外部容器的大小设 置，所以默认情况下container样式有一个max-width属性用于限 制栅格系统的最大宽度

基础排版

标题

bs为传统的标题元素h1～h6重新定义了标准的样式， 使得在所有浏览器下显示效果都一样。

bs还提供了h类的样式， 如.h1的样式比h1标签的样式,不同的是没有定义 margin-top和margin-bottom。

文本

bs为全局设置的字体大小。

small、strong、em、cite

容器内的文本对齐方式：text-left、text-center、text-right、text-justify

缩略语：abbr(鼠标hover显示title值)

列表

bs提供了6种形式的列表，分别是：普通列表、有序列表、去点列表、内联列表、描述列表和水平描述列表。

普通列表(ul)、有序列表(ol)、去点列表(list-unstyled)、描述列表、水平描述列表，只是优化，效果不明显。

内联列表(list-inline)将列表项水平显示。类似水平菜单效果

代码

代码样式通常在需要引用代码的地方出现

单行的内联代码需要使用code元素包含

<kbd>元素包含的内容是表示该内容需要用户键盘输入，所 以一般是设置成input的效果，用法和code类似

pre元素一般用于显示大块的代码段，并保证原有格式不变。 另外可以在pre元素上应用.pre-scrollable样式，则可以控制该区域 最大高度为340像素，并可以在y方向滚动

表格

bs提供了1种基础.table样式、4种附加样式（.table-striped、.table-bordered、.table-hover、.table-condensed）以及一个支持响应式布局的.table-responsive容器样式。

.table-striped样式，其添加了隔行加背景色的设置。

.table-bordered为表格所有的单元格提供了1条1像素宽的边框

.table-hover当鼠标移动上去时对应的部分能够换个颜色的话，那就会显得很有动感，并且有高亮显示的功能

.table-condensed紧凑型表格，即表格的显示比普通表格稍微紧凑一些， 实现原理是减少单元格的内边距

.tableresponsive样式包装在.table样式外部即可创建响应式表格，其会 在小屏幕设备上（小于768像素）水平滚动

bs为表格的tr元素提供了5种基本的颜色样式（active success info warning danger），用于控制tr的背景颜色。

表单

bs框架中的核心内容，表单提供了丰富的样式（基础、内联、横向）。

先了解2个基本样式

form-control:设置为100%

form-group:设置下边距，保证每个控件显示。

如果在select、input、textarea元素上应用了.form-control样式，显示的宽度会变成100%，并且placeholder的颜色都设置成了 #999999

内联表单

有的时候，我们可能需要一个所有控件都在一行中的表单，只需要在普通的form元素上应用一个.form-inline样式

横向表单

与内联表单的使用方式不太一样，其不能在form元素上简单应用一个.form-horizontal样式。

由于.form-horizontal样式改变了.form-group的行为，将其表现得像栅格系统中的行（row）一样，因此就无需再使用.row样式了。

表单控件

对现有HTML5语法下的input都进行了支持（如 type为text、password、datetime、datetime-local、date、 month、time、week、number、email、url、search、tel和color 的元素）

input元素，必须声明type类型，否则可能会引 起其他问题

select元素，多行选择设置mulitiple属性为multiple

textarea元素，定义了rows数字即可定义大文本框的高度，定义cols可以定义大文本框的宽度

checkbox和radio元素，是input元素里两个非常特殊的type，由于经常搭配文字显示，bs做了标准显示

    <div class="radio">

        <label><input name="opt" type="radio" />ON</label>

    </div>

    <div class="radio">

        <label><input name="opt" type="radio" />OFF</label>

    </div>

    <div class="checkbox">

        <label><input type="checkbox"/>Swing</label>

    </div>

    <div class="checkbox">

        <label><input type="checkbox" />Runing</label>

    </div>

当checkbox和radio内容很少时,需要横向显示的时候，可以用checkbox-inline和radio-inline

控件状态

bs提供了3种状态的样式可供使用，分别是：焦点状态（默认提供）、禁用状态、验证提示状态。

使用方式和普通的disabled一样，只需要在禁用元素上使用 disabled属性即可。<input ... disabled>

fieldset如果使用了disabled属性时，内部的控件也将会禁用。

在填写表单的时候，经常要提示用户其输入内容是否合法，bs提供了.has-warning、.has-error、.has-success三种样式。

（父容器上的has-feedback样式用于 设置定位方式；小图标元素上的form-control-feedback样式用于 设置图标的显示大小）

<div class="form-group has-success has-feedback">

                <label class="control-label" for="name">User Name:</label>

                <input type="text" class="form-control" id="name" />

                <span class="glyphicon glyphicon-ok form-control-feedback"></span>

</div>

　　

控件大小

bs提供了两个样式用于设置稍大或者稍小的input输入框，分别是：.input-lg和.input-sm

按钮

按钮样式，定义了标准5种颜色、1个默认和一个link按钮。

按钮大小，定义3种.btn-lg、.btn-sm、.btnxs。.btn-block样式可以充满父元素，不随文字符宽度变化。

多标签，支持button a input3个标签。为了兼容性，非常建议使用button。

支持active和disabled状态。

图像

提供了3种风格效果,在img标签上应用.img-rounded、.img-circle、.img-thumbnail样式即可

使用过程中需要注意，上述样式没有控制图片的显示大小，所以需要额外应用样式或者限制父元素大小来控制图片显示大小.

IE8及以下版本不支持.img-rounded和.img-circle样式特效。

辅助样式

文本

文本样式，bs提供了1个灰色，和5个基本标准样式的颜色，分别是：柔和灰（text-muted）、主要蓝（text-primary）、成功绿 （text-success）、信息蓝（text-info）、警告黄（textwarning）、危险红（text-danger）

文本背景样式，bs还提供了上面的5种文本颜色样式对应（muted样式除外），分别是：主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄 （bg-warning）、危险红（bg-danger）

辅助图标

关闭图标（右浮动）

        <button class="close">×</button>

        <a class="close">×</a>

向下箭头

<span class="caret"></span>

浮动

对于内容浮动，一般会有3种需求 （左浮动、右浮动、居中对齐），分别对应了pull-left、pull-right和center-block样式

响应式样式

利用媒体查询的特性，对特定的情况进行隐藏或显示的设置。

.visible-开头的样式表示仅 在某尺寸时显示，其他都隐藏；而.hidden样式则表示仅在某尺寸 时隐藏，其他都显示。

如：

提供了分别对浏览器和打印机进行隐藏和显示的设置　　visible-print和hidden-print

只在大屏幕下显示　　visble-lg

[Bootstrap]7天深入Bootstrap(3)CSS布局的更多相关文章

  1. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  2. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  3. Bootstrap 3之美04-自定义CSS、Theme、Package

    本篇主要包括: ■  自定义CSS■  自定义Theme■  自定义Package 自定义CSS 有时候,需要自定义或重写Bootstrap默认的CSS.→在css文件夹下创建一个site.css→假 ...

  4. [Bootstrap]7天深入Bootstrap(1)入门准备

    由于申请了一个域名,一个云主机,开始弄个人网站. 发现Bootstrap非常方便,和重要,故开始学习与分享关于Bootstrap的技术. 推个广告 个人网站:http://www.neverc.cn ...

  5. html css布局

    这几天有点急于求成了,原来每一门技术都像大海,只有深入其中才发现它比看到的更要深广的多. 虽然忙里偷闲的看了HTML5,NODE.JS,JAVASCRIPT核心等许多东西,但是真正掌握的不足十分之一, ...

  6. LayoutSimple简易响应式CSS布局框架

    开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...

  7. CSS布局方面的一些小总结

    1. display属性 display是CSS布局的第一站,它控制一个元素以什么“身份”出现在页面布局当中.它的值有很多个,常用的有block,inline,inline-block,table,n ...

  8. CSS布局那点事儿

    布局 最开始老的一代网站开发,布局都是通过表格实现的. 这样可以形成规整的网格布局,但是也会带来一定的复杂性.比如想要新增某个页面元素,就有可能要改动整个表格,添加很多无用的行或者列. 后来,衍生出不 ...

  9. CSS 布局经典问题初步整理

    CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布局:通过十个例子讲解布局,主要涉及相对布局,绝对布局,浮动. 百度前端学院笔记 – 理解绝对定位:文章本身一般,几篇参考文献比较 ...

随机推荐

  1. Gulan查询UI排布

    遇到一个问题,如何在相对布局里把两个item放在同一行,而且高度一样呢? <RelativeLayout xmlns:android="http://schemas.android.c ...

  2. BabeLua

    http://cn.cocos2d-x.org/tutorial/show?id=507 command : -workdir E:\xg_svn\client\cocos2d-x-2.2.2\pro ...

  3. git的一些相关知识

    1.配置多个git远程仓库的ssh-Key切换(转自) 目前的git仓库如github都是通过使用SSH与客户端连接,如果只是固定使用单个git仓库的单个用户 (first),生成生成密钥对后,将公钥 ...

  4. 文件系统管理 之 Linux 查看磁盘分区、文件系统、使用情况的命令和相关工具介绍

    一.df 命令:df 是来自于coreutils 软件包,系统安装时,就自带的:我们通过这个命令可以查看磁盘的使用情况以及文件系统被挂载的位置: 举例: [root@localhost beinan] ...

  5. Android studio NDK 编译 "$USE_DEPRECATED_NDK=true" 异常问题解决

    我的项目是https://github.com/leixiaohua1020/simplest_ffmpeg_mobile/tree/master/simplest_ffmpeg_android_st ...

  6. 移动应用安全开发指南（Android）--完结篇(http://www.bubuko.com/infodetail-577312.html)

    1.认证和授权 概述 认证是用来证明用户身份合法性的过程,授权是用来证明用户可以合法地做哪些事的过程,这两个过程一般是在服务器端执行的,但也有的APP出于性能提升或用户体验等原因,将其做在客户端完成, ...

  7. android 监听软键盘的收起与打开

    参考: http://toughcoder.net/blog/2015/10/09/android-trick-detect-soft-keyboard-show-slash-hide/ packag ...

  8. WPF读写config配置文件

    1. 在你的工程中,添加app.config文件.文件的内容默认为: 1 <?xml version="1.0" encoding="utf-8" ?&g ...

  9. [LeetCode] Best Meeting Point

    Problem Description: A group of two or more people wants to meet and minimize the total travel dista ...

  10. 使用jQuery开发iOS风格的页面导航菜单

    在线演示1 本地下载     申请达人,去除赞助商链接 iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航. HTML代码 我们 ...