您所在的位置:小祥子 » 编程 » CSS » 正文

bootstrap3随笔

时间:2015-04-17 编辑:天纵 来源:本站整理

bootstrap3随笔

[TOC]

布局容器

Bootstrap需要为页面内容和栅格系统包裹在一个.container容器

!!! Caution "Warning!"
由于padding等属性的原因,这两种容器不能互相嵌套

  • .container类用于固定宽度并支持响应式布局的容器
  • .container-fluid类用于100%宽度,占据全部视口(viewport)的容器

栅格参数

  • 超小屏幕 <768px .col-xs-
  • 小屏幕 >768px .col-sm-
  • 中等屏幕 >992px .col-md-
  • 大屏幕 >1200px .col-lg-

排版

标题

<h1>~<h6>都可以使用,同时提供了.h1.h6的类

!!! Hint "Info"
如果使用副标题的话可以包含<small>标签或者使用.small

内联文本元素

  • <del>,<s>为文本加上删除线
  • <ins>,<u>为文本加上下划线

小号文本

<small>标签包裹的元素,其内的文本将被设置为父容器字体大小的85%。
!!! Note '提示'
标题元素中嵌套的<small>元素被设置不同的font-size

着重

<strong>包裹的元素font-weight值会加重

斜体

使用<em>标签包裹

对齐

  • text-left 左对齐
  • text-center 中间对齐
  • text-right 右对齐
  • text-justify 两端对齐
  • text-nowrap 文本不换行

基本缩略语

<abbr>
如果缩略语是首字母,为了突显出来,可以加上.initialism类,可以让font-size变得稍微小一些

引用

<blockquote>可以添加引用内容

	<blockquote>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
	  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
	</blockquote>

!!! Note "另一种展示风格"
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

列表

<ul><ol>来生成有序列表和无序列表

  • list-unstyled 无样式列表
  • list-inline 内联列表(就是排成一行)

描述

<dl> 带有描述短语的列表

  • dl-horizontal 可以让<dl>内的短语及其描述排在一行

代码块

  • <code> 内联代码
  • <kbd> 用户输入
  • <pre> 代码块
  • <var> 变量
  • <samp> 程序输出
关键词: