如何在SpringBoot項目中使用Bootstrap前端框架並設計表格

2020-12-17 IT軟體專家

在搭建的SpringBoot項目中，可以使用模板引擎，設計出不同樣式的頁面。如果頁面模板中使用Bootstrap前端框架，需要將Bootstrap對應的js和css拷貝到指定文件夾中。

工具

IntelliJ IDEA 2020JDK8TomcatMavenGit技術

SpringBootjQueryHTML5CSS3Bootstrap

1、打開IntelliJ IDEA 2020開發工具，創建SpringBoot框架項目

創建SpringBoot框架項目

2、在templates文件夾下，新建頁面文件index.html

在templates文件夾下，新建頁面文件

3、配置項目的jdk，下載對應的依賴包，然後啟動項目類

配置項目，下載依賴包，啟動項目

4、到Bootstrap官網下載，然後將js和css拷貝到指定文件夾

下載Bootstrap，拷貝js和css文件

5、打開index.html文件，引入bootstrap中的css和js文件

引入bootstrap中的css和js文件

6、重新啟動項目，訪問項目，結果瀏覽器控制臺出現了報錯

啟動項目，訪問項目，檢查報錯

7、檢查代碼發現，由於jquery沒有引入

解決報錯問題

8、在<body></body>標籤中，插入一個table，然後添加Bootstrap對應的表格樣式

body標籤中，插入表格元素和表格樣式

9、再次啟動項目，刷新瀏覽器，可以查看到表格

刷新並查看界面效果

說明：

1、在SpringBoot框架項目中，可以使用模板引擎，快速搭建前端項目

2、前端頁面修改了樣式或業務邏輯，需要重複啟動項目，才能查看效果

相關焦點

  • 前端框架bootstrap4.4入門教程,使用方法實例響應式布局實戰
    bootstrap是我最喜歡的前端框架，沒有之一，當前的最新版本是bootstrap4.4.1，和之前的3.X版本相比較有較大的變化，不過都是屬於各種標籤的分離，方法還是一樣的，在網上各種教程雖多，但是對於入門還不是不夠，很多入門教程講得雲裡霧裡，看不懂到底在說些什麼。我覺得使用具體的實例來結合相關的標籤使用才能真正的加深理解。
  • Flask乾貨:Bootstrap的基本使用——Bootstrap簡介
    知道了網頁，那Bootstrap和前端有啥關係呢？簡單來說就是，Bootstrap讓前端開發更簡單了！！Bootstrap是一個集成了HTML標記、CSS樣式及JavaScript行為的前端開發框架，可以讓開發人員不用再像過去一樣反覆寫模板、樣式等，大大的節省了開發時間。
  • 10大html5前端框架
    AUI第三個是最近剛起來的AUI，雖然作者聲稱是專為APICloud開發者設計的一套UI框架，但實際它還是解決了很多移動前端開發的普遍問題，是主 要面向混合開發的 CSS 框架。看起來作者比較猖狂，各種高級 CSS3 遍地使用，這讓我也不得不去查查這些個 CSS3 的兼容性。
  • html框架——bootstrap手動控制模態框隱藏和顯示
    在網頁開發過程中，我們經常會使用bootstrap這套由推特開源的前端框架。其中在業務的開發過程中，存在這樣的業務場景：點擊編輯按鈕，彈出模態框，然後在模態框中對信息進行編輯。bootstrap的模態框，如果設置的是默認點擊空白處自動關閉，不是自己通過JS進行控制時，驗證信息使用alert("XXXX"),點擊否，會直接關閉模態框，之前填寫的內容會清空，導致用戶體驗不好。那麼怎麼解決這個問題呢？
  • 用Vue 和Bootstrap 4 來構建Web前端界面
    儘管前端程序現在發展迅速，各種框架層出不窮，但是對廣大非前端碼農來說構建Web界面的最好的選擇仍然還是Bootstrap 4。但是Bootstrap依賴於已經嚴重過時，被拋棄的jQuery組件，那麼如何解決這個問題就迫在眉睫了。
  • 前端開發大盤點:2015最流行前端框架TOP20
    隨著Web 越來越規範和標準的統一，Web組件化技術不斷革新以及移動端開發不斷升華的今天，我覺得有必要把過去一年幫助過我或朋友們的優秀開源前端框架做個盤點，希望這些與時俱進，具有行業代表性的項目能夠越來越好，幫助到更多的前端開發者們。此榜單根據github上star數作為排名依據，一個人力量有限，如果收集有遺漏歡迎補充。
  • Bootstrap Icons - bootstrap 專用的漂亮開源圖標庫,可以免費商用
    專門為著名的前端開發 UI 框架 Bootstrap 的組件和文檔定製開發的圖標庫。介紹Bootstrap 圖標庫 的設計初衷是與 Bootstrap 組件配合使用，從表單到導航組件等。bootstrap icons 官網截圖特點Bootstrap 是一個凝聚了設計與html/css/js 極致追求的一個移動優先的UI框架，多年來被大量使用在移動+PC的項目上，組件非常優美大氣。
  • 前端乾貨分享:bootstrap知識總結
    Bootstrap框架一、Bootstrap簡介Bootstrap是一個用於快速開發Web應用程式和網站的前端框架。Bootstrap是基於HTML、CSS、JavaScript的。(4)**內置 jQuery：**插件Bootstrap提供了很多實用性的jquery插件，這些插件方便開發者實現Web中各種常規特效。(5)**支持 HTML5、CSS3：**HTML5語義化標籤和CSS3屬性，都得到很好的支持。
  • Springboot 項目搭建入門
    >工程搭建springboot項目由於其自動配置了很多的依賴，簡化了開發者的配置，因此加快了開發者的開發速度，但是如果對spring 底層等不太了解的人，還是有些懵的，建議大家學習spring 之後再來使用spring boot項目來搭建。
  • 記錄springboot接收post和get兩種方式提交數據的不同方法
    剛開始接觸前端開發框架uni-app想通過寫個簡單的前端登錄請求到後端服務，不曾想遇到了很多問題。問題一：服務端接收不到請求。問題二：服務端接收不到請求發送過來的參數信息。問題一的主要原因是因做的是前後端分離的移動項目，手機端請求伺服器時存在跨域問題。需要在伺服器端做跨域方面的處理。後端伺服器才可以接收到移動端發送的請求。問題二開始：場景描述：簡單寫了一個登錄，通過ajax提交用戶名和密碼到服務端 ，服務端接收參數後返回登錄成功信息。問題描述：服務端可以接收到請求，但是參數卻始終是null。
  • 基於SpringBoot Cloud構建的一個商城項目源碼分享
    基於springboot cloud構建的一個商城項目，包括前端，後端和h5應用，小程序，作為zscat應用實踐的模板項目。基於SpringBoot2.x、SpringCloud和SpringCloudAlibaba並採用前後端分離的企業級微服務敏捷開發系統架構。
  • 前端框架 Bootstrap 5 Beta 1 發布
    JavaScript 改進和錯誤修復 通過 state 選項更新了具有 pseudo-classes 支持的實用程序 API更多詳情可查看：https://github.com/twbs/bootstrap
  • 2020年的前端工程師請收下這幾個Vue.js開源框架
    vue開發核心是關注視圖層，同時它更加容易與第三方庫結合，再者我們在現有的項目中可以直接整合一起。目前vue技術社區在英文或中文都非常豐富，社區都有很多經驗豐富的開發人員，其功能也非常豐富與使用性，屬於輕量級框架。
  • 值得選用的十三種優秀React JS框架
    2019年，在StackOverflow針對開發人員的調查中，React.js和React Native在可用性和被關注度方面均排名靠前。本文將和您討論十三種優秀的React JavaScript框架，以方便您在實際項目中靈活選用。其中前十一個(如React)具有MIT的許可授權，而後兩個則持有Apache 2.0的授權。
  • 騰訊T7架構師至今還在鑽研的SpringBoot從構建小系統到架構大系統
    前言個人認為，springboot是隨著Spring4.0出生的， 他的出現，目的是為了解決Spring這麼多年來的發展導致本身的笨重、各類繁瑣及與第三方框架整合的配置文件，對於碼農或項目團隊來說，是不希望見到的。因此springboot的出現是為了解決spring多年發展帶來的弊端。
  • Web前端三大主流框架是什麼?
    前端框架對於前端開發的好處是顯而易見的，比如減少代碼中因失誤產生的bug，還能大大節約時間和人力成本，縮短開發周期等等。目前，市面上Web前端三大主流框架分別指的是Angular、React和Vue，在Web前端開發中，它們平分秋色，各有優劣。
  • kuapingUI 2.0 版本發布,Bootstrap 4+ 大組件 UI 框架
    kuapingUI 2.0 版本發布，更新了基於bootstrap 4+的組件版本，增加了文本、巨幕、新聞、產品、聯繫、團隊、特徵等數幾十種常用
  • bootstrap 用什麼布局專題及常見問題 - CSDN
    bootstrap學習之布局（柵格布局）今天自己在網上學習了BOOTSTRAP柵格系統，很有體會，希望將自己的學習心得寫寫下來供自己日後參考學習1.什麼是柵格布局？
  • Web前端開發必不可少的9個開源框架
    大多數人想到Web開發時，通常會想到HTML或JavaScript，往往忽略了CSS，根據Wikipedia的說法，CSS既是網頁中最重要也是最常被遺忘的部分之一，儘管它是全球資訊網的三大基礎技術之一。今天就和大家分享9個流行的、強大的前端開源框架，幫助你輕鬆構建漂亮的網站前端。
  • 十大新興前端框架大盤點
    作者 | 司徒正美責編 | 伍杏玲2019年在整體上，前端的主流框架沒有太大的變化，業務代碼仍由三大框架（React、Vue、Angular）所主宰著，打包工具一般仍使用webpack、Rollup.js，狀態管理器還是Redux、MobX。