bootstrap的使用方法及其基本模板
什么是Bootstrap
Bootstrap來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項(xiàng)目。 國內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。
如何使用
1.下載
bootstrap下載鏈接：https://v3.bootcss.com/getting-started/
下載有三個(gè)版本如果僅僅是使用的話下載第一個(gè)就行了
2.引入
只需要把下載好的文件解壓拖入webstrom即可
3.基本模板
<!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"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>使用模板</title><!-- Bootstrap地址，使用自己的地址就行了 --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!--兼容IE8--><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script></head> <body> <h1>你好，世界！</h1><!-- jQuery地址 (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- js地址下載文件中有（加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。） --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>模板注意點(diǎn):
- 3個(gè)meta標(biāo)簽*必須*放在最前面
- 引入bootstrap地址
- 引入jquery文件(Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊)
- 引入下載文件中的js文件（bootstrap.min.js）
4.使用方法
1.在bootstrap官網(wǎng)中找到自己想要的功能（bootstrap中文官網(wǎng)：http://www.bootcss.com/）
2.把模板復(fù)制到想要放置的位置
例如：標(biāo)簽頁的模板
把代碼復(fù)制到想要放置的地方（我這里是放在了body里）。
效果圖：
3.修改樣式，改成自己想要的
總結(jié)
以上是生活随笔為你收集整理的bootstrap的使用方法及其基本模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [Office#PPT]0001.实例剖
- 下一篇： Laravel Lumen 数组操作