############### bootstrap简介 ################
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。
中文地址：http://www.bootcss.com/，下载用于生产环境的 Bootstrap
############### bootstrap布局容器和栅格系统 ################
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>bootstrap第一个示例</title> <!--条件这个viewport来适应手机等移动端屏幕的展示--> <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> <!-- Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。 <div class="container-fluid"> ：用于 100% 宽度，占据全部视口（viewport）的容器。 --> <div class="container"> <!--栅格系统： 每一行分成12列， 可以定义每一个标签占据的列数col-md-1，中等屏幕桌面显示器，col-xs-4，超小屏幕手机 --> <!--“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，--> <div class="row"> <!--可以定义每一个标签占据的列数col-md-1，中等屏幕桌面显示器，col-xs-4，超小屏幕手机--> <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"> <!--使用 .col-md-offset-* 类可以将列向右侧偏移。--> <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> <!--如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。--> <div class="col-md-6">占6列的div</div> </div> <div class="row"> <!--可以往前推--> <div class="col-md-3 col-md-push-9">占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>
############### bootstrap媒体查询-这是能够根据不同设备适配的原理 ################
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>媒体查询</title> <style> .c { height: 100px; width: 100px; } .c1 { background-color: red; } /*当打开网页的设备是一个显示器设备，并且显示器的宽度小于600px时，使用下面的样式*/ @media screen and (max- 400px) { .c1 { background-color: green; } } </style> </head> <body> <div class="c c1"></div> </body> <html>
############### bootstrap的常用样式 ################
<!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"> <!--HTML 中的所有标题标签，<h1> 到 <h6> 均可使用--> <h1>h1. Bootstrap heading <!--在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。--> <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> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。--> <p> 世情薄，人情恶，世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶 </p> <!--通过添加 .lead 类可以让段落突出显示。变大，变粗--> <p class="lead"> 世情薄， <!--对于被删除的文本使用 <del> 标签。--> <del>人情恶</del> ，世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶 </p> <!--use the <mark> tag.高亮显示--> <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> <!--让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。--> <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:#">first.last@example.com</a> </address> <!--添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。--> <blockquote> <p>技术的提升只是量的积累，思想的提升才是质的飞跃。</p> <footer>老男孩思想</footer> </blockquote> <!--将所有元素放置于同一行。--> <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> 标签包裹内联样式的代码片段。--> <code><div></code> <code>print("hello world!")</code> <!--通过 <kbd> 标签标记用户通过键盘输入的内容。--> <p>按住键盘上的<kbd>ctrl</kbd>键，就支持批量操作</p> <!--添加 .table-bordered 类为表格和其中的每个单元格增加边框。--> <!--通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。--> <!--通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。--> <!--通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。--> <table class="table table-bordered table-striped table-hover table-condensed"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <!--通过这些状态类可以为行或单元格设置颜色。--> <!-- .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 --> <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> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
############### bootstrap登陆页面实例 ################
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>登录注册示例</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style> body { background-color: #eee; } #login-box { margin-top: 100px; } </style> </head> <body> <div class="container"> <div class="row"> <div id="login-box" class="col-md-4 col-md-offset-4"> <h3 class="text-center">请登录</h3> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">Email</label> <div class="col-sm-9 has-error"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> <span class="help-block">邮箱不能为空</span> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="submit" class="btn btn-primary ">Sign in</button> </div> </div> </form> </div> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
############### bootstrap组件-fontawesome图标 ################
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Font-awesome</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!--引入font-awesome这是一个地址 也可以下载到本地，--> <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <!-- bootstrap的组件，那些小图标，一般不用他的，我们使用fontawesome --> <i class="fa fa-weixin" style="color: green"></i> <i class="fa fa-weibo" aria-hidden="true"></i> <i class="fa fa-weibo fa-lg" aria-hidden="true"></i> <i class="fa fa-weibo fa-2x" aria-hidden="true"></i> <i class="fa fa-weibo fa-3x" aria-hidden="true"></i> <i class="fa fa-weibo fa-5x" aria-hidden="true"></i> <i class="fa fa-weibo fa-5x fa-rotate-90" aria-hidden="true"></i> <i class="fa fa-weibo fa-5x fa-rotate-180" aria-hidden="true"></i> <i class="fa fa-weibo fa-5x fa-rotate-270" aria-hidden="true"></i> <i class="fa fa-weibo fa-5x fa-flip-horizontal" aria-hidden="true"></i> <i class="fa fa-weibo fa-5x fa-flip-vertical" aria-hidden="true"></i> <span class="fa-stack fa-5x"> <i class="fa fa-weibo fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger"></i> </span> <button class="btn btn-danger"><i class="fa fa-trash-o"></i> 删除</button> <div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> 主页</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> 分类</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> 应用</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> 设置</a> </div> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
############### bootstrap组件-常用组件 ################
<!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"> <style> #d1 { background-color: red; } #d2 { background-color: yellow; } #d3 { background-color: deeppink; } </style> <!-- 地址：https://v3.bootcss.com/components/ 字体图标，使用fontawesome 按钮，下拉菜单，按钮式的下拉菜单 输入框，导航条，面包屑路径式的导航条， 分页，标签， 进度条，列表，面板，太多了，使用这个，可以使得这个页面高大上， --> </head> <body> <div class="container"> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Middle2</button> <button type="button" class="btn btn-default">Right</button> </div> <!--标签页--> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#d1" data-toggle="tab">个人主页</a></li> <li role="presentation"><a href="#d2" data-toggle="tab">个人详情页</a></li> <li role="presentation"><a href="#d3" data-toggle="tab">消息页面</a></li> </ul> <div class="tab-content"> <div role="tabpanel" id="d1" class="tab-pane active">这是个人主页</div> <div role="tabpanel" id="d2" class="tab-pane">这是一个详情页</div> <div role="tabpanel" id="d3" class="tab-pane">消息页面</div> </div> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Help</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
############### bootstrap的js插件 ################
<!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> <!-- bootstrap的js插件 1，轮播图 2，模态框 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="./imgs/banner_1.jpg" alt="..."> <div class="carousel-caption"> <h1>第一页介绍</h1> <p>老实人的恶毒，像...</p> </div> </div> <div class="item"> <img src="./imgs/banner_2.jpg" alt="..."> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="./imgs/banner_3.jpg" alt="..."> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <hr> <button class="btn btn-success" data-toggle="modal" data-target="#i1">点我弹出</button> <div id="i1" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title">模态框</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script src="jquery-3.2.1.min.js"></script> <!--使用bootstrap的js插件，需要引入这个bootstrap的js文件，--> <script src="bootstrap/js/bootstrap.min.js"></script> <script> $('.carousel').carousel({ interval: 2000 }); </script> </body> </html>
############### 结束线 ################