bootstrap笔记总结|博客系列

最近项目中用到bootstrap 很是健忘各种属性类名，频繁翻阅文档，在这里暂且记录一下笔记

# 一、 bootstrap简介

• Bootstrap，来自 Twitter（全国最大的微博），是目前最受欢迎的前端框架。
• bootstrap下载及演示 http://v3.bootcss.com
• 什么是bootstrap？
  • Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的开源框架，它简洁、直观、强悍、灵活，使得 Web 开发更加快捷，
  • 用于开发响应式布局、移动设备优先的 WEB 项目。
• 为什么使用 Bootstrap？
  • 跨设备
  • 跨浏览器（chrome，IE9以上，Firefox，Safari，Opera…）
  • 响应式布局
  • 具有实用性强的组件
  • 内置jquery插件
• bootstrap的结构
  • 主要分为三大核心模块：css、js、font

# 二、bootstrap排版样式

• 标题
  • 从 h1 到 h6

	<h1>Bootstrap 排版</h1> //36px
	<h2>Bootstrap 排版</h2> //30px
	<h3>Bootstrap 排版</h3> //24px
	<h4>Bootstrap 排版</h4> //18px
	<h5>Bootstrap 排版</h5> //14px
	<h6>Bootstrap 排版</h6> //12px
	<h2>bootstrap课程</h2>
	<p class="lead">hello world</p>

• 内联文本元素
  • 添加标记，<mark>元素或.mark 类

   <p>Bootstrap<mark>排版</mark></p>
   
   <!--各种加线条的文本-->
   <del>Bootstrap 排版</del>  //删除的文本
   <s>Bootstrap 排版</s>  //无用的文本
   <ins>Bootstrap 排版</ins>  //插入的文本
   <u>Bootstrap 排版</u>  //效果同上，下划线文本
   
   <!--各种强调的文本-->
   <small>Bootstrap 排版</small>  //标准字号的 85%
   <strong>Bootstrap 排版</strong>    //加粗 700
   <em>Bootstrap 排版</em>    //倾斜
   <p class="text-left">向左对齐文本</p>
   <p class="text-center">居中对齐文本</p>
   <p class="text-right">向右对齐文本</p>
   <p class="text-justify">对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>
   <p class="text-nowrap">该段落不会根据屏幕的大小对超出屏幕的文字进行换行。</p>
   <p class="text-lowercase">BOOTSTROP</p>
   <p class="text-uppercase">bootstrap</p>
   <p class="text-capitalize">bootstrap</p> //单词首字母大写

• 缩略语
  • HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框
  • 当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，
  • 请添加 .initialism 到 <abbr>

  <abbr title="World Wide Web">WWW</abbr><br>
  <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

• 地址
  • address默认为 display:block;，需要使用标签来为封闭的地址文本添加换行

   <address>
     <strong>Twitter, Inc.</strong><br>
     795 Folsom Ave, Suite 600<br>
     San Francisco, CA 94107<br>
     <abbr title="Phone">P:</abbr> (123) 456-7890
   </address>
   <address>
     <strong>Full Name</strong><br>
     <a href="mailto:#">first.last@example.com</a>
   </address>

• 引用
  • 默认样式引用，增加了左边线，设定了字体大小和内外边距 <blockquote> Bootstrap 框架 </blockquote>
  • 反向 <blockquote class="blockquote-reverse "> Bootstrap 框架 </blockquote>
  • 多种引用样式

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

• 列表

  • 有序列表、无序列表、自定义列表
    • .list-unstyled
    • .list-inline
    • .dl-horizontal 应用于<dl> 元素和 <dt>元素中

• 代码

  • .pre-scrollable 使 <pre> 元素可滚动 scrollable
  • 内联代码 <code><section></code>
  • 用户输入 press <kbd>ctrl + ,</kbd>
  • 标记变量 <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
  • 程序输出 <samp>This text is meant to be treated as sample output from a computer program.</samp>
  • 代码块 <pre><article>Please input...</article></pre>

# 三、表格、按钮、图片

• 表格

  • 基本表格 <table class="table">
  • 条纹表格 <table class="table table-striped">
  • 边框表格 <table class="table table-bordered">
  • 悬停表格<table class="table table-hover">
  • 精简表格<table class="table table-condensed">
  • 状态表格active、success、info、warning、danger
  • 隐藏某一行<tr class="sr-only">
  • 响应式表格
    • 表格父元素设置响应式，小于 768px 出现边框 <div class="table-responsive">

• 按钮

  • 按钮标签
    • 转化成普通按钮
    • <a href="###" class="btn btn-default">Link</a>
    • <button class="btn btn-default">Button</button>
    • <input type="button" class="btn btn-default" value="input">
    • 注意：为了跨浏览器展现，尽量使用button
  • 按钮大小
    • .btn-lg 这会让按钮看起来比较大。
    • .btn-sm 这会让按钮看起来比较小。
    • .btn-xs 这会让按钮看起来特别小。
  • 预定义样式
    • .btn-default 默认/标准按钮
    • .btn-primary 首选项样式
    • .btn-success 成功样式
    • .btn-info 一般信息样式
    • .btn-warning 警告样式
    • .btn-danger 危险样式
    • .btn-link 链接样式
  • 块级按钮
    • .btn-block 块级按钮(拉伸至父元素100%的宽度)
  • 激活状态
    • <button class="btn active">Button</button>
  • 禁用状态
    • <button class="btn active disabled">Button</button>

• 图片

  • .img-rounded 圆角 (IE8 不支持)
  • .img-circle 圆形 (IE8 不支持)
  • .img-thumbnail 缩略图功能
  • .img-responsive 图片响应式 (将很好地扩展到父元素)

# 四、栅格系统、表单

• 栅格系统

  • 响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

  • 工作原理

    • 行必须放置在.container(固定宽度)或者.container-fluid(100%宽度) class内，获得适当的对齐(alignment)和内边距(padding)
    • 内容放置在列中，唯有列可以是行的直接子元素
    • 预定义的网格类，比如 .row 和 .col-lg-4，可用于快速创建网格布局
    • 列通过内边距（padding）来创建列内容之间的间隙

  • 媒体查询

    • 超小设备（手机，小于 768px）
    • 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）
    • 小型设备（平板电脑，大于等于768px）@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    • 中型设备（台式电脑，大于等于992px）@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    • 大型设备（大台式电脑，大于等于1200px）@media (min-width: @screen-lg-min) { ... }

  • 栅格参数

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

  • 四种屏幕分类全部激活

  <div class="container">
       <div class="row">
           <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
           <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
           <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
           ....
       </div>
  </div>

• 可以设置列偏移，让中间保持空隙

   <div class="container">
        <div class="row">
            <div class="col-md-8">1-8</div>
            <div class="col-md-3 col-md-offset-1">10-12</div>
        </div>
   </div>