-
html5&css&js代码 014 布局框架
Bootstrap 是一个流行的开源前端开发框架，它由Twitter公司（后独立为Bootstrap团队）创建并维护。Bootstrap 提供了一套现成的、响应式的用户界面组件和设计布局工具，用于快速构建高质量的网页和Web应用。这段代码使用了这个框架，实现了一个简单的布局。
一、代码
编程笔记 html5&css&js 014 布局框架 我的相册
使用bootstrap框架- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
二、解释
这段HTML代码是一个简单的网页，展示了作者的相册。以下是该代码的功能解释：
文档声明（）：指定了文档类型为HTML5。 HTML标签（）：定义了文档的语言为中文。 头部标签（）：包含了页面的元数据，如字符编码、标题和外部资源链接。 字符编码（）：指定了文档的字符编码为UTF-8。 页面标题（）：设置了浏览器标签页上显示的页面标题。 视口设置（<meta name="viewport" content="width=device-width, initial-scale=1.0">）：优化了页面在不同设备上的显示。 样式表链接（<link>）：引入了外部的CSS样式表。 脚本引入（<script>）：引入了外部的JavaScript库和脚本。 主体标签（<body>）：包含了页面的主要内容。 相册边距（.ph_margin）：为相册添加了一个边距。 相册容器（.box）：定义了相册的布局和样式。 相册标题（.h_title）：设置了相册标题的样式。 相片列表（<ul>和<li>）：包含了相片的缩略图。 底部版权信息（<footer>）：显示了页面底部的版权信息。 这段代码主要展示了如何使用HTML和CSS创建一个简单的相册页面，包括设置页面的基本结构、引入外部资源、定义样式和布局。 <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.105489;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> <h2><a name="t3"></a><a id="Bootstrap_63"></a>三、Bootstrap框架简介</h2> <p>Bootstrap 是一个流行的开源前端开发框架，它由Twitter公司（后独立为Bootstrap团队）创建并维护。Bootstrap 提供了一套现成的、响应式的<a href="https://so.csdn.net/so/search?q=%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"用户界面\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"用户界面\"}"}" data-tit="用户界面" data-pretit="用户界面">用户界面</a>组件和设计布局工具，用于快速构建高质量的网页和Web应用。以下是Bootstrap框架的主要特点：<br> <a href="https://so.csdn.net/so/search?q=%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"响应式设计\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"响应式设计\"}"}" data-tit="响应式设计" data-pretit="响应式设计">响应式设计</a>：Bootstrap遵循移动优先的设计理念，使得基于该框架构建的网站能够自动适应不同屏幕尺寸的设备，如手机、平板电脑和桌面电脑。<br> HTML/CSS/JS基础：Bootstrap基于HTML5、CSS3以及JavaScript（主要依赖jQuery库），提供了一系列预定义的CSS类，简化了布局、排版、按钮、导航、表单、提示、弹出框等各种UI元素的样式设置。<br> 栅格系统：Bootstrap包含了一个强大的12列响应式栅格系统，便于灵活地组织页面布局结构。<br> 组件丰富：提供了大量可复用的组件，包括导航条、下拉菜单、轮播图、分页、标签页、警告提示框、模态对话框等，只需简单引用相应的类名即可实现复杂的交互效果。<br> 定制化：通过Sass源文件可以对Bootstrap进行深度定制，包括颜色方案、字体大小和其他样式变量。<br> 易用性与社区支持：由于其广泛的应用和庞大的开发者社区，Bootstrap拥有丰富的教程资源、插件和扩展，极大地降低了学习曲线，并确保开发者在遇到问题时能得到及时的帮助。<br> 简而言之，Bootstrap是一个高度灵活且功能齐全的前端框架，旨在提高开发效率、保证代码一致性，并帮助开发者创建出美观、一致且响应式的网站和应用程序。</p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1358116">nginx配置实例-负载均衡</a> <br /> <a href="/Article/Index/1399910">【量化交易笔记】11.移动平均交易策略</a> <br /> <a href="/Article/Index/1149364">【JAVA高级】——封装JDBC中的DaoUtils工具类（Object类型方法）</a> <br /> <a href="/Article/Index/635871">Spring框架系列(4) - 深入浅出Spring核心之面向切面编程(AOP)</a> <br /> <a href="/Article/Index/802724">【优化器】BGD、SGD、MSGD、Momentum、Adagrad、RMSPprop、Adam</a> <br /> <a href="/Article/Index/1339088">mybatis项目启动报错：reader entry: ���� = v</a> <br /> <a href="/Article/Index/1310713">深拷贝和浅拷贝的区别</a> <br /> <a href="/Article/Index/1077803">数组和List相互转化（摒弃循环）</a> <br /> <a href="/Article/Index/1460781">【嵌入式C】栈内存与printf，代码正确运行，删掉 printf 代码就崩溃了？？</a> <br /> <a href="/Article/Index/1370254">基于Linux安装Hive</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_40071585/article/details/136661878 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>
