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-color toblack 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.创建主页和其他页面

bootstrap_blue_print_volume ii 读书笔记相关推荐

《演说之禅》I amp; II 读书笔记
最近入手了<演说之禅>与<演说之禅设计篇>.两本非常贵的书,感觉还是非常不错的.虽然个人认为不如之前看的那本<给大家看得设计书>,不过还是值得一读. 两本书一起弄读 ...
Java 核心技术卷 II(第 8 版) – 读书笔记 – 第 1 章（下）
22.一旦获得了一个 Charset,就可以在 Java 的 Unicode 和指定的编码格式之间进行转化,下面以 GBK 和 Unicode 之间做为例子. 从 Unicode 到 GBK: imp ...
《Master Opencv...读书笔记》非刚性人脸跟踪 II
上一篇博文中,我们了解了系统的功能和模块,明确了需要采集哪些类型的样本点及利用类的序列化的保存方式.这次将介绍几何约束模块,通过统计形态分析法(Statistical Shape Analysis, ...
考试全程指导读书笔记1 -Chap1 信息系统基础
考试全程指导读书笔记 1 Chap1 信息系统基础 1.1 霍尔提出的系统方法的三维结构体系:霍尔三维结构逻辑维.时间维.知识维组成的立体空间结构: 逻辑维:7个步骤:明确问题.系统指标设计.系 ...
《勋伯格和声学》读书笔记（八）：转调
前言本文包含<勋伯格和声学>第六章--转调的相关读书笔记.如果说上一篇文章中所讨论的终止式的目的是明确一个调性,将有可能与相邻调式产生混淆的其他可能调式排除在外,那么转调的过程就需要首先 ...
《增强现实：原理、算法与应用》读书笔记（5）运动恢复结构（上）初始化、相机位姿估计、集束调整
<增强现实:原理.算法与应用>读书笔记(5)运动恢复结构(上)初始化.相机位姿估计.集束调整运动恢复结构(SfM)是一种从运动的相机拍摄的图像或视频序列中自动地恢复出相机运动轨迹以及场景 ...
【java】《java编程思想》读书笔记
之前主要用的C++的比较多,之前花了快2个月的实际认真系统全面的学习了以下java的基础语法,<java编程思想>这本书翻译水平确实不是很好,很多话读着会比较拗口.推荐读之前,先去网上搜索 ...
《勋伯格和声学》读书笔记（一）：大调三和弦的排列与结构
前言近期在硬啃大师勋伯格的<勋伯格和声学>,其中很多内容需要总结与强化记忆才能掌握.故我开启一系列<勋伯格和声学>的读书笔记,既是为了方便自己温故知新,也希望能够帮到各位爱好 ...
《MAC OS X 技术内幕》读书笔记第一章：MAC OS X的起源
<MAC OS X 技术内幕>读书笔记第一章:MAC OS X的起源前言 1 System x.x系列 1.1System 1.0(1984年1月24日) 1.2System 2.x(1 ...

bootstrap_blue_print_volume ii 读书笔记

bootstrap_blue_print_volume ii 读书笔记相关推荐

最新文章

热门文章