2021.7.7今日小结

今天学习了JSON，JSON是一种轻量级的数据交换格式。

　　双括号{}：表示对象。

　　中括号[]：表示数组。

　　双引号""：其中的值是属性或值。

　　冒号: ：表示后者是前者的值。

JSON数据获取的语法格式：

　　JSON对象.键名

　　JSON对象.["键名"]

　　数组对象[索引]

要实现从JSON字符串转换为JavaScript对象，可以使用JSON parse0方法，示例代码如下所示:
　　var obj = JSON.parse('{"a": "Hello", "b": "World"}');
要实现从JavaScript对象转换为JSON字符串，使用JSON.stringify()方法:
　　var json JSON. stringify({a: 'Hel1o', b: 'World' });

了解了bootstrap基础

Bootstrap的最大优势是响应式布局、CSS媒体查询，开发者可以方便地让网页无论在台式机、手机上都获得最佳用户体验。

栅格系统，仅仅通过定义容器大小，平方12份，再调整内外边距，最后结合媒体查询，制作出强大的响应式栅格系统。

　　col-xs-* 　　col-sm-* 　　col-md-* 　　col-lg-*

栅格系统中各个样式类如下:
　　"container”样式类:左右各有15px的内边距。
　　"row"样式类:是列的容器，最多只能放12列。行左右各有-15px的外边距， 可以抵消 “container' 样式类的15px的内边距。
　　“column” 样式类:左右各有15px的内容边距，可以保证内容不挨着浏览器的边缘。两个相邻列的内容之间有30px的间距。这样定义后，列中可以很方便地嵌套行。如果在列中嵌套　　　　  　　行，则此时的列具有和“container"样式类相同的特性(左右各有15px的内边距)，也就相当于“container”样式类。

栅格系统的使用方法：

　　1、列偏移

　　（1）、在class属性中加入col-md-offset-n

　　（2）、左浮动col-md-push-n     右浮动col-md-push-n

了解了列嵌套、响应式布局

子标题<small>

文本强调<lead>

文本强调颜色class="text-muted" 提示，浅灰色。

　　　　　　class="text-warning" 警告，黄色。

　　　　　　class="text-primary" 主要，蓝色。

　　　　　　class="text-info" 通知信息，浅蓝色。

　　　　　　class="text-success" 成功，浅绿色。

　　　　　　class="text-danger" 危险，红色。

对齐：class="text-left"左对齐

　　　　class="text-center"居中

　　　　class="text-right"右对齐

　　　　class="text-justify"两端对齐

列表

　　1、无样式列表

　　　　　<ul class="list-unstyled">

　　2、内联列表

　　　　　<ul class="list-inline">

　　3、列表组

　　　　　list-group-item　　列表组的每一个元素

　　　　　list-group-item-heading　为<a>元素或者<button>元素添加一个title

　　　　　list-group-item-text　　为列表组添加内容，和"istgropitem-heading" 样式类-同放到- 个<a>元素或者<button>元素中

　　　　　list-group-item-success　　成功，背景色为绿色

　　　　　list-group-item-info　　　　信息，背景色为蓝色

　　　　　list-group-item-warning　　警告，背景色为黄色

　　　　　list-group-item-danger　　错误，背景色为红色

　　　　　badge　　通过给列表组元素添加带有“badge" 样式类的<span>标记指定徽章，默认自动放到右边