web_day14_bootstrap入门

1、bootstrap介绍

响应式页面开发:根据上网设备的不同自动调节显示的效果

bootstrap

  • webcss框架
  • 集合了html/css/jquery为一家
  • 创建响应式的页面
  • 响应式:适配不同的上网设备

2、入门案例

2.1 使用步骤

  1. 下载bootstrap

  2. 导入jquery.js文件

  3. 导入bootstrap.js文件

  4. 导入bootstrap.css文件

  5. 创建视口

  6. 创建布局容器

    1. 方式一

      ...
    2. 方式二

      ...

2.2 bootstrap模板



	
		
		bootstrap模板
		
		
		
		
		
		
		
		
	
	
		
		

3、组成部分

3.1 全局CSS

  • 设置全局 CSS 样式
  • 基本的 HTML 元素均可以通过 class 设置样式并得到增强效果
  • 先进的栅格系统

3.2 组件

3.3 JavaScript

4、全局CSS

4.1 栅格系统

一行分为12格



	
		
		bootstrap栅格系统
		
		
		
		
		
		
		
		
	
	
		
		

4.2 表格




	
		
		表格
		
		
		
		
	

	

		

用户信息

ID 姓名
1 Anna
2 Debbie
3 John

4.3 表单




	
		
		表单
		
		
		
	

	

		

 

你可能感兴趣的:(bootstrap)