生活随笔
收集整理的这篇文章主要介绍了
【JavaWeb】前端框架之Bootstrap
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
文章目录
- 1 概念
- 2 快速入门
- 3 响应式布局
- 4 CSS样式和JS插件
1 概念
BootStrap是前端开发框架，基于HTML、CSS、JavaScript。
优点：
- 定义了很多CSS样式和JS插件，可以直接使用。
- 响应式布局：同一套页面可以兼容不同分辨率的设备。
2 快速入门
下载Bootstrap将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><script src="/js/bootstrap.js/bootstrap.min.js"></script><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/index.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！
</h1>
</body>
</html>
3 响应式布局
实现：
依赖于栅格系统，将一行平均分成12个格子，可以指定元素占多少格子。
步骤：
定义容器，container、container-fluid定义行，row定义元素，指定该元素在不同的设备上所占的各自数目。样式：col-设备代号-格子数目。设备代号：【xs超小屏幕（手机）、sm小屏幕（平板）、md中等（显示器）、lg大屏幕（大显示器）】
大屏显示效果 1×12
小屏显示效果 2×6
<style>.inner{border: 1px solid red;}</style>
</head>
<body><div class="container-fluid"><div class="row"></div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div><div class="col-lg-1 col-sm-2 inner">栅格
</div></div>
</body>
</html>
注意
- container-fluid：每一种设备都是100%宽度
- container：固定宽度，每种设备不一样，有留白
- 超过12个格子就自动换行
- 栅格类可以向上兼容，如果真实设备宽度小于设备栅格类属性的设备代码的最小值，则一个元素沾满一行。
4 CSS样式和JS插件
具体使用：https://v3.bootcss.com/
全局样式
组件
插件
总结
以上是生活随笔为你收集整理的【JavaWeb】前端框架之Bootstrap的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
