下载
引用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> <script src="jquery-3.2.1.min.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </head> <body> <button class="btn btn-info">测试demo</button> </body> </html>
Bootstrap中的排版
标题设置
<span class="h1">标题一</span><small>小标题</small> #使用class可直接使用样式
字体-段落设置
<!-- mark 标签为做特殊标记(黄色底边) --> <!-- del 为删除文本 --> <!-- ins 为插入文本,效果为文本多了下划线--> <!-- strong 加粗字体-->
<!-- em 斜体 --> <!-- class="text-left" 文字左对齐(test-right为右对齐,text-center中心对齐 .text-justify:两端对齐)--> <!-- class="text-lowercase" 大写变小写, text-uppercase 小写变大写 text-capitalize 首字母变大写-->
例:
<body> <p><mark>计算机</mark>科学中,<del>算法的时间</del>复杂度是一个函数,<ins>它定量描述</ins>了该算法的运行时间, 时间复杂度常用<strong>大O符号</strong>(大O符号(Big O notation)是用于描述函数渐进行为的数学符号</p> <p>在计算机科学中,<em>它在分</em>析算法复杂性<i>的方面非常有</i>用。)表述,使用这种方式时, #这里被<i></i>圈起来的也会是斜体 时间复杂度可被称为是渐近的,它考察当输入值大小趋近无穷时的情况</p> <p class="text-left">test</p> <p class="text-center">test</p> <p class="text-right">test</p> <p class="text-lowercase">SDAE</p> </body>
表格
<!-- table 基础表格-->
<!-- table-striped 添加水平线,斑马线表格--> <!-- table-bordered 边框表格--> <!-- table-hover 鼠标经过某个表格时表格变高亮-->
<!-- table-responsive 响应式表格,窗口大小变化时会自动出现滚动条--> <!-- 行标签里添加class(danger,active,info,warning) --表格产生出颜色-->
- .text-muted:提示,使用浅灰色(#999)
- .text-primary:主要,使用蓝色(#428bca)
- .text-success:成功,使用浅绿色(#3c763d)
- .text-info:通知信息,使用浅蓝色(#31708f)
- .text-warning:警告,使用黄色(#8a6d3b)
- .text-danger:危险,使用褐色(#a94442)
例:
<body> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> </thead> <tbody> <tr class="info"> <!-- 可选有 active waring sucess danger--> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table>
表单
<!-- placeholder=" " 输入框的提示信息--> <!-- class="form-control" 表单控件,边框美化,点进输入框,边框会有颜色--> <!-- class="form-group" 底边距有15px的距离--> <!-- class="form-inline" 水平排列 --> <!-- input-lg/input-sm 使输入框变的更大/变小--> <!-- class="control-label" 可控制的lable--> <!-- class="sr-only" 使提示信息消失--> <!-- has-warning 显示报错信息 -->
<!-- class="form-horizontal" 水平表单,标签居左,表单控件靠右(输入框)-->
<select>下拉选择</select>
<textarea>文本域</textarea>
<type="checkbox"> 复选框
<type='radio'> 单选按钮
示例:
<form class="form-inline"> <div class="form-group has-warning"> <label class="sr-only control-label" for="">这是一个输入框</label> <input type="text" class="form-control" input-lg placeholder="输入。。。"/> </div> </form>
<form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> </div> </form> <br> <br> <br> <h3>示例2</h3> <form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告状态</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form>
按钮
<!-- class="btn btn-default" 按钮效果--> <!-- class="btn btn-success" 改变按钮颜色--> <!-- class="btnbtn-lg" 使按钮变大--> <!-- class="btn active" 使按钮显示为按下去的状态--> <!-- disabled="disabled" 通过disabled 属性使按钮显示为禁止状态-->
<!-- class="disabled" 通过添加类名禁用按钮-->
<!-- <input id="disabledTextInput" 表示禁止输入-->
<!-- <select id="disabledSelect" 表示禁止选择--> <!-- class="btn-block" 按钮全行显示-->
<!-- class="btn btn-danger/btn-waring"
示例:
<body> <button class="btn btn-default btn-lg active">默认按钮</button> btn-lg 表示大型按钮 sm表示小型按钮 <button class="btn btn-success">成功按钮</button> <button class="btn btn-primary btn-block">主要按钮</button> <button class="btn btn-warning" disabled="disabled">警告按钮</button> <button class="btn btn-danger">危险按钮</button> <a class="btn btn-link" href="#">a标签链接按钮</a> #a标签做按钮 <a class="btn btn-info"> 信息按钮 </body>