BootStrap的下载及使用方法
生活随笔
收集整理的这篇文章主要介绍了
BootStrap的下载及使用方法
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
BootStrap使用很简单，先进入bootstrap的中文官网 https://www.bootcss.com/
我们看上方的版本，这里咱们点开Bootstrap3，主页如图下
点击下载,进入如下网页,点击下载"用于生产环境的Bootstrap"
在idea中分别创建css,js文件夹,然后将下载好的bootstrap解压,将如下,css,js文件拖入到idea中新建的css,js文件夹下
然后具体怎么去使用bootstrap的样式和组件之类的咱们不需要去背，从官网的上方去选择自己需要的样式，将相关代码copy下来再自己去调整即可
比如如下，选择"全局css样式"--> "表单"
将代码copy我们的项目中即可。
register.html如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!-- 在url上使用@标签,可以帮我们自动加上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>启动项目,访问
在bootstrap中有很多组件、样式等，我们很难去找所需要的组件等，可以在页面中按Ctrl+F，快速查找，如下图：
《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读总结
以上是生活随笔为你收集整理的BootStrap的下载及使用方法的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 前后端分离
- 下一篇： javaweb:servlet过滤器