bootstrap基础
下载
引用：
<!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>
