當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap(Web框架)的简单使用教程

發布時間：2023/12/29 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap(Web框架)的简单使用教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

我們在寫前端網頁的時候，如果全部都是自己一點一點的編寫，工作量巨大，效率不高，而且界面可能也不一定符合大眾審美；因此就有了框架來讓開發變得更加的簡單，且更有效率，而這Web開發中，Bootstrap就是一個很常用的框架。

通過簡單的學習了解，知道了Bootstrap框架的概念以及簡單的使用方法，接下來就簡單的講一下該框架。

前言
一、什么是Bootstrap？
二、使用步驟
- 1.下載Bootstrap
- 2.部署文件
- 3.創建html頁面，引入必要的資源文件
三、Bootstrap詳解
- 1.柵格系統
- 2.CSS全局樣式
- - （1）按鈕
  - （2）圖片邊框
  - （3）表格
  - （4）簡易登錄界面
- 3.常用組件
- - （1）導航欄
  - （2）分頁條
  - （3）輪播圖

一、什么是Bootstrap？

Bootstrap的概念：

Bootstrap （Web框架）：
一個前端開發的框架，Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。

Bootstrap是目前很受歡迎的一個前端框架，那么什么是框架呢？

框架：
一個半成品軟件，開發人員可以在框架基礎上，在進行開發，簡化編碼。

Bootstrap 框架的優點：
1. 其中定義了很多的css樣式和js插件。開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。
2. 使用了響應式布局（同一套頁面可以兼容不同分辨率的設備）。

什么是響應式布局呢？簡單來說就是在不同大小的屏幕上能夠有不同的顯示效果，比較好的一個例子就是蘋果的官網，當屏幕較大時，導航欄顯示的很多，而屏幕較小時，導航欄的內容也相應減少。

例：蘋果官網

隨著屏幕縮小，頁面變化為：

而淘寶的官網就不是響應式布局，而是用了兩個網站來區分大小屏幕的，當我們屏幕縮小，大屏幕版的顯示方式也不會發生變化。

例：淘寶網電腦版

例：淘寶網觸屏版
（注：這里只是區分響應式布局和非響應式布局，沒有打廣告和鼓勵大家買東西，希望大家理性消費哈）

二、使用步驟

剛剛大致講了一下BootStrap框架和它的優點，接下來就開始簡單講一下BootStrap的使用步驟。

1.下載Bootstrap

BootStrap官網下載地址為：https://v3.bootcss.com/
在官網里，不僅僅有下載地址，還有很多對應的組件的使用方法，但我們使用的時候可以去官網查閱。

2.部署文件

下載后解壓后復制三個文件夾css、fonts、js到項目中去

3.創建html頁面，引入必要的資源文件

導入上圖所勾選的三個文件，代碼為：

在html文件中使用方式如下：

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap HelloWorld</title><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script> </head> <body> <h1>你好，世界！</h1></body> </html>

運行結果如下：

接下來我們就來使用Bootstrap框架，看看其具體的組件怎么實現吧！

三、Bootstrap詳解

1.柵格系統

在前面已經簡單的介紹了Bootstrap的使用，我們知道Bootstrap中使用的是響應式布局，即同一套頁面可以兼容不同分辨率的設備，而在Bootstrap中，響應式布局的實現依賴于柵格系統。

實現：將一行平均分成12個格子，可以指定元素占幾個格子。

實現步驟如下：

定義容器。相當于之前的table,
容器又可分為兩類：
（1）container：兩邊留白
（2）container-fluid：每一種設備都是100%寬度

定義行。相當于之前的tr 樣式：row

定義元素。指定該元素在不同的設備上，所占的格子數目。
樣式：col-設備代號-格子數目
設備代號：
（1）xs：超小屏幕手機 (<768px)：col-xs-12
（2）sm：小屏幕平板 (≥768px)
（3）md：中等屏幕桌面顯示器 (≥992px)
（4）lg：大屏幕大桌面顯示器 (≥1200px)

注意：

一行中如果格子數目超過12，則超出部分自動換行。

柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設備。

如果真實設備寬度小于了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。

示例：

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 柵格系統</title><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script><style>.inner {border: 1px solid red;}</style> </head> <body> <div class="container"><div class="row"><div class="col-md-4 inner">柵格</div><div class="col-md-4 inner">柵格</div><div class="col-md-4 inner">柵格</div></div> </div> </body> </html>

代碼表示在中等大小的屏幕每個柵格占4格，前面已經知道了一共有12個格子，那么在屏幕較大時，三個柵格各占1/3。

屏幕較大時：

屏幕較小時，不足12格，每個柵格占滿一行：

2.CSS全局樣式

（1）按鈕

不使用Bootstrap，原樣式：

<a href="#">Link</a><button type="submit">Button</button><input type="button" value="Input"><input type="submit" value="Submit">

使用Bootstrap，在每一個標簽中加上class=“btn btn-default”：

<a class="btn btn-default" href="#">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit">

按鈕對比，上面為原樣式，下面為使用Bootstrap后的樣式：

另外還有幾個其他的按鈕樣式，大家可以根據自己的需要使用：

<div><button type="button" class="btn btn-primary">（首選項）Primary</button><button type="button" class="btn btn-success">（成功）Success</button><button type="button" class="btn btn-info">（一般信息）Info</button><button type="button" class="btn btn-warning">（警告）Warning</button><button type="button" class="btn btn-danger">（危險）Danger</button><button type="button" class="btn btn-link">（鏈接）Link</button> </div>

（2）圖片邊框

使用方法如下：

"img-responsive"表示圖片始終占滿屏幕，隨屏幕大小變化而變化；
"img-rounded"表示圖片四個邊上變為圓角；
"img-circle"表示取圖片為圓形狀，如果圖片過長，會拉伸圖片為橢圓；
" img-thumbnail"表示給圖片加一個相框。

具體在這里不做圖片展示了，大家自己動手試試吧！

（3）表格

如果不加上class=“table table-bordered table-hover”，效果為：

使用Bootstrap，加上class=“table table-bordered table-hover”，效果為：

可以看到效果明顯美觀很多，不僅多了邊框，并且放置在上面也挺美觀。

（4）簡易登錄界面

<form class="form-horizontal"><div class="form-group"><label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label><div class="col-sm-10"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div> </form>

效果如圖：

3.常用組件

常用組件，包括上面的樣式都可以在Bootstrap官網查閱對應的使用方法，將代碼修改以達到自己想要的效果，在這里簡單講兩個常用的組件的使用方法。

（1）導航欄

<nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><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 class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div></div> </nav>

效果如圖：

（2）分頁條

效果如圖：

（3）輪播圖

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="img/banner_1.jpg" alt="..."></div><div class="item"><img src="img/banner_2.jpg" alt="..."></div><div class="item"><img src="img/banner_3.jpg" alt="..."></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> </div>

效果如圖：

具體的使用只需要復制代碼然后改變圖片即可。

大家有什么不懂的地方或者想使用的控件就多去Bootstrap官網上查看，很多都有對應的使用方法，如果有不知道代碼是什么功能的可以刪除又加上對比效果，通過在基礎代碼上做修改來達到自己想要的效果。文章如果有錯誤的話歡迎指出，一起加油學習吧！

總結

以上是生活随笔為你收集整理的Bootstrap(Web框架)的简单使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

编程问答

Bootstrap(Web框架)的简单使用教程

前言

目錄

一、什么是Bootstrap？

二、使用步驟

1.下載Bootstrap

2.部署文件

3.創建html頁面，引入必要的資源文件

三、Bootstrap詳解

1.柵格系統

2.CSS全局樣式

（1）按鈕

（2）圖片邊框

（3）表格

（4）簡易登錄界面

3.常用組件

（1）導航欄

（2）分頁條

（3）輪播圖

總結