Bootstrap3【上手教程】

目录

一、思维导图

二、表单【代码有注解】

三、按钮【代码有注解】

四、图片【代码有注解】

五、辅助类【代码有注解】

---

一、思维导图

二、表单【代码有注解】

之前我们写在文本框前面写用户名 一直都是直接写字，在实际开发中一般用文本标签包起来例如 标签，我们可以看到效果文本框的宽度占满了整行，下拉框的宽度也占满了整行

		

			用户名:
			
		
		

			

				用户名:
				
			
			

				密码:
				
			
		
		
		

			用户名:
			
			
				北京
			
		

 

		

			工资:
			

				$
				
			
		
		
		

			

				

					用户名:
					
				
				

					密码:
					
				
			
		
		

			用户名:
			
		
		

		
		

			
				吃饭
			
		
		

			
				睡觉
			
		
		

			
				打豆豆
			
		
		

		
			吃饭
		
		
			睡觉
		
		
			打豆豆
		
		
		
			吃饭
		
		
		

			
				男
			
			
				女
			
		
		
		
			湖南省
			湖北省
			山东省
			山西省
		
		

		
		
		
		
		

		
		
		

三、按钮【代码有注解】

可以用作按钮使用的标签元素有很多，a标签、button标签本身就是按钮，input标签的button,submit这些都可以用class=”btn”来添加按钮样式

		超链接按钮

		button标签按钮

		

		
		

		
		button标签按钮
		button标签按钮
		button标签按钮
		button标签按钮
		button标签按钮
		button标签按钮
		button标签按钮
		

		
		button标签按钮默认大小
		button标签按钮大按钮
		button标签按钮小按钮
		button标签按钮超小按钮
		button标签按钮块级按钮
		

		
		button标签按钮
		

		
		button标签按钮
		

 

 

四、图片【代码有注解】

图片形状有三种：

1. 圆角矩形：

1. 圆形/椭圆：这个比较牛逼，会根据图片来决定是宽椭圆还是高椭圆。

1. 缩略图：

可是现在还有点瑕疵，我们缩小网页的时候图片好像不会跟着自动缩小，会被只显示一部分。这个时候就需要设置一下 让图片根据网页缩小而自动缩小。我们叫做响应式图片

 

五、辅助类【代码有注解】

		
男儿事长征
		
少小幽燕客
		
赌胜马蹄下
		
由来轻七尺
		
杀人莫敢前
		
须如猬毛磔
		

		
		
黄云陇底白云飞
		
未得报恩不得归
		
辽东小妇年十五
		
惯弹琵琶解歌舞
		
今为羌笛出塞声
		

		
		×
		

		
		
		

		
		

		

		
		手机用户，点击有惊喜
		
点击有惊喜
		
点击有惊喜
		

		
		手机用户，点击有惊喜

 今天分享到这里啦，能学多少算多少，不积硅步，无以至千里！加油，IT人。