BootStrap

​

• 什么是JSON

  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

• JSON格式

  ​ JSON对象

  { key1:value}   
  {"username":"zhangsan","password":"123"}
  

  ​ JSON数组

  [{ key1:value},{ key1:value},{ key1:value}]
  

  ​

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

需求分析

开发一套响应式页面.让他能够在各种设备上显示正常,提升用户体验

技术分析

BootStap概述

• 什么是BootStrap

  • Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
    ​

• BootStrap有什么作用

  • 复制粘贴, 能够提高开发人员的工作效率

• 什么是响应式页面

  • 适应不同的分辨率显示不同样式,提高用户的体验

    ​

• BootStrap的中文网

  • http://www.bootcss.com

• 下载BootStrap

• BootStrap结构

  • 全局CSS
    • bootStrap中已经定义好了一套CSS的样式表
  • 组件
    • BootStrap定义的一套按钮,导航条等组件
  • JS插件
    • BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

BootStrap的入门开发

• 引入相关的头文件

		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="../css/bootstrap.css" />
		
		<!--需要引入JQuery-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
		
		<meta name="viewport" content="width=device-width, initial-scale=1">

• BootStrap的布局容器

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

• trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为
• triggerHandler : 仅仅只会触发事件所对应的函数
• is()

is : 判断

find : 查找

什么json: 轻量级的数据交换格式

json对象: {“username”:“zhangsan”}

json数组: [ {“username”:“zhangsan”}, {“username”:“zhangsan”}, {“username”:“zhangsan”}]

ajax异步请求:

​ 同步和异步

• row

  Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding

  ​

• BootStrap的栅格系统

  • 响应式设计: 这种设计依赖于CSS3中的媒体查询
  • 栅格样式:
    • 设备分辨率大于1200 使用lg样式
    • 设备分辨率大于992 < 1200 使用md样式
    • 设备分辨率大于768 < 992 使用sm样式
    • 设备分辨率小于768使用xs样式

• BootStrap的全局CSS

  • 定义了一套CSS
    • 对页面中的元素进行定义
    • 列表元素,表单,按钮,图片…

上面内容总结

• JQ方式校验表单(要求做出来)
• json : (了解)
  • json对象 {}
  • json数组 [{},{}]
• $.get(url,function(data){}) (了解)
• bootstrap: Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
  • 全局CSS样式: css样式
    • 栅格系统:
      • 将屏幕划分成12个格子,12列
      • class=‘row’ 当前是行
      • 行里面放的是列 col-屏幕分辨率-数字 (每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行)
      • col-lg-数字: 在超宽屏幕上使用
      • col-md-数字: 在中等屏幕上,PC电脑
      • col-sm-数字: 在平板电脑上
      • col-xs-数字: 在手机上
  • 组件: 导航条 , 进度条, 字体
  • javascript插件 : 轮播图
  • 复制粘贴
• 什么是响应式: 会根据不同的分辨率去显示不同页面结构,提高用户体验