Html美化 | Bootstrap鏈接整理

整理了一篇關於Bootstrap的學習鏈接，以及一些其它好用的h5插件。

Bootstrap框架需要有html基礎，推薦使用Bootstrap4版本。

1.Bootstrap基礎教程推薦：

• 菜鳥教程Bootstrap4：https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

• Bootstrap4中文文檔：http://bs4.vx.link/

• Bootstrap4中文站：https://code.z01.com/v4/index.html

常用組件：表單、輪播、模態框、分頁

布局思想：自適應、柵格布局、彈性盒子

2.Bootstrap布局工具

• 可視化布局工具網站：https://www.bootcss.com/p/layoutit/

• Bootstrap建模工具：https://tool.73ic.com/tool/boot.html

3.好用的第三方插件

• font awesome字體圖標庫（再也不用找icon了）：http://www.fontawesome.com.cn/

• sweetAlert（好看的jS彈窗）：
  

  • 官網：https://sweetalert.js.org/guides/
  • 完美的alert優化：https://blog.csdn.net/windy1001/article/details/82685977
  • 中文API：https://www.yanjiayu.cn/posts/52f4e444.html

• wangeditor（目前我用過最好的富文本編輯器插件）：http://www.wangeditor.com/

4.JavaEE中常用搭配方法

• sweetAlert搭配servlet和EL表達式，返回請求結果，示例：

  • servlet輸入request.setAttribute("log_state", "error");//登錄狀態log_state為error

  • jsp里輸入：

    <c:choose>
    		<c:when test="${requestScope.reg_state eq 'success'}">
    			<script>swal('注冊成功！', '', 'success');
    			</script>
    		</c:when>
    		<c:when test="${requestScope.reg_state eq 'error'}">
    			<script>swal('注冊失敗！', '', 'error');
    			</script>
    		</c:when>
    		<c:when test="${requestScope.log_state eq 'error'}">
    			<script>swal('用戶名或密碼錯誤，請重新登錄！', '', 'error');
    			</script>
    		</c:when>
    </c:choose>
    

• 表格字體圖標超鏈接：

  <c:forEach items="${requestScope.sourceList}" var="source">
      <tr>
          <td>${source.num }</td>
          <td>${source.department }</td>
          <td>${source.file_desc }</td>
          <td>${source.uploader }</td>
          <td>${source.upload_time }</td>
          <td>${source.visit_count }</td>
          <td><a href="video?num=${source.num}">
              <i class="fa fa-play-circle-o fa-lg" style="color:green"></i>
              </a>
          </td>
      </tr>
  </c:forEach>
  

以上的工具和方法其實就夠用了，尤其對一些不會JavaScript和ajax的同學

5.Bootstrap擴展插件（需Js和JQuery、ajax基礎）

• BootstrapTable：表格優化

  • 使用教程：https://www.jianshu.com/p/b5ca011a0d9c
  • 使用總結：https://www.cnblogs.com/laowangc/p/8875526.html

• Bootstrap-paginator:分頁器

  • git地址：https://github.com/lyonlai/bootstrap-paginator
  • 使用：https://www.cnblogs.com/stoneniqiu/p/4000041.html

• Bootstrap-select：下拉框優化

  • 動態加載二級聯動：https://blog.csdn.net/lyyo_cd/article/details/77162162?depth_1-
  • Bootstrap-select中文網：https://www.bootstrapselect.cn/

• bootstrap-wysiwyg：富文本編輯器

  • 使用：https://www.jianshu.com/p/f1be2d325426
  • 將富文本數據保存到mysql：https://blog.csdn.net/qing_gee/article/details/49331543
  • 附帶圖片上傳功能：https://www.cnblogs.com/shiyh/p/10436999.html
  • bootstrap-wysiwyg這個坑：https://www.cnblogs.com/shiyh/p/10437066.html

• 其它Bootstrap50個插件（精力有限，暫未驗證）：

  • https://blog.csdn.net/u010419967/article/details/39227859

5.注意點與心得

• Bootstrap不是一個css，而是一組，注意引入Bootstrap鏈接的順序

<!-- 新 Bootstrap4 核心 CSS 文件 --> 
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">  

<!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> 
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  

<!-- bootstrap.bundle.min.js 用於彈窗、提示、下拉菜單，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> 

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

• 布局工具網站用的Bootstrap版本可能為3，可能為4，這兩個版本差別很大。自己布局時請一定要驗證，確保效果完整顯現。多個網頁引用的Bootstrap版本統一。

• 如果是下載的本地樣式，驗證路徑是否正確。下載文件里后綴為mapping的文件，將它們和css/js放在同一路徑，能加快Bootstrap加載速度。

轉載請注明博文來源，有什么問題歡迎在評論欄留言。 ——Kevin_Lu 2020/3/25