bootstrap_blue_print_volume ii 读书笔记

why reuse the wheel each time

1.使用按钮，在鼠标悬停时进行细微的更改（可以稍微调整下颜色，将颜色变暗或者冲击色），并且给你的主色调不同的颜色。

2.通过把重要的链接做成大按钮，从视觉上突出了重要的操作，可以起到吸引用户点击的作用。

3.实际图片的尺寸可能会比父元素容器大，所以我们可以将图片的width设为100%,因此就可以填满父容器的宽度，高度设为auto，因此该图片就可以适应小屏幕

.public-banner img {
width: 100%;
height: auto;
}

4. I've set the text color to the light grey from our palette. This will also be the color for our social media icons. 看起来很舒服

5.当在_variables.less 定义工程所要用到的颜色，可以在该工程颜色前面加上一个前缀，这样当下次利用该文件或者更改的时候可以一目了然，方便

@bw-dark-primary: #00796b;
@bw-primary: #009688;

6.善于利用padding可以让页面看起来更清爽

7.将margin padding设为1em，后面的某个div 的padding可以此为参照，这样的好处是可以动一处而改全局

8.可以将手机的排版写在一起，例如@media(max-width: 768px) {  .container{}.......}

9.flex让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容

9.第一次接触bootstrap的栅格，真的太便利。

10.简约大方的Chartist.js 插件https://gionkunz.github.io/chartist-js/  说明文档https://gionkunz.github.io/chartist-js/getting-started.html

   搜的时候看到别人的好看的后台样式http://stackoverflow.com/questions/28715351/add-outline-to-svg-data-point-in-chartist-js

11.学习作者设计按钮的思路

   .btn-primary {
      background: @black;
      border: (@border-size * 2) @border-type @blue1;
      color: @blue1;
   }
 .btn-primary:hover {
     background-color: @black;
    border: (@border-size * 2) @border-type @blue1;
   color: @white;
 }

• I've setbackground-colortoblack so that it blends with our page
background. You can set it to transparent if you prefer.
• I've increased the border-width a bit so that it really pops.
• The border-color is set to the same blue that we've been using throughout
the dashboard.
• On hover, the only thing that will change is the color of the text in the button,
which will go from blue to white. This creates a nice, subtle button effect.

12.重新定义h1-hn的标签，h1一般作为各个页面的大标题

13.#bootboard如果是在手机上浏览siderbar将会消失但相应的链接会以滚动的形式链接到移动导航列表（整理下思路再来修改）

Tip：

1.asymmetric layout（不对称的排版）

总的来说：

看完这本书，我发现看英文原著没有想象中的那么吃力，并且比较好理解，因为这本书的语言比较浅显易懂，不会很官方

跟作者的严谨的风格形成鲜明对比，之前自己都是一个html，css，jquery走一个工程，发现这样太不严谨，并且不能"reuse the wheel",今后编程的时候可以延续这样的模板工程

作者要建立一个网页的时候思路很有条理

1..update the layout

   set up the LESS variable（background color ，text color ，link color，border，typography+其他常规）

2..确定主背景色，次背景色，网页的定制颜色，以及其他的字体，颜色，特效

 更改默认的bootstrap的样式，将其定制称自己想要的颜色样式

 3. 最后修改适应手机@media (max-width: 768px) {........}

4..创建footer header 或者sidenav（或者其他的通用模块）

5.创建主页和其他页面