前端样式选择1-bootstrap学习笔记

根据http://www.runoob.com/bootstrap/bootstrap-tutorial.html的教程，记录下学习的过程。
关键是熟悉或了解一些html标签的样式类，以便需要时，快速找到解决方案。

文中大部分图片来自于runoob网站,放在一起比较方便找到适合的样式

学习bootstrap的想法：
[color=red]1.非前端程序员而言，比较常用有bootstrap网格系统(用于排版)，bootstra表格（用于列表展示内容）,bootstrap表单。[/color]
bootstrap的东西太多，不可能每个都需要知道或了解，需要有所取舍，明白自己需要什么不需要什么。不要为了学习而学习，也不要凭兴趣去学习，要看你项目或工作中需要什么

[color=red]2.bootstrap往简单的说，就是样式表，只不过twitter写好了很多样式，直接拿来用就行[/color]
而bootstrap插件就是已经写好的js脚本，绑定了一些特定样式的组件或标签。只要组件样式符合要求，加载了插件，就能触发相应事件。[color=red]其中大部分绑定的标签或属性为data-api[/color]

[color=red]3.样式类class的命名一般符合一定规则，[/color]
如 .col-* 应用于网格系统的列(column)
.row 字面意思就是定义一个行元素

.text-success 就是应用于文本的样式

.list-inline 就是应用于html标签<ul>的样式类

.table .table-hover 适用于html标签<table>

.form-inline .form-group .form-control 主要控制表单的,但不一定一定作用于form元素

.input-lg .input-sm 控制input大小

bootstrap有些样式影响了排版,有些影响了显示

[color=red]4.比较大的收获[/color]
了解了一些比较专业的前端名词,如：

面包屑导航/标签式导航/胶囊式导航

徽章

Responsive Design (响应式设计)

well墙

分裂式按钮

谈到模态框时，把[color=red]按钮或链接[/color]当做模态框的[color=red]触发器[/color]

[color=red]5.学习bootstrap的主要原因[/color]
一是在于它的知名度，让我想不禁想去了解它，再一个是或许有一天当我需要做一些页面的东西(ps:赶鸭子上架)，在没有前端的情况下，bootstrap可以作为一个选择，而我不想等到用时，再去学习它，那样也许有点晚了


[size=x-large]Bootstrap CSS[/size]
[size=medium]1.Bootstrap 网格系统[/size]-div.container div.row div.col

[img]http://dl2.iteye.com/upload/attachment/0124/1378/544f719b-d41a-31fd-bb9f-12442862044a.jpg[/img]

grid system
主要用于排版，类似于html的table,tr,td等元素，这里用css实现内容结构排版
[color=red]网格系统主要类有:.container,.row,.col-xs,.col-sm,.col-md,.col-lg,.col-md-offset-*,.col-md-push-*[/color]

基本结构：

<div class="container">
  <div class="row">
    <div class="col-*-*">
    </div>
  </div>
</div>

1.1 .col-md-offset-3 列左外边距偏移3单元格

[img]http://dl2.iteye.com/upload/attachment/0124/1277/da8c672b-53bf-38db-8ceb-5e5514cfea52.png[/img]

注：没有.col-xs-offset-*元素 但可通过空单元格实现偏移

1.2 .col-md-push-8 列位置向右移动8列
.col-md-pull-4 列位置向左移动4列

[img]http://dl2.iteye.com/upload/attachment/0124/1279/5ef43f89-4456-3a47-89f5-b352ac59ca81.png[/img]


[size=medium]2.Bootstrap 排版[/size]-h1-h6 p.text-left p.text-success ul.list-inline
[color=red]Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。只要引入bootstrap样式,默认应用bootstrap的样式[/color]

2.1 强调

html的强调标签有
<small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）

[color=red]bootstrap提供的强调样式有(应用于元素<p>)：
.text-left,.text-center,.text-right,.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1283/89f448a6-c6f5-3a6b-a4f0-0b8e3a45d0b4.png[/img]


2.2 缩写
Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）

如：

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

2.3 列表
[color=red]列表主要样式类有：
.list-unstyled 应用于<ul> --清除样式
.list-inline 应用于<ul> --行内
.dl-horizontal 应用于<dl> --将属于与描述放在同一行[/color]


[size=medium]3.Bootstrap 代码[/size]-code pre
[color=red]bootstrap定义了html元素<code> <pre>的默认样式[/color]

<code>以内联形式显示代码 --bootstrap定义了颜色

<pre>以多行形式显示代码 --bootstrap定义了背景颜色

<pre class="pre-scrollable"> --多行代码带有滚动条

开始和结束标签使用了 unicode 变体： < 和 >


[size=medium]4.Bootstrap 表格[/size]-table.table-striped div.table-responsive tr.success td.warning

[img]http://dl2.iteye.com/upload/attachment/0124/1380/c99a06cd-eaf1-389e-8e4b-6e781447c8fb.jpg[/img]

[color=red]bootstrap为html元素定义了默认的元素样式,也定义了一些样式类class适用于table等表格元素[/color]

4.1
[color=red]适用于html元素table的样式有：
.table,.table-striped,.table-bordered,.table-hover,.table-condensed[/color]
由这些元素名，就可看出其适用的html元素table

[color=red]适用于html元素<tr>, <th> 和 <td> 类
.active,.success,.info,.warning,.danger[/color]

4.2 响应式表格
对于小屏幕，可以水平滚动以显示内容

<div class="table-responsive">
  <table class="table">
    <thead></thead>
    <tbody></tbody>
  </table>
</div>

[size=medium]5.Bootstrap 表单[/size]-form.form-horizontal div.form-group input.form-control div.has-warning

[img]http://dl2.iteye.com/upload/attachment/0124/1382/54edbf4a-4b47-3bc2-9a6d-71898c2940d7.jpg[/img]

[color=red]bootstrap影响form表单的方式主要是html标签如<form> <input> <label>添加样式。还有一个是将form内的html标签和控件放在div里面，便于控制[/color]

[color=red]基本的样式类有.form-inline .form-horizontal .form-group .form-control .control-label [/color]

基本结构：--每个标签或控件占据一行

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">    
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
    <p class="help-block">这里是块级帮助文本的实例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

form role="role"
.form-inline .form-group .form-control

水平表单样式：
标签<label>水平,控件放在<div class="col-sm-*"> 里

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
    </div>
  </div>
</form>

复选框：
<div class="checkbox"><label><input/></label></div> 或者

<div><label class="checkbox-inline"></lable></div>


对于某些需要特定的输入文本，样式可以特殊处理(.has-warning)：
如：

  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>

[img]http://dl2.iteye.com/upload/attachment/0124/1306/4f8cc238-ec07-3cd7-a8d0-59e974b00bdd.png[/img]

[color=red]控件大小样式类：
.input-lg .input-sm[/color]


[size=medium]6.Bootstrap 按钮[/size]-input.btn input.btn-info input.btn-warning input.btn-sm input.active
按钮也是前端比较常用的一个组件
按钮的特性主要要颜色、大小、状态等，bootstrap还设置了一个标签

<button class="btn btn-default" type="submit">按钮</button>

[color=red]<a href="#" class="btn btn-default btn-lg" role="button">链接</a>[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1376/e3a1ef19-c9ee-3995-b6c5-cf8714380d84.jpg[/img]


[size=medium]7.Bootstrap 图片[/size]-img.img-rounded img.img-circle img.img-thumbnail img.img-responsive
bootstrap对图片的支持为以上一个类


[size=medium]8.Bootstrap 辅助类[/size]-div.center-block a.text-danger a.text-success a.bg-danger a.show a.hidden button.close

辅助样式类 如文本样式，背景样式，或文本居中组件显示隐藏等


[size=medium]9.Bootstrap 响应式实用工具[/size]-span.visible-xs-* span.hidden-sm
[color=red]可根据不同设备显示或隐藏某些元素[/color]


[size=x-large]Bootstrap 布局组件[/size]
[size=medium]1.Bootstrap 字体图标(Glyphicons)[/size]-span.glyphicon span.glyphicon-user

[img]http://dl2.iteye.com/upload/attachment/0124/1386/9ebee82e-aa91-3ccd-9643-3e74f5481e0e.jpg[/img]


[color=red]字体图标主要应用到按钮的背景[/color]
可根据需要制作特定的图标，地址：
[url]http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm[/url]
如：

<button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span>
    User
</button>

[size=medium]2.Bootstrap 下拉菜单（Dropdowns）[/size]-div.dropdown ul.dropdown-menu
下拉菜单用的也比较多，如果想要有个看起来不错的下拉菜单,bootstrap是个不错的选择

[color=red]ul.dropdown-menu可单独使用不必必须放在div.dropdown下面，使用者可灵活使用[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1369/225f2885-d764-3b44-ba71-f3d1b90041f5.jpg[/img]


[size=medium]3.Bootstrap 按钮组[/size]-div.btn-group

[img]http://dl2.iteye.com/upload/attachment/0124/1388/648ddb97-c826-3485-8ea8-91464f17d976.jpg[/img]

[size=medium]4.Bootstrap 按钮下拉菜单[/size]-div.btn-group span.cacert

[size=medium]5.Bootstrap 输入框组[/size]-div.input-group

[img]http://dl2.iteye.com/upload/attachment/0124/1390/a650513d-bdcf-3cb4-b828-6f5b0669e8ae.jpg[/img]


[size=medium]6.Bootstrap 导航元素[/size]-ul.nav ul.nav-tabs ul.nav-pills ul.nav-stacked

[img]http://dl2.iteye.com/upload/attachment/0124/1392/fb871228-4442-3c66-aebe-6d9d5cdfbd5b.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0124/1394/b53dc0f9-4afa-35ec-abd9-572a03f3ca8e.jpg[/img]

[size=medium]7.Bootstrap 导航栏[/size]-nav.navbar nav.navbar-default nav.navbar-fixed-top

[img]http://dl2.iteye.com/upload/attachment/0124/1396/9f0a0f05-f130-3408-b78d-669faa2db884.jpg[/img]


[size=medium]8.Bootstrap 面包屑导航（Breadcrumbs）[/size]-ol.breadcrumb
[color=red]面包屑导航[/color]-表示当前页面所在位置，每个部分可继续导航

以前见过这个导航方式，不过不清楚具体叫什么


[img]http://dl2.iteye.com/upload/attachment/0124/1398/595aa143-36fc-3a4d-98a1-315156815aac.jpg[/img]


[size=medium]9.Bootstrap 分页[/size]-ul.pagination ul.pager

[color=red]翻页也不一定必须放在ul.pager下面，也可以放在ul.pagination一起使用。这些class都是可以灵活使用的[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1400/45eaa454-a786-338d-940f-ec0469c18214.jpg[/img]

[size=medium]10.Bootstrap 标签[/size]-label.label label-default

[img]http://dl2.iteye.com/upload/attachment/0124/1402/f0d419cc-60d9-311d-bb07-b134666d6789.jpg[/img]


[size=medium]11.Bootstrap 徽章（Badges）[/size]-span.badge

[color=red]徽章[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1404/6e8a8c9a-ff80-30fe-a4ad-8c3b132f8f1f.jpg[/img]


[size=medium]12.Bootstrap 超大屏幕（Jumbotron）[/size]-div.jumbotron

[img]http://dl2.iteye.com/upload/attachment/0124/1406/94511018-78ba-3cba-9b23-46704bbdf77f.jpg[/img]


[size=medium]13.Bootstrap 页面标题（Page Header）[/size]-div.page-header

[size=medium]14.Bootstrap 缩略图[/size]-a.thumbnail

[color=red]不是很理解其作用[/color]

[size=medium]15.Bootstrap 警告（Alerts）[/size]-div.alert alert-success

[img]http://dl2.iteye.com/upload/attachment/0124/1408/ea465a7d-2d4d-3067-ade2-358984834ea7.jpg[/img]


[size=medium][color=red]网站上，如果需要对一些信息进行标注。一般对文字或背景设置特殊样式，bootstrap已经帮我们写好了这些特殊样式，直接拿来用就可以了[/color][/size]

<div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                ×
            </button>
            成功！很好地完成了提交。
        </div>

[size=medium]16.Bootstrap 进度条[/size]-div.progress div.progress-bar

[img]http://dl2.iteye.com/upload/attachment/0124/1410/4c74343e-a1d2-36f4-83ac-fc27fdb089e4.jpg[/img]

[color=red][size=medium]如果想让自己的网站看起来很炫，设计一个界面美观的进度条，是个不错的特性。bootstrap已经写好了样式，拿来用就行。[/size][/color]


[size=medium]17.Bootstrap 多媒体对象（Media Object）[/size]-div.media

[color=red][size=medium]如果开发一些博客类或论文类的网站，在文字中插入一些图片，可能更具有观赏性[/size][/color]


[size=medium]18.Bootstrap 列表组[/size]-ul.list-group li.list-group-item a.list-group-item

[img]http://dl2.iteye.com/upload/attachment/0124/1412/52af6d63-4a1e-3da9-819a-cad3158b3ceb.jpg[/img]

[color=red][size=medium]list-group-item不一定非要放在ul.list-group下面使用，可独立使用如,
a.list-group-item可以有相同的样式效果。只不过放在div.list-group或ul.list-group下面更容易控制位置[/size][/color]


[size=medium]19.Bootstrap 面板（Panels）[/size]

[img]http://dl2.iteye.com/upload/attachment/0124/1428/8e80731c-d34d-3ea7-bda9-f25419d66957.jpg[/img]

[color=red]如果网页的开发中，有需要用到面板,bootstrap已经帮你写好了样式。但是对于我来说，好像用到的也比较少，所以对一些没见过的特性也感到陌生。可能所处的行业有关系，或者一直做后台，没办法接触这些很炫的特性[/color]

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

[size=medium]20.Bootstrap Well[/size]-div.well

[img]http://dl2.iteye.com/upload/attachment/0124/1430/a912ce37-d1e5-3ec4-96e1-595f3a6aca03.jpg[/img]

[size=medium][color=red]Well 是一种会引起内容凹陷显示或插图效果的容器 <div>[/color][/size]


[size=large]Bootstrap 插件[/size]-上面的组件或样式是静态的，插件更多的是交互
[size=medium]1.Bootstrap 插件概览[/size]-集成了12中jquery插件

[size=medium]2.Bootstrap 过渡效果（Transition）插件[/size]-Transition.js

[size=medium]3.Bootstrap 模态框（Modal）插件[/size]-modal.js
data-api:data-toggle="model" data-target="#id" id是模态框div的id

[img]http://dl2.iteye.com/upload/attachment/0124/1555/3c57b408-812c-33e1-989f-3ffa8cd7c4c2.jpg[/img]

[size=medium]4.Bootstrap 下拉菜单（Dropdown）插件[/size]-dropdown.js

[size=medium]5.Bootstrap 滚动监听（Scrollspy）插件[/size]-scrollspy.js

[color=red]根据查看内容的位置，动态标注所在菜单或标签[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1559/472fa52b-fa8e-3b73-9075-1d318ac50786.png[/img]

[size=medium]6.Bootstrap 标签页（Tab）插件[/size]-tab.js

[color=red]动态显示标签下的内容div[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1561/2aad93cb-9b8d-395b-b86d-a1da03e40fd0.png[/img]

[size=medium]7.Bootstrap 提示工具（Tooltip）插件[/size]-tooltip.js
[color=red]鼠标移动，动态显示提示信息[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1563/8d041f21-aab6-32ea-829d-b0280b9876b6.jpg[/img]

[size=medium]8.Bootstrap 弹出框（Popover）插件[/size]-popover.js
[color=red]鼠标点击，弹出窗口信息[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1567/1a893fe8-68d2-3b93-901f-a010169df9aa.png[/img]

[size=medium]9.Bootstrap 警告框（Alert）插件[/size]-

[color=red]这种提示或警告方式似乎更别致一点[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1569/d2680b5e-6db3-36b4-9eef-3e4989bc0d28.png[/img]

[size=medium]10.Bootstrap 按钮（Button）插件[/size]-button.js
[color=red]通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组[/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1571/944987cf-52b1-3055-9268-595692e59b77.png[/img]

[size=medium]11.Bootstrap 折叠（Collapse）插件[/size]-collapse.js

[size=medium][color=red]可以动态的让某个页面区域div显示或影藏[/color][/size]

[img]http://dl2.iteye.com/upload/attachment/0124/1573/25e9b919-5bf8-3241-8469-fdbce34387e5.png[/img]

[size=medium]12.Bootstrap 轮播（Carousel）插件[/size]-carousel.js

[color=red][size=medium]滑动显示内容，一个漂亮的网站必不可少的特性[/size][/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1575/9b65a1b8-7a76-39fe-b977-dd1463c4ad95.png[/img]


[size=medium]13.Bootstrap 附加导航（Affix）插件[/size]-affix.js

[color=red][size=medium]将某个导航栏固定在页面的某个位置，不随页面移动[/size][/color]

[img]http://dl2.iteye.com/upload/attachment/0124/1577/e182f054-b7b3-39a8-ae4f-82d4b8439b0a.png[/img]


[size=large]Bootstrap 其他[/size]
[size=medium]1.Bootstrap UI 编辑器[/size]-像dreamweaver一样设计页面
见：http://www.runoob.com/bootstrap/bootstrap-ui-editor.html

[size=medium]2.Bootstrap HTML编码规范[/size]
[color=red]页面添加如下元素或特性：[/color]
<!DOCTYPE html>

<html lang="zh-CN">

<meta http-equiv="X-UA-Compatible" content="IE=Edge"> -- IE 兼容模式

<meta charset="UTF-8">


在线参考手册
http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
http://pikock.github.io/bootstrap-magic/app/#!/editor

在线制定图标
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

http://www.runoob.com/bootstrap/bootstrap-tutorial.html