前端基础

Font Awesome：是一个开源的制作图标的

在线制作ico图标:网址
http://www.bitbug.net/

制作网站图标字体运用以及其优势与劣势
http://www.frontopen.com/1906.html

前台框架：
http://www.zi-han.net/theme/hplus/

http://www.tinygroup.org/

animate.css 动画库

引入这个css，然后给div加上一些属性就可以使用动画咯animated加上
bounceOutUp /bounceInUp bounceOutLeft/ bounceOutRight shake/swing/plus等等
http://www.cnblogs.com/2050/p/3409129.html

css基础

! important，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。

.border-bottom {
  border-bottom: 1px solid #e7eaec !important;
}

@import语法结构
@import + 空格+ url(CSS文件路径地址);

在HTML和css里面都可以使用这个语句，用来导入css样式

@media 可以控制在不同分辨率时候使用不同的css样式

span {
    color: red;
}

@media screen and (max-width:768px)  {
    span {
        color: grey;
    }
}

:not

body的class不包含fixed-sideba和canvas-menu
body:not(.fixed-sidebar ):not(.canvas-menu )

CSS块级元素和行内元素

标准解释如下，通俗理解就是块元素，就是独占一行，而行内元素就是允许其他元素和他在一行。我们可以通过display属性来改变元素是块还是行内。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现

块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6,ol,ul,hr,pre等。

行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong，img,input,textarea等。

position

position:absolute 生成相对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
如果父级别div 有position修饰，那么就从父级别的div开始绝对定位，
如果父级别div没有position修饰，那就相对于浏览器进行定位

position：relative是相对定位,是相对于前面的容器定位的,或者说是它的【原始起点】进行移动这个时候不能用top left在定位.应该用margin.
如果父级别的div 设置了position:relative 那么子级别的就可以用

position: fixed 是始终相对于浏览器某个位置的.

css选择器

常用的有:

我们需要注意的选择器有
div,p 带逗号的元素连接，两个关系是与关系，既可以选择到div又可以选择到p标签
div p 中间以空格隔开的连接，两个关系是父亲与儿子的关系，也就是说只能选择到父元素是div，子元素是p，而且子元素和父元素之间可以间隔若干个别的元素

<div>
    <span><p>测试</p></span>
</div>

div>p 中间以>的连接，两个关系也是父亲与儿子的关系，但是这次要求比较严格了，父亲和儿子之间关系更加紧密，也就是说子元素必须紧挨着父元素，和上面例子区别就是少了span这一层

<div>
    <p>测试</p>
    <p>测试</p>
</div>

div+p 中间以加号隔开的连接，表示紧接在 div元素之后的所有p 元素,也就是说 当div元素结束之后，p元素立即跟在/div后面，而不是父与子包含的关系

<div><div>
<p></p>

bootstrap记录

.container 类用于固定宽度并支持响应式布局的容器。
container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
bootstrap使用栅格系统前提是row 必须要被包含在.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

<div class="container">
    <div class="row">
        <div class="col-md-12"></div>
    </div>
</div>

一行row总大小是12，栅格参数有:

col-xs 超小屏幕 手机 (<768px)，一直是是水平排列。
col-sm 小屏幕 当分辨率大于平板 (≥768px)才会水平排列，不然div会独占一行，堆在一起
col-md 比较常用的，当分辨率大于中等屏幕 桌面显示器 (≥992px)才会水平排列
栅格参数具体可以去官网查看
栅栏主要是用来解决在屏幕分辨率不同的时候，屏幕显示div样式不同，从一行可以有多个div 到一个div占一行，可以这样简单理解

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { … }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { … }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { … }

兼容移动设备和桌面屏幕：

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

兼容手机、平板、桌面

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

路径导航 breadcrumb属性

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

.checkbox-inline 或 .radio-inline 这些控件排列在一行

 <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
     <label>
      <input type="checkbox"> Check me out
    </label>

    <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
    <label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    </label>
  </div>

内联表单:为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

data-toggle

一些button或者 a标签绑定了找个data-toggle=”collapse”（下拉框），data-toggle=”modal” data-target=”#myModal” （模块框）data-toggle=”tab” or data-toggle=”pill” （tab分页） ，data-toggle=”tooltip” （提示），data-toggle=”popover” （弹出框），
data-toggle=”buttons”（可以将复选框弄成按钮），
data-toggle=”collapse” （点击某个按钮就可以显示隐藏的内容）

关于栅栏的例子

这里我写了一个最简单的demo.测试代码地址见github

col-xs-4和col-sm-4 和col-md-4，当浏览器宽度为正常的时候，全都是水平排列，
4+4+4=12 所以三个div都可以占在一行显示

当浏览器分辨率宽度缩小到970以下的时候，col-md-4 这三个div就会垂直叠在一起了

当浏览器分辨率宽度缩小到750以下的时候，col-sm-4 这三个div就会垂直叠在一起了，当然col-md-4这些div会一直叠在在一起，除非浏览器宽度大于970

而col-xs就比较变态了，因为是给小屏幕手机设计的，所以当宽度小于768就属于超小屏幕了，会一直水平排列：