关于前段的一些基本操作还是需要记录和掌握（不要用完就忘）

前言

每每修改前端页面，浑身上下似乎都在抗议，主要表现为：

• 稍稍改动就要切换浏览器刷新页面，手指头难受
• 每次DOM操作都要百度，改完就忘，很是崩溃
• 写js不能按照php的写法，写完之后自己都无法直视
• 如果遇到又原生、又丑、又乱的页面，简直就疯了
• 前段页面写的页面垃圾，后端就该哭了
• 对JS掌握前，很多时候底层报错完全不知道怎么回事

今天主要是对原生的html、css、js做了修改，主要集中在两个方面

1. 表单改为bootstrap
2. 使用了select2插件

Bootstrap 的使用

官网：http://www.bootcss.com/

使用 CDN加速引入Bootstrap 资源

使用bootstrap的css和js几种途径，官网都有介绍，比如直接下载、Npm 、Bower、Composer等等这些很强大很方便，但是对于我们PHP工程师操作不同环境的项目来说，我会直接推荐使用CDN。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

提示框

这是使用bootstrap最常用的东西

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

 图标

bootstrap的所有图标，也会经常用到

https://v3.bootcss.com/components/

select2 替代原生选择框

官网：https://select2.org/

和bootstrap一样，select2的安装方式也有好几种，不过我还是推荐使用CDN方式直接引入

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

使用方法非常简单

// 单选带搜索，html 部分，不要复制注释
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

<script type='text/javascript'>
// js部分
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>