使用BootStrap开发一个响应式的页面

1.1 需求

开发一套页面,可以适用在PC端,Pad端,和手机端。不影响你的浏览的效果

 

1.2 分析

 技术分析

BootStrap的概述】

1).BootStrap的概念

使用BootStrap开发一个响应式的页面_第1张图片

2).什么是响应式:

响应式页面设计:一套页面可以适配不同的设备.(PC,PAD,手机)

3).BootStrap的中文网:

http://www.bootcss.com/

4).下载BootStrap

使用BootStrap开发一个响应式的页面_第2张图片

 

 

 

4).BootStrap的结构:

* 全局CSS

    * BootStrap定义了一套CSS的样式表.

* 组件

    * BootStrap定义的一套按钮,导航条...

* JS插件

    * BootStrap定义的一套JS的插件.

 

5).BootStrap的入门开发:

		
		
		
		
		
		
		
		
		
		

补充说明:
  meta:
         width:可视区域的宽度,值可为数字或关键词device-width
         height:同width
         intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
         maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
              maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
         user-scalable:是否可对页面进行缩放,no 禁止缩放


 

6).BootStrap布局容器:

 

使用BootStrap开发一个响应式的页面_第3张图片

7).BootStrap的栅格系统:

响应式的设计:

    * CSS3的样式:媒体查询

栅格样式:

    *设备的分辨率大于 1200使用lg样式

    *设备的分辨率大于 992 < 1200使用md样式

    *设备的分辨率大于768 < 992使用sm样式

    *设备的分辨率小于 768使用xs样式

将一行分成12.定义div元素 样式的和 加一起等于12 即可.

 

8).BootStrap的全局CSS:

定义了一套CSS

  *对页面中的元素进行定义:

  *列表元素,表单,按钮,图片...

 

1.3代码实现



	
		
		
		
		
		
		
		
		
		
		
	
	
		
		

WelCome

WelCome to HeiMa!WelCome to HeiMa!WelCome to HeiMa!

See More

Our Team

Our Team,Our Team,Our Team,Our Team,Our Team,Our Team

See More

About Us

About Us,About Us,About Us,About Us,About Us,About Us

See More


 

你可能感兴趣的:(工作中的点点滴滴,Java的小小世界,Bootstrap的南墙)