前端学习自学笔记：day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~

在此之前先为大家显示下前端工程师的路线图:

第六天的笔记:HTML AND CSS:

text-center class属性：文本居中：

例：your text

btn class属性：Bootstrap风格按钮：

例：按钮

btn-block class属性:使其按钮填满水平空间：

例：按钮

注意：添加btn-block时，也需要btn class属性。

btn-primary class属性：深蓝色：

例：按钮

btn-info class属性：浅蓝色：

例：按钮

btn-danger class属性：红色：

例：按钮

Bootstrap 的12栏栅格布局。

[row class属性：响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。

col-md-* class属性：md 表示 medium (中等的)，* 代表一个数字，它指定了这个元素所占的列宽。

（笔记本屏幕）

col-xs-* class属性：xs（应用于较小的屏幕，比如手机屏幕），* 是需要填写的数字，代表在一行中,

各个元素应该占的列宽。

例：

Like

Info

Delete

]注意：由于4+4+4=12.刚好平分Bootstrap的12栏布局。所以每个按钮占的部分相等。

标签：创建文本内元素：text

例：textlove

结果：textlove（love是红色）

Font Awesome图标库：一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式

中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会

继承其父HTML元素的字体大小。

i元素：起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i

元素中，把它变成一个图标

例：

fa fa-thumbs-up:赞图标

谢谢大家观看~