當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap的学习

發(fā)布時(shí)間：2023/12/3 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap的学习小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

概念
入門
響應(yīng)式布局
- 響應(yīng)式布局的實(shí)現(xiàn)（柵格系統(tǒng)）
- 示例代碼
- 注意事項(xiàng)
- 柵格系統(tǒng)參考視頻
應(yīng)用 Bootstrap 的組件

概念

一個(gè)前端開發(fā)的框架，Bootstrap，來自Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于HTML、 CSS、 JavaScript 的，它簡(jiǎn)潔靈活，使得Web開發(fā)更加快捷。

框架：
一個(gè)半成品軟件，開發(fā)人員可以在框架基礎(chǔ)上，再進(jìn)行開發(fā)，簡(jiǎn)化編碼。

好處：
1.定義了很多的css樣式和js插件。我們開發(fā)人員直接可以使用這些樣式和插件得到豐富的頁面效果。
2.響應(yīng)式布局。同一套頁面可以兼容不同分辨率的設(shè)備。

入門

1.下載 Bootstrap，地址：https://v3.bootcss.com/getting-started/

2.下載的壓縮包解壓后，將里面的三個(gè)文件夾復(fù)制到項(xiàng)目中

3.創(chuàng)建 html 文件，可以使用 Bootstrap 的基本模板

<!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 101 Template</title><link rel="stylesheet" href="https：//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"></head><body><h1>你好，世界！</h1><script src="https：//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script><script src="https：//stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script></body> </html>

響應(yīng)式布局

依賴于柵格系統(tǒng)實(shí)現(xiàn)，將一行平均分成 12 個(gè)格子（不論什么屏幕，每行都有12個(gè)格子），可以指定元素占幾個(gè)格子。
例如，一個(gè) div 元素在 pc 端占 4 個(gè)格子，在手機(jī)的則占 12 個(gè)格子。

響應(yīng)式布局的實(shí)現(xiàn)（柵格系統(tǒng)）

1.定義容器。類似 table 元素

容器分類：
1.1.container ：固定寬度顯示

如上圖所示，container 容器在屏幕的的寬度 ≥576px 時(shí)都是有固定的顯示寬度的，例如，在 Medium 設(shè)備中固定顯示的寬度就是 720px，在 Extra small 設(shè)備中則 100% 寬度顯示，即占滿設(shè)備屏幕的整個(gè)寬度。

1.2.container-fluid ：100%寬度，即占滿整個(gè)屏幕的寬度

將容器元素的 class 屬性設(shè)為 container 或者 container-fluid。

點(diǎn)擊查看關(guān)于容器的詳細(xì)說明。

2.定義行。相當(dāng)于 tr 元素

將行元素的 class 屬性的值設(shè)為 row

3.定義元素。指定行內(nèi)的元素在不同的設(shè)備上所占的格子數(shù)目。

格式：col-設(shè)備代號(hào)-格子數(shù)目，即將元素的 class 屬性的值設(shè)為：col-設(shè)備代號(hào)-格子數(shù)目

設(shè)備代號(hào)：
（1）xs ：超小屏幕手機(jī)(<768px) ，手機(jī)，
（2）sm：小屏幕平板(2768px)，平板
（3）md：中等屏幕桌面顯示器(≥992px)，筆記本
（4）lg：大屏幕大桌面顯示器(21200px)，臺(tái)式電腦

按如上的設(shè)備代號(hào)，你要設(shè)置元素在手機(jī)端的布局，可以這樣定義元素的 class 屬性值：col-xs-12，表示元素在手機(jī)端的屏幕中占12個(gè)格子，而每行總共就12個(gè)格子，所以相當(dāng)于該元素在手機(jī)端占滿整行。

示例代碼

<!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 101 Template</title><link rel="stylesheet" href="css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script src="js/jquery-3.5.1.min.js"integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"crossorigin="anonymous"></script><script src="js/bootstrap.min.js"integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"crossorigin="anonymous"></script><style>.tel {border: 1px solid red;}</style> </head> <body>  <div class="container"><div class="row"><div class="col-md-3 col-lg-3 col-xs-12 tel">顯示的元素</div><div class="col-md-3 col-lg-3 col-xs-12 tel">顯示的元素</div><div class="col-md-3 col-lg-3 col-xs-12 tel">顯示的元素</div><div class="col-md-3 col-lg-3 col-xs-12 tel">顯示的元素</div><div class="col-md-3 col-lg-3 col-xs-12 tel">顯示的元素</div><div class="col-md-3 col-lg-3 col-xs-12 tel">顯示的元素</div></div> </div></body> </html>

上述代碼執(zhí)行后的效果如下所示：

注意事項(xiàng)

1.在小設(shè)備設(shè)置的柵格屬性，在大設(shè)備可以兼容；在大設(shè)備設(shè)置的柵格屬性，在小設(shè)備無法兼容
例如，你把元素的 class 屬性設(shè)置為 col-xs-4，表示元素在顯示的時(shí)候占4列，那么在 sm、md、lg等設(shè)備顯示時(shí)也是占4列；如果你把元素的柵格屬性設(shè)為 col-lg-4，那么在寬度小于 992px（lg設(shè)備最小寬度是992px）的設(shè)備顯示時(shí)就不是占4列了，而是占12列。

柵格系統(tǒng)參考視頻

視頻1 https://live.csdn.net/v/182157
視頻2 https://live.csdn.net/v/182158

應(yīng)用 Bootstrap 的組件

其實(shí)就是 Bootstrap 框架已經(jīng)做好的一些頁面組件元素，你只要復(fù)制代碼到你的網(wǎng)頁上使用即可。

例如，使用按鈕組件，你打開 Bootstrap 中文文檔，在左側(cè)找到組件 --> 按鈕，然后在右側(cè)復(fù)制代碼，粘貼到你自己開發(fā)的網(wǎng)頁上即可。

總結(jié)

以上是生活随笔為你收集整理的Bootstrap的学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

bootstrap

上一篇：银行挂失收费吗？
下一篇：使用Bootstrap开发网站首页