JSON&BootStrap简单学习,看这篇就够了!


1 JSON

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

1.1 什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#Java、JavaScript、PerlPython等)。这些特性使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 引入相关的头文件

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<!--需要引入JQuery-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
<!--需要引入Popper-->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<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>
	    <!-- Required meta tags -->
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	    <!-- Bootstrap CSS -->
	    <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>
		
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<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 类用于固定宽度并支持响应式布局的容器。

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

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

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

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

Nuxt.js+BootstrapVue+Json-server 基础入门到项目实战

08-18
为什么要学习服务端渲染 nuxt.js ? 现在我们的项目大多数都是SPA(单页面应用),在实际开发过程中单页面应用比之前的模板渲染要好很多,首先单页面应用是前后端分离,架构清晰,前端负责交互逻辑,后端负责数据,前后端单独开发,独立测试。但是,SPA不利于SEO(搜索引擎优化)。让搜索引擎更为信任该网站,通过提升排名获得更多网站流量,对于某些类型的网站是非常有必要的。目前大部分的Vue项目本质是 SPA 应用,React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景中。在我们开发的过程中,我们有 SEO 的需求,我们需要搜索引擎更多地抓取到我们的项目内容,此时我们需要SSR。SSR保证用户尽快看到基本的内容,也使得用户体验性更好。 Nuxt.js 是一个 Node 程序,基于vue.js开发的一套服务端渲染的框架,必须使用 Node 环境。我们对 Nuxt.js 应用的访问,实际上是在访问这个 Node.js 程序的路由,程序输出首屏渲染内容 + 用以重新渲染的 SPA 的脚本代码,而路由是由 Nuxt.js 约定好的 pages 文件夹生成的,开发只需要遵循一定的约定,直接使用vue.js开发我们项目也是非常轻松的。 课程案例 (1) HOME PAGE (2) Jokes Page  (3)About Page  课程概述 在本课程中,大喵将使用 nuxt.js + bootstrapVue + json-server 开发实战性质一个入门级项目,带着大家来体验服务端渲染(SSR )项目构建的过程;介绍 nuxt.js项目目录的结构,每个文件夹和文件的基本概念和作用,以及nuxt.config.js 配置文件的基本介绍;页面公共结构处理,路由页面跳转配置处理;axios 接口请求;带着大家来熟悉及掌握 bootstrapVue UI组件库的使用;
©️2020 CSDN 皮肤主题: 代码科技 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值