BootStrap的下载及使用方法
生活随笔
收集整理的這篇文章主要介紹了
BootStrap的下载及使用方法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
BootStrap使用很簡(jiǎn)單，先進(jìn)入bootstrap的中文官網(wǎng)?https://www.bootcss.com/
我們看上方的版本，這里咱們點(diǎn)開Bootstrap3，主頁(yè)如圖下
點(diǎn)擊下載,進(jìn)入如下網(wǎng)頁(yè),點(diǎn)擊下載"用于生產(chǎn)環(huán)境的Bootstrap"?
在idea中分別創(chuàng)建css,js文件夾,然后將下載好的bootstrap解壓,將如下,css,js文件拖入到idea中新建的css,js文件夾下
?
?然后具體怎么去使用bootstrap的樣式和組件之類的咱們不需要去背，從官網(wǎng)的上方去選擇自己需要的樣式，將相關(guān)代碼copy下來(lái)再自己去調(diào)整即可
? 比如如下，選擇"全局css樣式"--> "表單"
?將代碼copy我們的項(xiàng)目中即可。
register.html如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 在url上使用@標(biāo)簽,可以幫我們自動(dòng)加上contextpath --><link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"><script th:src="@{/js/bootstrap.min.js}"></script> </head> <body> <form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button> </form> </body> </html>啟動(dòng)項(xiàng)目,訪問
?
在bootstrap中有很多組件、樣式等，我們很難去找所需要的組件等，可以在頁(yè)面中按Ctrl+F，快速查找，如下圖：
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的BootStrap的下载及使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前后端分离
- 下一篇： javaweb:servlet过滤器