JavaEE 之 Bootstrap 技術美化頁面

資料 ? 青牛 ? 于 2019-06-28 15:43:46 ? 733 閱讀

5.1 Bootstrap概述

5.1.1 什么是bootstrap?

Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔 靈活,使得 Web 開發更加快捷。

bootstrap 主要用于 CSS的頁面效果美化
file

這個表格就是在bootstrap的基礎上構建的一個表格;所以使用bootstrap來構建我們以后用到的簡單頁面效果還是不 錯的

5.1.2 為什么使用bootstrap?

移動設備優先:自 Bootstrap 3 起,框架包含了貫穿于整個庫的移動設備優先的樣式。

瀏覽器支持:所有的主流瀏覽器都支持 Bootstrap。
file

容易上手:只要您具備 HTML 和 CSS 的基礎知識,您就可以開始學習 Bootstrap。 響應式設計:Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。更多有關響應式設計的內容詳 見 Bootstrap 響應式設計
file

它為開發人員創建接口提供了一個簡潔統一的解決方案。
它包含了功能強大的內置組件,易于定制。
它還提供了基于 Web 的定制。
它是開源的。
說白了就是人家已經寫好了一套CSS樣式,而我們只需要掌握一點點的CSS技巧就能應用bootstrap構建一套非常漂亮的頁面效果

5.1.3 Bootstrap 包的內容

基本結構:Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
CSS:Bootstrap 自帶以下特性:全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class,以及一個先 進的網格系統。
組件:Bootstrap 包含了十幾個可重用的組件,用于創建圖像、下拉菜單、導航、警告框、彈出框等等。
JavaScript 插件:Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件,也可以逐個包 含這些插件。

5.2 Bootstrap使用

5.2.1 下載Bootstrap

使用bootstrap跟使用jquery一樣十分簡單,去官網下載人家寫好的項目引入到我們的項目中,美滋滋

bootstrap官網:
file

官網已經更新到bootstrap4這種新版了,我們的系統中只是簡單使用bootstrap,所以我們不需要用這么新的版本,我們 選用的是bootstrap3.3.7這個穩定版

下載地址: Getting started · Bootstrap

為啥不用新版?

1) 可能存在兼容性問題

2) 可以還含有未知BUG沒有解決

3) 穩定比新穎更重要

選擇好bootstrap之后就可以導入到我們的項目中,bootstrap是一個壓縮包,解壓好之后是這樣的
file

其中css 是其樣式文件 fonts 是字體文件 js是JavaScript腳本,我們可以分別引入項目中
file

5.2.2 Bootstrap入門

使用bootstrap也非常簡單,一共就分兩步操作即可

5.2.2.1 : 引入相關文件
file

bootstrap有些功能是依賴于jquery實現的,所以要引入文件的話 CSS文件 和 JS文件都需要引入,并且包括jQuery文件

5.2.2.2 修改樣式

樣式的修改可以借助菜鳥教程,上面有很多bootstrap的現成案例我們拿過來用就可以了

菜鳥教程bootstrap地址

Bootstrap 教程 | 菜鳥教程

舉個例子,比如我們現在有兩個按鈕
file

不是很好看,我們來美化一下這兩個按鈕

效果:
file

根據上面的案例啟示不難發現,我們原來的代碼什么也不用改,只需要添加我們向添加的class樣式就可以了,下面就給大 家提供一個bootstrap按鈕的樣式表:

Bootstrap 按鈕

本章將通過實例講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。但是 Bootstrap 提供了一些選 項來定義按鈕的樣式,具體如下表所示:

以下樣式可用于a, button, 或 input元素上:

file
常用按鈕代碼:
file

效果
file

5.2.3 Bootstrap字體圖標

字體圖標是在 Web 項目中使用的圖標字體

在 fonts 文件夾內可以找到字體圖標,它包含了下列這些文件:

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

相關的 CSS 規則寫在 dist 文件夾內的 css 文件夾內的 bootstrap.css 和 bootstrap-min.css 文件上。 字體支持來自于https://www.glyphicons.com/

雖然,Glyphicons Halflings 需要商業許可,但是您可以通過基于項目的 Bootstrap 來免費使用這些圖標。 為了表示對圖標作者的感謝,希望您在使用時加上 GLYPHICONS 網站的鏈接。

5.2.3.1 如何使用字體圖標

如需使用圖標,只需要簡單地使用下面的代碼即可。請在圖標和文本之間保留適當的空間。

代碼:
file

我們剛才寫的按鈕加上字體圖表的樣子

代碼:
file

效果:
file

當然有按鈕的地方都可以這么優化,而且還有很多圖表可以供大家設置,我們一會再設置,先繼續往下優化

5.2.4 表格類
file
下表樣式可用于表格中:
file
tr, th 和 td 類

下表的類可用于表格的行或者單元格:

根據上面的樣式我們可以給我們的表格加上一個class,給我們的表頭也加一個css 代碼

file
效果

file
一個基礎表格就優化好了,但是不太好看,沒關系稍微調試就好看了 第一步 : 表頭價格淡藍色背景

代碼
file

效果:
file

怎么樣這個表格是不是好看多了呢,但是里面有兩個按鈕不好看,我們也來美化一下吧

代碼 :
file

效果 :
file

5.2.5 form表單的優化

這回 就好看多了吧,美滋滋,那么我們再繼續優化,比如再優化我們的form表單

我們對表單的優化可能就要麻煩一些了,bootstrap并沒有成型的太好看的表單,所以我們要借助table來優化我們的添 加個修改頁面

第一步 : table加css
file

第二步 : 每個添加項都以一行兩列展開,完成數據的接收
file

大家此處要注意優化輸入框的CSS是 form-control

第三步 優化最下面的兩個按鈕
file

三步優化好之后我們的添加界面現在是這樣的

代碼 :
file
file

效果 :
file

怎么樣是不是有點效果了呢,好吧,那我們繼續完成最后的優化吧,把更新的form表單也變成添加這樣的

代碼 :
file
file
file

修改完后的更新:
file

到此頁面美化工作結束

版權聲明:原創作品,允許轉載,轉載時務必以超鏈接的形式表明出處和作者信息。否則將追究法律責任。來自海牛部落-青牛,http://hainiubl.com/topics/36801
點贊
成為第一個點贊的人吧 :bowtie:
回復數量: 0
    暫無評論~~
    • 請注意單詞拼寫,以及中英文排版,參考此頁
    • 支持 Markdown 格式, **粗體**、~~刪除線~~、`單行代碼`, 更多語法請見這里 Markdown 語法
    • 支持表情,可用Emoji的自動補全, 在輸入的時候只需要 ":" 就可以自動提示了 :metal: :point_right: 表情列表 :star: :sparkles:
    • 上傳圖片, 支持拖拽和剪切板黏貼上傳, 格式限制 - jpg, png, gif,教程
    • 發布框支持本地存儲功能,會在內容變更時保存,「提交」按鈕點擊時清空
    Ctrl+Enter
    江西快三下期预测 弈乐贵州捉鸡麻将下 互联网是怎么赚钱 股市权重股是什么意思 麻将规则 手机最快现场开奖直播 北京pk赛车计划 网盛棋牌免费下载官网 线上股票配资 pk10官网计划 15选5 复式投注查对表