Bootstrap:簡潔、直觀、強悍的前端開發框架
開啟Bootsrap的官網,你會看到這樣一句英文:
Bootstrapis the most popular HTML, CSS, and JS framework for developing responsive,mobile first projects on the web.
什麼意思呢?有點英文基礎的人都能看懂,但是為了準確起見,我們看去Bootstrap中文網看較為準確的翻譯:
Bootstrap是最受歡迎的HTML、CSS和JS框架,用於開發響應式佈局、移動裝置優先的Web專案。
為何今天要說這個呢?因為最近在做的專案——介面管理系統,需要使用這個非常棒的前端框架,因此才抽出時間去了解和使用。可能你在沒接觸之前會有一種高大上的感覺,同時也有一種什麼都不懂的感覺,我也一樣,但是這不妨礙我們去使用它。
下面給出關於Bootstrap的兩個網址,方便大家去學習:
Bootstrap官方網站:http://getbootstrap.com/
Bootstrap中文網站:http://www.bootcss.com/
趕腳自己英文水平不錯的,就去查詢英文網站,順便也把英語練練,看英文文件有困難的就麻溜的去看翻譯好的中文網站吧,學習起來更爽。下面我就簡單說一下如何在自己的專案中去使用Bootstrap框架。
Bootstrap環境安裝
開啟Bootstrap的官方網站:http://getbootstrap.com/ 你會看到如下頁面:
在上圖中有個兩個按鈕,分別是Download Bootstrap和Download source,這兩個按鈕所代表的意識如下:
DownloadBootstrap:下載 Bootstrap。點選該按鈕,您可以下載 Bootstrap CSS、JavaScript 和字型的預編譯的壓縮版本。不包含文件和最初的原始碼檔案。
Download Source:下載原始碼。點選該按鈕,您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 原始碼。
為了方便起見,我就使用Bootstrap的預編譯版本為大家演示如何使用Bootstrap。
首先我們需要新建一個jsp頁面或者是html頁面,然後在這個頁面編寫程式碼如下,需要注意的是你必須將你下載好的css和js檔案放在你專案路徑裡面,方便新增引用。
<span style="font-size:18px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap例項</title>
<!-- 引用的Css樣式檔案和js檔案 -->
<link href="${pageContext.request.contextPath}/style/hmcss/index/index.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/script/headjs/index.js"></script>
<!-- Bootstrap及JQuery的必要引用 -->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="${pageContext.request.contextPath}/style/css/bootstrap-table.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/script/bootstrap-table.js"></script>
<!-- 引用結束==========================================-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">我的網站</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#contact">聯絡我們</a></li>
<li><a href="#contact">幫助</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template" style="padding:40px 15px;text-align:center">
<h1>Bootstrap 是一款非常好用的前端框架</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
</body>
</html></span>
編寫完畢之後,執行程式碼,效果如下:
是不是使用了Bootstrap之後的的頁面程式碼更加簡潔和直觀了呢?至於強悍的感覺,可能你還不會有什麼共鳴,但是我相信隨著你的學習深入,在實踐中熟練使用,相信會有一天你會感慨道:我的媽呀,Bootstrap簡直太強悍了。
小結一下:
之前一直使用的EasyUI的前端框架,當時用的覺得還不錯,可是當我接觸了Bootstrap之後,突然覺得EasyUI不怎麼好看了,而且寫起來也特別的麻煩,而Bootstrap的封裝性更勝一籌,很多的程式碼不用我們自己去寫,都是現成的。舉個例子,我們經常在專案中使用table,EasyUI需要我們自己動手去寫分頁的樣式以及查詢等功能,而Bootstrap的表格僅僅使用一個屬性就可以控制十分分頁,是伺服器端分頁還是客戶端分頁,都可以控制,而且查詢框也自帶,這得省去了多少的js程式碼啊,簡直爽歪歪啊。
因此,將這個個人覺得比較好的前臺框架分享給沒有接觸過的小夥伴,我也是剛接觸不久,所有權當是給大家拋磚引玉吧,我們共同學習,共同交流。相關文章
- 極致簡潔的微前端框架-京東MicroApp開源了前端框架APP
- Web經典B/S快速開發框架,強大後臺+簡潔UI一體化開發工具Web框架UI
- 06 前端之Bootstrap框架前端boot框架
- 前端簡潔並實用的工具類前端
- 開源推薦|簡潔且強大的開源堡壘機OneTerm
- 十分鐘上手前端UI框架Bootstrap前端UI框架boot
- BootStrap框架的使用boot框架
- 前端框架開發之Niu框架——從零學框架的小白前端框架
- 前端開發必看的幾個開源框架!前端框架
- Android架構設計:手把手教你擼一個簡潔而強大的MVP框架!Android架構MVP框架
- 對PHP開發框架的一些觀點PHP框架
- Web前端開發框架有哪些?Web前端框架
- 美觀簡潔的對話方塊 代替原生 alert 和 prompt
- web前端培訓:常用的Web前端開發框架有哪些?Web前端框架
- 《Bootstrap 4 Web設計與開發實戰》簡介bootWeb
- python自帶效能強悍的標準庫 itertoolsPython
- 面向企業級前端應用的開發框架 UI5 的發展簡史介紹前端框架UI
- 前端簡潔並實用的工具類函式封裝前端函式封裝
- 結構雖簡單,但效能強悍——3個小型卷積神經網路簡介卷積神經網路
- 完全開源可商用!一個簡潔、高效、安全的快速開發平臺!
- 與眾不同的快速開發平臺 —— 簡潔高效的wueasy軟體
- 一個WPF開發的、介面簡潔漂亮的音訊播放器音訊播放器
- 一個開源、美觀的日期選擇器(bootstrap datepicker)boot
- Web前端開發最好用的幾個WebGL框架Web前端框架
- 【前端基礎】Bootstrap前端boot
- Bootstrap 簡介boot
- 自監督SOTA框架 | BYOL(優雅而簡潔) | 2020框架
- 祝你成才,網站模板,簡潔後臺,功能強大,簡歷模板網站
- 微服務前端開發框架React-Admin微服務前端框架React
- 測試開發之前端篇-Web前端簡介前端Web
- 力軟(.NET)敏捷開發框架,讓開發變的更簡單敏捷框架
- BookStack v2.9 釋出,簡潔美觀的線上文件管理系統
- BookStack v2.8 釋出,簡潔美觀的線上文件管理系統
- 前端學習-UI框架學習-Bootstrap5-010-按鈕組前端UI框架boot
- 前端學習-UI框架學習-Bootstrap5-012-進度條前端UI框架boot
- 前端框架 Quasar-Framework 簡介前端框架Framework
- Scipy 直觀操作
- 最強悍LoadRunner和瀏覽器相容完美攻略瀏覽器
- 基於ThinkPHP5.0+BootStrap框架開發的響應式介面部落格系統PHPboot框架