4.17日更新
为什么从可视化布局网站布局完拿到本地跑就变个样,因为少了两个css依赖,不仔细看源码还真容易蒙了。记录下我自己的文件路径
<script src="js/jquery/2.0.0/jquery.min.js"></script> <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script> <link href="css/bootstrap-combined.min.css" rel="stylesheet"> <link href="css/layoutit.css" rel="stylesheet">
看红色的这连个依赖,千万别忘了。在springboot中,默认静态文件的加载位置有下面几个classpath:/META-INF/resources/
,classpath:/resources/
,classpath:/static/
,classpath:/public/,我是把css,img,js等文件都放在了src/main/resources下新建的static文件夹里边。
华丽的分割线:
----------------------------------------------------------------------------------------------------------------
Bootstrap的文件架构:、
bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件 │ └── bootstrap.min.css.map ├── fonts // 字体文件 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js // 核心JS压缩文件 └── npm.js
在国内时推荐使用如下cdn加速服务,访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
除了上边这些,还有jquery依赖的,这个要自己搞了。
比如我的路径:
<script src="js/jquery/2.0.0/jquery.min.js"></script>
最后,推荐bootstrap的在线布局系统,傻瓜式操作,从此妈妈再也不用担心我的前端,可以安心写后端了。
---------------------------------------------------------------------------------------------------------------