前端学习笔记--bootstrap
1.bootstrap3依赖jQuery？
- 是的
- 官网https://www.bootcss.com/
- 4版本以上不依赖。
-
2.如何导入？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入jquery--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <!--导入bootstrap--> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"> <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script> </head> <body> <div class="container"> </div> </body> </html>
3.布局容器？
- 留白的:
-
<div class="container"> ... </div>
- 不留白
-
<div class="container-fluid"> ... </div>
- 效果代码？
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入jquery--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <!--导入bootstrap--> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"> <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script> <style> .c1{ background-color: red; height: 200px; } </style> </head> <body> <!--留白--> <div class="container c1"> </div> <!--不留白--> <div class="container-fluid c1"> </div> </body> </html>
- 效果展示
-
4.栅格系统？
- 默认是对页面进行12划分
- 演示66分，演示39分
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入jquery--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <!--导入bootstrap--> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"> <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script> <style> .c1{ background-color: #bce8f1; height: 200px; border: 5px solid black; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 c1"></div> <div class="col-md-6 c1"></div> <br> <div class="col-md-3 c1"></div> <div class="col-md-9 c1"></div> </div> </div> </body> </html>
- 效果？
-
5.栅格系统如何在手机端和pc端不同的样式？
- 在class里面 增加col-md-6 c1 col-sm-6
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入jquery--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <!--导入bootstrap--> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"> <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script> <style> .c1{ background-color: #bce8f1; height: 200px; border: 5px solid black; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 c1 col-sm-6"></div> <div class="col-md-6 c1 col-sm-6"></div> <br> <div class="col-md-3 c1"></div> <div class="col-md-9 c1"></div> </div> </div> </body> </html>
6.栅格的参数？
7.栅格系统进行偏移展示？
- 利用col-lg-offset-2
- 代码：
-
View Code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入jquery--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <!--导入bootstrap--> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"> <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script> <style> .c1 { background-color: #bce8f1; height: 200px; border: 5px solid black; } </style> </head> <body> <div class="container"> <div class="row "> <div class="col-md-6 c1">.col-md-6</div> <div class="col-md-6 c1">.col-md-6</div> </div> <div class="row"> <div class="col-md-6 c1 col-lg-offset-2">.col-md-6</div> </div> </div> </body> </html>
- 效果？
-
8.
参考资料：https://www.bootcss.com/
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）