Bootstrap之入门篇
【摘要】 本篇我们学习如何下载Bootstrap，并了解Bootstrap资源加载和使用。
本篇我们学习如何下载Bootstrap，并了解Bootstrap资源加载和使用。
Bootstrap是什么
由Twitter基于HTML、CSS、JAVASCRIPT开发的一个用于快速开发Web应用程序和网站的前端框架，我们可以通过Bootstrap快速的创建WEB项目。
为什么使用它
响应式布局可以适应各种尺寸的设备，如电脑、平板、手机
几乎兼容所有浏览器，如IE、Firefox、chrome等
代码开源
如何获取Bootstrap
访问 https://getbootstrap.com/docs/4.5/getting-started/download/
下载 "Compiled css and JS" 当前版本 v4.5.2
文件结构
bootstrap.* 为编译的包
bootstrap.min.* 为编译和压缩的包
BootstrapCDN
如果不想下载，可以直接通过Bootstrap的CDN引用
bootstrap 需引用部分
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
bootstrap javascrip插件 需引用部分
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
如何使用Bootstrap
通过BootstrapCDN引用
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap</title> <!--Bootstrap引用文件--> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>Hello Bootstrap</h1> <p>这是一个响应式的布局效果</p> </div> <div class="row"> <div class="col-sm-3"> <h2>演示1</h2> </div> <div class="col-sm-3"> <h2>演示2</h2> </div> <div class="col-sm-3"> <h2>演示3</h2> </div> <div class="col-sm-3"> <h2>演示4</h2> </div> </div> </div> </div> </body> </html>
本地资源加载方法与CDN加载类似替换URL为本地路径+资源名即可。
Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap
书山有路勤为径，学海无涯苦作舟!!!
zhoubo
2020.8.19 at home
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）