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

编程问答

Bootstrap的学习

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

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

文章目錄

概念
入門
響應式布局
- 響應式布局的實現（柵格系統）
- 示例代碼
- 注意事項
- 柵格系統參考視頻
應用 Bootstrap 的組件

概念

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

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

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

入門

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

2.下載的壓縮包解壓后，將里面的三個文件夾復制到項目中

3.創建 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>

響應式布局

依賴于柵格系統實現，將一行平均分成 12 個格子（不論什么屏幕，每行都有12個格子），可以指定元素占幾個格子。
例如，一個 div 元素在 pc 端占 4 個格子，在手機的則占 12 個格子。

響應式布局的實現（柵格系統）

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

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

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

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

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

點擊查看關于容器的詳細說明。

2.定義行。相當于 tr 元素

將行元素的 class 屬性的值設為 row

3.定義元素。指定行內的元素在不同的設備上所占的格子數目。

格式：col-設備代號-格子數目，即將元素的 class 屬性的值設為：col-設備代號-格子數目

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

按如上的設備代號，你要設置元素在手機端的布局，可以這樣定義元素的 class 屬性值：col-xs-12，表示元素在手機端的屏幕中占12個格子，而每行總共就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 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>

上述代碼執行后的效果如下所示：

注意事項

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

柵格系統參考視頻

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

應用 Bootstrap 的組件

其實就是 Bootstrap 框架已經做好的一些頁面組件元素，你只要復制代碼到你的網頁上使用即可。

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

總結

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

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

bootstrap