JSON&BootStrap简单学习，看这篇就够了！

灰太狼 2023-07-09 07:28 8阅读 0赞

### 文章目录 ###

*  1 JSON
 *   *  1.1 什么是JSON
     *  1.2 JSON格式
 *  2 BootStap
 *   *  2.1 BootStap概述
     *   *  2.1.1 什么是BootStrap
         *  2.1.2 BootStrap有什么作用
         *  2.1.3 什么是响应式页面
         *  2.1.4 BootStrap的中文网
     *  2.2 BootStrap的入门开发
     *   *  2.2.1 引入相关的头文件
         *  2.2.2 最基本的模板
     *  2.3 BootStrap的布局容器
     *  2.4 BootStrap的栅格系统
     *  2.5 Bootstrap栅格系统的工作原理

--------------------

# 1 JSON #

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

## 1.1 什么是JSON ##

[JSON][]([JavaScript][] Object Notation) 是一种轻量级的数据交换格式。它基于[ECMAScript][]的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括[C][]、C++、[C\#][C 1]、[Java][]、JavaScript、[Perl][]、[Python][]等）。这些特性使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的中文网 ###

*  [http://www.bootcss.com][http_www.bootcss.com]

## 2.2 BootStrap的入门开发 ##

1.复制粘贴。。。

### 2.2.1 引入相关的头文件 ###

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>

### 2.2.2 最基本的模板 ###

<!doctype html>
    <html lang="en">
    	<head>
    	    
    	    <meta charset="utf-8">
    	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    	    
    	    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    	
    	    <title>Hello, world!</title>
    	</head>
    	<body>
    		<h1>Hello, world!</h1>
    		
    		
    		
    		<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
    	</body>
    </html>

## 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`

[JSON]: http://baike.baidu.com/view/136475.htm
[JavaScript]: http://baike.baidu.com/view/16168.htm
[ECMAScript]: http://baike.baidu.com/view/810176.htm
[C]: http://baike.baidu.com/subview/10075/6770152.htm
[C 1]: http://baike.baidu.com/view/6590.htm
[Java]: http://baike.baidu.com/subview/29/12654100.htm
[Perl]: http://baike.baidu.com/view/46614.htm
[Python]: http://baike.baidu.com/view/21087.htm
[http_www.bootcss.com]: http://www.bootcss.com