<!DOCTYPE html> <html lang="zh-CN"> <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</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css"> <style> .c1{ border: 2px solid black; background-color: red; height: 100px; } .c2{ border: 2px solid black; background-color: blue; height: 50px; } </style> </head> <body> <!--屏幕两侧留白--> <!--<div class="container">--> <!--<div style="background-color: red; height:1000px" ></div>--> <!--</div>--> <!--<!–铺满整个屏幕–>--> <!--<div class="container-fluid">--> <!--<div style="background-color: blue; height:1000px" >--> <!--</div>--> <!--</div>--> <!--栅格系统--> <div class="container-fluid"> <div class="row"> <div class="col-md-8 c1">8</div> <div class="col-md-4 c1">4</div> </div> <div class="row"> <div class="col-md-2 c1">2</div> <div class="col-md-3 c1">3</div> </div> <!--偏移--> <div class="row"> <div class="col-md-4 c1 col-md-offset">4</div> <div class="col-md-4 c1 col-md-offset-4">4</div> </div> <div class="row"> <div class="col-md-3 c1 col-md-offset-3">3</div> <div class="col-md-3 c1 col-md-offset-3">3</div> </div> <div class="row"> <div class="col-md-6 c1 col-md-offset-3">6</div> </div> <!--嵌套--> <div class="row"> <div class="col-sm-12 c1">12 <div class="row"> <div class="col-xs-8 col-sm-6 c2">6</div> <div class="col-xs-4 col-sm-6 c2">6</div> </div> </div> </div> <!--列排序--> <div class="row"> <div class="col-md-9 c1 col-md-push-3">9</div> <div class="col-md-3 c1 col-md-pull-9">3</div> </div> <!--排版--> <!--标题--> <div class="row"> <div class="col-md-12"> <h1>成功<small>失败</small></h1> <h2>成功 <small>失败</small></h2> <h3>成功<small>失败</small></h3> <h4>成功<small>失败</small></h4> <h5>成功 <small>失败</small></h5> <h6>成功<small>失败</small></h6> </div> </div> <!--页面主体--> <p>言不由衷</p> <!--中心内容让段落突出显示。--> <p class="lead">中心内容</p> <!--文本高亮显示--> <p class="lead"><mark>中心</mark>内容</p> <del>被删除的文本</del> <s>无用文本</s> <ins>插入文本</ins> <u>带下划线文本</u> <small>小号文本.</small> <strong>着重</strong> <em>斜体</em> <p class="text-left">左对齐</p> <p class="text-center">居中</p> <p class="text-right">右对齐</p> <p class="text-justify">两端对齐</p> <p class="text-nowrap">去掉空格</p> <!--改变大小写--> <p class="text-lowercase">Lowercased</p> <p class="text-uppercase">Uppercased</p> <p class="text-capitalize">Capitalized text</p> <!--缩略语--> <abbr title="attribute">attr</abbr> <!--首字母缩略语--> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> <!--地址--> <address> <strong>陈一白</strong><br> 河北省张家口市<br> 张北县星河东路<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Chen</strong><br> <a href="mailto:#">Chen@example.com</a> </address> <!--引用--> <!--命名来源--> <blockquote> <p>讨厌我的人请闭嘴,滚犊子是你最好的出路</p> <footer>陈一白</footer> </blockquote> <blockquote class="blockquote-reverse"> <p>讨厌我的人请闭嘴,滚犊子是你最好的出路</p> <footer>陈一白</footer> </blockquote> <!--无样式列表--> <ul class="list-unstyled"> <li>吃饭</li> <li>睡觉</li> <li>打打豆豆</li> </ul> <!--内联列表--> <ul class="list-inline"> <li>吃饭</li> <li>睡觉</li> <li>打打豆豆</li> </ul> <!--描述--> <dl> <dt>成龙</dt> <dd>歌手,演员,慈善家,功夫巨星</dd> <dt>詹姆斯</dt> <dd>NBA篮球运动员,篮球第一人</dd> </dl> <!--水平描述--> <dl class="dl-horizontal"> <dt>成龙</dt> <dd>歌手,演员,慈善家,功夫巨星</dd> <dt>詹姆斯</dt> <dd>NBA篮球运动员,篮球第一人</dd> </dl> <!--用户输入--> <!--通过 <kbd> 标签标记用户通过键盘输入的内容。--> <p>按住<kbd>shift</kbd>健可进行批量操作</p> <!--代码块--> <pre>print(python语句)</pre> <!--变量--> <var>y</var> = <var>m</var><var>x</var> + <var>b</var> <!--程序输出--> <!--通过 <samp> 标签来标记程序输出的内容。--> <samp>过去的能不翻就不翻,翻落了灰尘,迷失了双眼</samp> <!--表格--> <!--条纹状table-striped--> <!--带边框table-bordered--> <!--鼠标移动上动table-hover--> <!--紧缩表格table-condensed--> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <!--active 鼠标悬停在行或单元格上时所设置的颜色--> <!--success 标识成功或积极的动作 绿色--> <!--info 标识普通的提示信息或动作 蓝色 --> <!--warning 标识警告或需要用户注意 橘色--> <!--danger 标识危险或潜在的带来负面影响的动作 红色--> <tr class="warning"> <td>1</td> <td>小张</td> <td>篮球</td> <td> <!--按钮加颜色btn btn-danger--> <button class="edit btn btn-danger">编辑</button> <button class="delete btn btn-info">删除</button> </td> </tr> <tr> <td>2</td> <td>小李</td> <td>足球</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> <tr> <td>3</td> <td>小王</td> <td>羽毛球</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> <tr> <td>4</td> <td>小周</td> <td>乒乓球</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> </tbody> </table> </div> </body> </html>
表单
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword3">Password</label> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> <div class="input-group-addon">.00</div> </div> </div> <button type="submit" class="btn btn-primary">Transfer cash</button> </form>
<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> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
登录表单
<!DOCTYPE html> <html lang="zh-CN"> <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</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css"> <style> body{ background-color: rgba(0,0,0,0.4); } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 100px"> <form class="form-horizontal"> <h2 class="text-center">请登录</h2> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">用户名</label> <div class="col-sm-9"> <input type="text" class="form-control" id="inputEmail3" placeholder="用户名"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">密码</label> <div class="col-sm-9"> <input type="password" class="form-control" id="inputPassword3" placeholder="密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"> <label> <input type="checkbox">记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button type="button" class="btn btn-default btn-block btn-primary">登录</button> </div> </div> </form> </div> </div> </div> </body> </html>
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form>