BootStrap

Bootstrap

什么是前端、后端和界面

前端基本上是用户能看到的；后端往往驻留在服务器上，基本处理幕后的业务逻辑

Bootstrap非常坚定的站在前端，被编写为可重用的代码，可以放入自己开发的网站，这将使得设计网站变得非常容易

随着用户数量从桌面转向移动，很多网站需要响应Responsive
响应：响应窗口，在移动设备、iPad或台式机上查看同一网站，它应该具有不同的布局，以便能够做好的利用屏幕空间的大小
而bootstrap做到了适应性布局

我们可以从codeply上试验它，为什么不是codepen呢？codeply允许包含这些框架
https://www.codeply.com/

我们可以使用btnstrap的预定义类来简单为某个元素添加样式

CDN: 内容交付网络

如果客户端距离服务器非常远，那么即使是非常快的电缆，它仍然会产生延迟，可能是几毫秒，但用户不会等待网站加载超过2秒，这就是内容交付网络的用武之地
与其在一个地方托管网站，不如实际上有可以访问该网站的一堆服务器
意味着如果我的请求从英国出发，它将查找交付该网站的最短距离，大大减少了延迟

Bootstrap 已经将CSS文件托管在MaxCDN上，MaxCDN有遍布全球的路由点

由于Bootstrap是最流行的框架之一，很多现代网站都会有，其实用户可能已经下载了它，当这种情况发生的时候，浏览器实际会缓存它，保存本地副本，不必每次下载它。
所以说，由于Bootstrap如此受欢迎，用户可能已经在他们的浏览器缓存中拥有此文件了，那样的话将再次减少延迟

作为一名Web开发者，在开发网站之前，重要的是线框 Wireframing ,线框是设计的低保真度表示
它意味着用一支铅笔，一张纸来完成，意味着非常快。
Mock-up模型旨在成为应用程序或网站设计的高保真表示

查看他人网站可以提供一些布局和结构的好主意。看看一些UI模式
https://www.awwwards.com/
UI模式https://ui-patterns.com/
设计师展示他们原型作品的网站https://dribble.com/

线框布局的网站https://sneakpeekit.com/
更简单画线框的网站https://balsamiq.cloud/

Bootstrap使得构建响应式网站非常容易，也就是网站响应屏幕或视口的大小，所以它在iPad或桌面上时略有不同

Bootstrap的布局可以使用网格系统，有趣的是它将行划分为尽可能多的列，因为它需要为了平均分配所有所有列
col可以指定要占用多少行，单行的总数是12

还有一种布局是容器 Containers 容器是很多东西的基本构建块，去引导程序中的组件。当我们使用大量的Bootstrap组件时，它实际上是必须的
比如，网格也是包含在容器里的，它允许你水平居中或者填充你的内容
使用了媒体查询来响应视口，媒体查询的4个size一版是1200 992 768 576
如果无法接受改变视口时跳来跳去的效果，可以选择另一个容器，那就是流体容器fluid container,它始终占据视口宽度的100%

有一些按钮前面可能放置一些icon图标，这里提供一个网站https://fontawesome.com/
当然首要的，要使用它就要将它引入到我们的网站里

icon最喜欢用的标签是 i，但它并不会让图标倾斜，而是这是他们能使用的最短标签

有一个网站可以查看其他人对组件的各种应用https://bootsnipp.com/

z-index仅在元素定位时才有效

令一个概念是响应式查询，让我们不必依托于bootstrap就可以实现响应式，就是媒体查询

为什么我们要为响应式做如此多的设计，因为随着智能手机的发展，越来越多的用户都在使用移动端浏览网页，我们需要追随时代发展，否则必将落后

一般企业会创建一个单独的移动网站，如果移动端用户试图从中浏览，则重定向到该网站

或者在设计时就考虑到响应的问题

@media print screen speech

设备宽度无法更改

浏览器宽度很容易更改

响应能力和视窗有关，它是显示网站屏幕的大小

定期重构代码
1，可读性
2.模块化
3.效率
4.长度

为了避免CSS冲突
要非常谨慎的使用id
尽量将一个类作用于元素
尽量减少使用内联样式

网页设计

色彩理论
排版
用户界面设计
用户体验设计

选择颜色时，必须注意调色板的情绪
Red 爱、能量、强度
汽车广告：红色背景 红色车
Yellow 快乐 智力 注意力
它最重要的是如何吸引注意力
创建徽标或创建某种标题时，黄色是一个很棒的颜色
但如果要长时间观看某种东西，黄色就太引人注目了，甚至可能伤害用户的眼睛
Green 新鲜度、生长、安全性的
杂货公司经常使用这种颜色、食品
Blue 稳定、信任、宁静的
适用于很多公司，比如金融公司、货币公司

面试的时候尽量穿一件蓝色的衬衫，可以增加他人对你的信任

Purple 皇室、财富、女性气质， 发薪日贷款公司

如何组合颜色
采用两种色彩相邻的颜色，来创建调色板 —主体色
采用两端互补色 制造冲突 重点是吸睛
但不要视图尝试用对文本颜色和文本背景颜色使用互补颜色，非常不协调

绘制等边三角形来选择颜色，创建三元调色板
有一个网站是Adobe color的网站，可以随意选取颜色组合

排版
字体很重要，不仅要考虑它们的情绪，还要考虑如何组合，这很重要

Serif家族通常被认为是传统的，稳定的，受人尊敬的，权威的

San-Serif看起来更加友好，更加平易近人，更新颖，更现代

可读性和易读性的字体

在一个设计中使用两种字体就好，太多反而不美

用户界面设计
层次结构
布局
每行字体不能太长或太短，一行40-60个字符为目标最佳 （长方形）
对齐： 减少对其行数
空白
为受众设计
用户体验设计
1.简单
2.一致

在线图形编辑程序
https://www.canva.com/