Bootstrap常用属性含义

容器类

• container类用于固定宽度并支持响应布局的容器(两边留空白)
• container-fluid类用于100%宽度，占据全部视窗的容器

网格类

• col :针对所有设备
• sm:平板-屏幕宽度等于或大于576px
• md:中等屏幕（>=768px）
• lg:大屏幕，桌面显示器（>=992px）
• xl:超大桌面显示器（>=1200px）
• offset：偏移列

<div class="col">.col</div>
<div class="col-sm-3">.col-sm-3</div>

• row：行，相当于tr

文字

• font-size:字体大小
• line-height: 行高
• font-family：默认字体
• h1-h6:标题大小
• Disolay:控制标题样式
• small:创建字号更小颜色更浅的文本
• mark:为黄色背景及有一定的内边距（高亮文本）
• abbr:显示在文本底部的一条虚线边框(似标记文本）
• font-weight-bold:加粗文本
• font-weight-normal：普通文本
• font-weight-light：更细文本
• font-italic：斜体文本
• lead：让段落更突出
• text-left：左对齐
• text-center：居中
• text-right：右对齐
• text-justify：设定文本对齐,段落中超出屏幕部分文字自动换行
• text-nowrap：超出屏幕不换行

文本颜色

• text-muted：柔和文本（很淡的灰）
• text-primary：重要文本（蓝色）
• text-success：执行成功的文本（绿色）
• text-info：提示信息（很淡的蓝）
• text-warning：警告文本（黄色）
• text-danger：危险文本（红色）
• text-dark：深灰色文字
• text-light：浅灰色文本
• text-white:白色文本

背景颜色

• bg-primary text-white：重要背景颜色（蓝色）
• bg-success text-white：成功背景颜色（绿色）
• bg-info text-white：信息提示背景颜色（青色）
• bg-warning text-white：警告背景颜色（黄色）
• bg-danger text-white：危险背景（红色）
• bg-dark text-white：深灰色
• bg-light text-dark：浅灰色

表格

• table：设置基础表格样式
• table-striped：条纹表格
• table-bordered：带边框的表格
• table-hover：鼠标悬停状态表格（鼠标在哪个哪个高亮）
• table-responsive:响应式表格，当屏幕较小的时候会出现滚动条
  注：若要设置表格颜色基本和设置文本颜色一样：eg:table-primary

图像形状

• rounded：圆角图片
• rounded-circle：椭圆图片
• img-thumbnail：缩略图（有边框）

<!--图片：-->
<!--class="img-responsive"：图片在任意尺寸都占100%-->
<!--图片形状-->
<!--方形：-->
<img src="..." alt="..." class="img-rounded">
<!--： 圆形-->
<img src="..." alt="..." class="img-circle">
<!--：相框-->
<!--alt:是图片无法加载的时候默认加载的图片-->
<img src="..." alt="..." class="img-thumbnail"> 

图片对齐方式

• float-right ：右对齐
• float-left：左对齐
• center-block：居中

导航

• nav：导航类
• nav-item ：导航项
• nav-link ：导航链接

其它

• pull-left：元素浮动到左边
• pull-right：元素浮动到右边
• clearfix：清除浮动
• show：强制元素显示
• hidden：强制元素隐藏
• 按钮：class=“btn btn-default”

HTML常用标签

 文件标签：构成html最基本的标签
			 head：头标签。用于指定html文档的一些属性。引入外部的资源
			 title：标题标签。
			 body：内容标签
			
 文本标签：和文本有关的标签
			 注释：<!-- 注释内容 -->
			 <h1> to <h6>：标题标签
			 h1~h6:字体大小逐渐递减
			 <p>：段落标签
			 <br>：换行标签
			 <hr>：展示一条水平线
			 属性：
				 color：颜色
				 width：宽度
				 size：高度
				 align：对其方式
				 center：居中
				 left：左对齐
				 right：右对齐
				 <b>：字体加粗
				 <i>：字体斜体
				 <font>:字体标签
				 <center>:文本居中
				 属性：
					 color：颜色
					 size：大小
					 face：字体

			属性定义：
				 color：
					1. 英文单词：red,green,blue
					2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
					3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
				 width：
					1. 数值：width='20' ,数值的单位，默认是 px(像素)
					2. 数值%：占比相对于父元素的比例

		 图片标签：
			 img：展示图片
				 属性：
					 src：指定图片的位置

			代码：
				 <!--展示一张图片 img-->
			    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
			    <!--
			        相对路径
			             以.开头的路径
			                 ./：代表当前目录  ./image/1.jpg
			                 ../:代表上一级目录
			     -->
			    <img src="./image/jiangwai_1.jpg">
			    <img src="../image/jiangwai_1.jpg">
			    
		 列表标签：
			 有序列表：
				 ol:
				 li:
			 无序列表：
				 ul:
				 li:
				 
		 链接标签：
			 a:定义一个超链接
				 属性：
					 href：指定访问资源的URL(统一资源定位符)
					 target：指定打开资源的方式
						 _self:默认值，在当前页面打开
						 _blank：在空白页面打开
			 代码：
				 <!--超链接  a-->
			    <a href="http://www.itcast.cn">点我</a>
			    <a href="http://www.itcast.cn" target="_self">点我</a>
			    
		 div和span：
			 div:每一个div占满一整行。块级标签
        	span：文本信息在一行展示，行内标签 内联标签

		语义化标签：html5中为了提高程序的可读性，提供了一些标签。
			 <header>：页眉
			<footer>：页脚
			
		表格标签：
				table：定义表格
				width：宽度
				border：边框
				cellpadding：定义内容和单元格的距离
				cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
				bgcolor：背景色
				align：对齐方式
				
			 tr：定义行
				 bgcolor：背景色
				 align：对齐方式
				 
			 td：定义单元格
				 colspan：合并列
				 rowspan：合并行
				 
			th：定义表头单元格
		 	<caption>：表格标题
			<thead>：表示表格的头部分
			<tbody>：表示表格的体部分
			<tfoot>：表示表格的脚部分

CSS

 表单项标签：
	input：可以通过type属性值，改变元素展示的样式
	
		type属性：
			 text：文本输入框，默认值
			 placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息	
			 password：密码输入框
			 
			 radio:单选框
				 注意：
					1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
					2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
					3. checked属性，可以指定默认值
					
			 checkbox：复选框
				 注意：
					1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
					2. checked属性，可以指定默认值

			 file：文件选择框
			 hidden：隐藏域，用于提交一些信息。
			 
			 按钮：
				 submit：提交按钮。可以提交表单
				 button：普通按钮
				 
				 image：图片提交按钮
				 src属性指定图片的路径	

	    label：指定输入项的文字描述信息
		    注意：
			    label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
			    select: 下拉列表
				子元素：option，指定列表项
				
			 textarea：文本域
				 cols：指定列数，每一行有多少个字符
				 rows：默认多少行
				 
			//常见属性
			 font-size：字体大小
			 color：文本颜色
			 text-align：对其方式
			 line-height：行高 
			 background：背景
		     border：设置边框，符合属性
			 margin：外边距
			 padding：内边距
				 默认情况下内边距会影响整个盒子的大小
				 box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小