Bootstrap框架
day57 参考:https://www.cnblogs.com/liwenzhou/p/8214637.html 下载:http://www.bootcss.com/?? 选择用于生产环境的 Bootstrap Bootstrap环境搭建目录结构: bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件 │ └── bootstrap.min.css.map ├── fonts // 字体文件 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 └── js // JS文件 ├── bootstrap.js ├── bootstrap.min.js // 核心JS压缩文件 └── npm.js
处理依赖 由于Bootstrap的某些组件依赖于jQuery,所以请确保下载对应版本的jQuery文件,来保证Bootstrap相关组件运行正常。 ? https://v3.bootcss.com/css/ 的全局CSS样式中。 Normalize.css为了增强跨浏览器表现的一致性,我们使用了 Normalize.css,这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。 可在https://www.bootcdn.cn/normalize/复制标签。 ? 布局容器Bootstrap 需要为页面内容和栅格系统包裹一个
Copy
<div class="container"> ... </div>
Copy
<div class="container-fluid"> ... </div>
示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>bootstrap第一个示例</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!--<style>--> <!--.row div {--> <!--border: 1px solid red;--> <!--}--> <!--</style>--> </head> <body> <!--容器--> <div class="container"> 啦啦啦 </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> 效果: 栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。 简介栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
通过研究后面的实例,可以将这些原理应用到你的代码中。 ? 栅格参数通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
? 1. 栅格系统 示例: 03bootstrap第一个示例.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>bootstrap第一个示例</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style> .row div { border: 1px solid red; } </style> </head> <body> <!--容器--> <div class="container"> <!--行--> <div class="row"> <!--列 在手机页面上等宽显示--> <div class="col-md-1 col-xs-4">占1列</div> <div class="col-md-10 col-xs-4">占10列</div> <div class="col-md-1 col-xs-4">占1列</div> </div> <!--第二行--> <div class="row"> <div class="col-md-5 col-md-offset-2">第二行 左边空两列</div> </div> <div class="row"> <div class="col-md-3">占3列的div</div> <div class="col-md-6">占6列的div</div> <!--放不下往下放--> <div class="col-md-6">占6列的div</div> </div> <div class="row"> <!--右推--> <div class="col-md-3 col-md-push-1">占3列的div</div> <div class="col-md-6">占6列的div</div> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> 效果: ? 排版查看:https://v3.bootcss.com/css/#type ? 实现: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>h1. Bootstrap heading <small>Secondary text</small> </h1> <h2>h2. Bootstrap heading <small>Secondary text</small> </h2> <h3>h3. Bootstrap heading <small>Secondary text</small> </h3> <h4>h4. Bootstrap heading <small>Secondary text</small> </h4> <h5>h5. Bootstrap heading <small>Secondary text</small> </h5> <h6>h6. Bootstrap heading <small>Secondary text</small> </h6> <p> 世情薄,人情恶,世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶 </p> <p class="lead"> 世情薄, <del>人情恶</del> ,世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶世情薄,人情恶 </p> <p>高亮坐在我的 <mark>右边</mark> ! </p> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p> <address> <strong>luffycity,Inc.</strong><br> 沙河地铁站往南走1500米,路左侧<br> 赋腾国际创客中心A座2005<br> <!--缩略语--> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Alex Li</strong><br> <a href="mailto:#">[email?protected]</a> </address> <blockquote> <p>技术的提升只是量的积累,思想的提升才是质的飞跃。</p> <!--作者--> <footer>老男孩思想</footer> </blockquote> <!--横摆list-inline--> <ul class="list-inline"> <li>111</li> <li>222</li> <li>333</li> </ul> <dl class="dl-horizontal"> <dt>Alex Li</dt> <dd>抽烟 烫头 大马猴</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus.</dd> </dl> </div> <!--内联代码 高亮--> <code><div></code> <code>print("hello world!")</code> <p>按住键盘上的<kbd>ctrl</kbd>键,就支持批量操作</p> <!--渲染表格 表格边框 隔行变色 鼠标移上去后变色 紧缩表格--> <table class="table table-bordered table-striped table-hover table-condensed"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr class="success">//改变颜色 <td>1</td> <td>Egon</td> <td>街舞</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr class="error"> <td>2</td> <td>Alex</td> <td>烫头</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr class="warning"> <td>3</td> <td>苑局</td> <td>日天</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr class="danger"> <td>3</td> <td>苑局</td> <td>日天</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> <tr class="info"> <td>3</td> <td>苑局</td> <td>日天</td> <td> <button class="edit-btn">编辑</button> <button class="delete-btn">删除</button> </td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> 效果: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |