前端

感谢

  • 黑马程序员
  • BootStrap官方
  • ElementUI官方
  • LayUI官方

我会在这里进行一些基本的介绍，但是并不是全面的介绍 因为框架十分简单，有官方文档，而且我也不想做一个搬运工

BootStrap

BootStrap介绍

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

当然，上面的这段话是它官网的吹牛逼，也许成分有些夸大，但是事实上学习前端框架的人BootStrap是比较受欢迎的一套框架

框架的特点是省事，CSS样式和JS代码基本都已经帮我们做好了，我们需要做的就是遵守框架的规则，在这基础上进行快速开发

BootStrap的好处是响应式布局，响应式布局的意思是我们只需要开发一套页面就可以在不同分辨率的设备上进行适配

BootStrap根据栅格系统可以实现这种响应式布局

BootStrap的使用

BootStrap的引入方式包括

1、npm：npm install bootstrap@3

2、在线CND：

  1. <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  4. <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  5. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  7. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  8. <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

3、下载：https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

4、其他

我们在学习阶段只需要CND即可

第一个BootStrap页面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <!-- 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 -->
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  10.     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  12.     <title>Bootstrap 101 Template</title>
  14.     <!-- Bootstrap -->
  15.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
  16.           rel="stylesheet">
  18.   </head>
  19.   <body>
  20.     <h1>你好，世界！</h1>
  22.     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  23.     <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  24.     <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  25.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  26.   </body>
  27. </html>

BootStrap的栅格系统

栅格系统

BootStrap最厉害的就是它的栅格系统。

BootStrap将我们屏幕上的一行分为12个格子，我们可以指定一个元素占用几个格子，并且可以根据不同分辨率的情况下，同一个元素指定占用几个格子

这样做的好处是，在不同分辨率的情况下可以使用不同占位的方案，进行动态的适配。

几个设备的代号：

xs：分辨率<768px，代表作品是手机

sm：分辨率>=768px，代表作品是平板

md：分辨率>=992px，代表作品是桌面的显示器

lg：分辨率>=1200px，代表作品是大桌面显示器

1、如果我们让一个元素的格子超过了12，那么超出的部分可以自动换行

2、栅格属性可以向上兼容，适用于屏幕宽度大于等于分界点的设备

3、真实宽度假如小于设置栅格属性的设备代码的最小值，会一个元素填满一行

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
        rel="stylesheet">


    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>


  </head>
  <body>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(114, 109, 109);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(184, 155, 155);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(156, 193, 214);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(144, 228, 182);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(216, 207, 75);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(114, 109, 109);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(184, 155, 155);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(156, 193, 214);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(144, 228, 182);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(216, 207, 75);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(114, 109, 109);padding: 1px;">
        Hello BootStrap
    </h1>

    <h1 class="col-xs-12 col-sm-6 col-md-3 col-lg-1" 
        style="background-color: rgb(184, 155, 155);padding: 1px;">
        Hello BootStrap
    </h1>

  </body>
</html>

col-分辨率-占用的格子，从上面这个h1中，可以看到 1、小分辨率占用12格，也就是一整行 2、中等分辨率占用6格，也就是一半 3、大分辨率占用3格，也就是1/4 4、超大分辨率只占用1格 前端框架 - 图1> 前端框架 - 图2> 前端框架 - 图3> 前端框架 - 图4

列偏移

  <body>
    <h1 class="col-sm-6 col-sm-offset-3" 
        style="background-color: rgb(114, 109, 109);padding: 1px;">
        Hello BootStrap
    </h1>
  </body>

col-分辨率-offset-偏移格子数 前端框架 - 图5

ElementUI

ElemntUI介绍

类似BootStrap。

简单来讲，ElementUI框架也是一种别人写好的CSS样式库，我们不用自己去编写样式，只需要照着它的样式复制下来就可以实现页面的美化效果

ElementUI的使用

套路基本都是一样的，在这里贴一下：

1、npm安装：npm i element-ui -S

2、在线CDN

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

LayUI

LayUI介绍

官网：https://www.layui.com/

一个经典的模块化前端框架

LayUI的使用

1、npm下载：npm i layui-src

2、github和码云

https://github.com/sentsin/layui/
https://gitee.com/sentsin/layui/

3、官网首页下载