本章给大家带来学习Bootstrap后的一点小总结，让大家可以知道Bootstrap的组成、Bootstrap 的优缺点、Bootstrap 如何实现响应式布局（示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
【相关视频推荐：bootstrap教程】
Bootstrap4特点：1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本
Bootstrap组成：1.基础样式 2.常用组件 3.JS插件
常见问题：
1.Bootstrap 的优缺点
优点：CSS 代码结构合理 ，现成的样式可以直接用
缺点：定制较为繁琐，体积大
2.Bootstrap 如何实现响应式布局
原理：通过 media query 设置不同分辨率的class
使用：为不同分辨率选择不同的网格class
3.如何基于 Bootstrap 定制自己的样式
1.使用 css 同名类覆盖（简单场景使用）
2.修改源码重新构建
3.引用 scss 源文件，修改变量
知识点：
1.基本用法
制作简单登录页面
Bootstrap #result{ display: none; } .title{ margin-top: 50px; margin-bottom: 50px; } .operate button{ margin: 0 auto; }注册
var form = document.querySelector('#myForm'); var result = document.querySelector('#result'); form.addEventListener('submit', function(e){ if(!document.querySelector('[name=password]').value){ result.style.display = 'block'; result.innerHTML = '密码为空'; }else{ result.style.display = 'none'; } e.preventDefault(); });
效果图：
2.Bootstrap JS 组件
基于 jQuery 写的，可以完成很多交互效果，所以需要引入 jQuery ,还需要引入 Popper.js (库）和 bootstrap.js
使用方式：1.基于 HTML 的 data-** 属性 2.基于 JS API
效果图：
3.Bootstrap 响应式布局
代码示例：
Bootstrap .content > div{ height: 100px; line-height: 100px; text-align: center; color: #333; background:#cccccc; margin-bottom: 10px; }内容内容内容内容内容内容内容内容
总共12个，屏幕尺寸 =屏幕尺寸>=576px时，每行6个；992px>=屏幕尺寸>=768px时，每行4个；屏幕尺寸>=992px时，为每行3个；
效果图：
4.Bootstrap 定制方法
方法：1.使用 css 同名类覆盖（简单场景使用） 2.修改源码重新构建 3.引用 scss 源文件，修改变量
以上就是学习Bootstrap后的一点小总结的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611809.html
微信扫一扫 
支付宝扫一扫 
