本文共 1617 字，大约阅读时间需要 5 分钟。

1 JSON

1. 数据交换格式: json、xml

1.1 什么是JSON

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

1.2 JSON格式

1. JSON对象

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

2. JSON数组

   [{
         key1:value1},{
         key2:value2},{
         key3:value3}]

2 BootStap

2.1 BootStap概述

2.1.1 什么是BootStrap

1. 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
2. Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

2.1.2 BootStrap有什么作用

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

2.1.3 什么是响应式页面

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

2.1.4 BootStrap的中文网

2.2 BootStrap的入门开发

1.复制粘贴。。。

2.2.1 引入相关的头文件

2.2.2 最基本的模板

		    
   	    
   	    
   	    
   	    
   		    				
Hello, world!
				
   		
   							

2.3 BootStrap的布局容器

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

   
      ...
   

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

   
      ...
   

2.4 BootStrap的栅格系统

• BootStrap的全局CSS
• 定义了一套CSS
  • 对页面中的元素进行定义
  • 列表元素,表单,按钮,图片…
• 响应式设计: 这种设计依赖于CSS3中的媒体查询
• 栅格系统:
  • 将屏幕划分成12个格子,12列
  • class=‘row’ 当前是行
  • 行里面放的是列 col-屏幕分辨率-数字 (每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行)
• 栅格样式:
  • 设备分辨率大于1200 使用lg样式
  • 设备分辨率大于992小于1200 使用md样式
  • 设备分辨率大于768小于992 使用sm样式
  • 设备分辨率小于768使用xs样式

2.5 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

转载地址：https://lzyws739307453.blog.csdn.net/article/details/104553734 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！