bootstrap 入门
bootstrap 入门
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>bootstrap</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="../scripts/jquery-1.12.2.min.js" type="text/javascript"></script> <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script> </head> <body style="background-color: #ccc;"> <div class="container" style="background-color: #fff;"> <div class="text-center">bootstrap移动设备优先 封装html css js</div> <ul class="list-inline"> <!--左浮动--> <li>html</li> <li>css</li> </ul> <hr/> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover"> <tr> <td>名字</td><td>年龄</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td> </tr> <tr class="danger"> <td>cat</td><td>12</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td> </tr> <tr> <td>cat2</td><td>22</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td> </tr> </table> </div> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </form> <p>栅格</p> <div class="row"> <div class="col-md-4">.container 固定宽度且响应式 .container-fluid 100%宽度 .h1 ～ .h6 .text-left 文本左对齐 .list-unstyled 无符号 .list-inline(行内块） .active .success 成功颜色 .warning 警告颜色 响应式表格 meta http-equiv="X-UA-Compatible" content="IE=edge"</div> <div class="col-md-4 col-md-offset-4">.container 固定宽度且响应式 .container-fluid 100%宽度 .h1 ～ .h6 .text-left 文本左对齐 .list-unstyled 无符号 .list-inline(行内块） <p>表格</p> .table .table-striped 表格隔行变色 .table-bordered 带边框的表格 .table-hover 鼠标悬停效果 </div> </div> <hr/> <div class="row"> <div class="col-md-4">.container 固定宽度且响应式 .container-fluid 100%宽度 .h1 ～ .h6 .text-left 文本左对齐 .list-unstyled 无符号 </div> <div class="col-md-8"> <div class="row"> <div class="col-md-6" style="height: 100px; background-color: red;"></div> <div class="col-md-6" style="height:100px;background-color: green;"></div> </div> .container 固定宽度且响应式 .container-fluid 100%宽度 .h1 ～ .h6 .text-left 文本左对齐 .list-unstyled 无符号 </div> </div> <hr/> <form class="form-horizontal"> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email address</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">password</label> <div class="col-sm-10"> <input type="email" class="form-control" id="password" placeholder="password"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">upload</label> <div class="col-sm-10"> <input type="file"> <p class="help-block">the pic is jpg/gif/png</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">checkbox</label> <div class="col-sm-10"> <label class="checkbox-inline"><input type="checkbox" > 1 </label> <label class="checkbox-inline"><input type="checkbox" > 2 </label> <label class="checkbox-inline"><input type="checkbox" > 3 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">intro</label> <div class="col-sm-10"> <textarea rows="5" placeholder="please input your mes"></textarea> </div> </div> <div class="col-sm-10 col-sm-offset-2"> <button class="btn btn-danger btn-lg" type="button">submit</button> </div> </form> <hr/> <h2 class="page-header">图片</h2> <div class=""> <img class="img-responsive img-circle center-block" src="../img/1.png" width="500"/> <p>meta name="viewport" content="width=device-width,initial-scale=1" IE兼容模式 meta http-equiv="X-UA-Compatible" content="IE=edge"</p> </div> <hr/> <p class="lead mark">hello</p> <abbr class="initialism" title="search engine ">seo</abbr> <blockquote class="blockquote-reverse"> <h1>西游记</h1> <footer>吴承恩</footer> </blockquote> <dl class="dl-horizontal"> <dt>标题1</dt> <dd>1</dd> <dt>标题2</dt> <dd>2</dd> </dl> <hr/> <!--关闭按钮--> <p style="min-height: 150px; background-color: #36a701"> <button type="button" class="close" id="close" >×</button> </p> <script> // 关闭 $("#close").click(function () { $("#close").parent().hide(); }); </script> <!--大屏幕显示大按钮，小屏幕显示小按钮--> <button type="button" class="btn btn-primary visible-md-block btn-lg">button</button> <button type="button" class="btn btn-success visible-sm-block btn-md">button</button> 超小屏幕隐藏 my title <h1 class="hidden-xs">my title</h1> </div> <hr/> .container 固定宽度且响应式 .container-fluid 100%宽度 .h1 ～ .h6 .text-left 文本左对齐 .list-unstyled 无符号 .list-inline(行内块） <p>表格</p> .table .table-striped 表格隔行变色 .table-bordered 带边框的表格 .table-hover 鼠标悬停效果 .table-condensed 紧凑的表格 行或单元格背景色 状态类 .active .success 成功颜色 .warning 警告颜色 响应式表格 .table 放在 .table-responsive元素内，可创建响应式表格 当屏幕宽小于768px 表格会出现滚动条 <p>表单</p> .form-group 表单分组 .form-control 表单样式 input .form-inline 用于form元素，使元素一行排列 .form-horizontal 水平排列的表单 详情见 http://v3.bootcss.com/css .sr-only 隐藏 <p>响应式布局</p> meta name="viewport" content="width=device-width,initial-scale=1" IE兼容模式 meta http-equiv="X-UA-Compatible" content="IE=edge" 栅格 列偏移 .col-md-offset-2 向右偏移2个列 .lead 加深 .mark 高亮 百度快照 想改变默认样式 ，直接样式表重写 .mark{} h5标准： br readonly html lang="zh-CN" 引入 css js 不需要 type 属性 使用根路径 属性顺序:重要的先写 <div class="" id="" name="" src="" alt="" aria-label="" role=""></div> 少用标签 避免js生成标签 不用 submit <button id="123" type="button">button</button> 样式表 body {} 右花括号占一行 每条样式都换行 heaer, footer {} opacity: .1; 表示 0.1 color:#abc; 小写，简写 class 命名方式：text-center 父级元素加样式 .h1-div-a <h1><div><a>aa</a></div></h1> 简单的写一行就行 .div {color:red;} </body> </html>
浙公网安备 33010602011771号