Bootstrap学习笔记

发布时间：2020-12-17 21:07:34 所属栏目：安全来源：网络整理

导读：? 一、布局： 1.12列栅格系统，支持列偏移 ??? div class="row" ?? ??? ?div class="span4".../div ?? ??? ?div class="span4 offset4".../div ??? /div 2.划定内容区域 ??? body ?? ??? ?div class="container" ?? ??? ?... ?? ??? ?/div ??? /body 3.支持

一、布局： 1.12列栅格系统，支持列偏移 ??? <div class="row"> ?? ??? ?<div class="span4">...</div> ?? ??? ?<div class="span4 offset4">...</div> ??? </div> 2.划定内容区域 ??? <body> ?? ??? ?<div class="container"> ?? ??? ?... ?? ??? ?</div> ??? </body> 3.支持流式布局 ??? <div class="container-fluid"> ?? ??? ?<div class="row-fluid"> ?? ??? ??? ?<div class="span2"> ?? ? ?? ??? ??? ?</div> ?? ??? ??? ?<div class="span10"> ?? ??? ? ?? ??? ??? ?</div> ?? ??? ?</div> ??? </div> 二、排版： 1.标题 ??? h1,h2,h3,h4,h5,h6 2.段落 ??? <p>...</p> ??? <p class="lead">段落突出显示</p> 4.强调 ??? <strong>粗体</strong>? ??? <em>斜体</em> 5.缩写 ??? <abbr class="initialism" title="完整信息">缩写</abbr> 6.引用 ??? <blockquote class="pull-right"> ?? ??? ?<p>内容</p> ?? ??? ?<small>出处</small> ??? </blockquote> 7.颜色警示 ??? <p class="muted">减弱</p> ??? <p class="text-warning">警告</p> ??? <p class="text-error">错误</p> ??? <p class="text-info">提示</p> ??? <p class="text-success">成功</p> 三、列表 1.无序 ??? <ul> ?? ??? ?<li>无序列表</li> ??? </ul> 2.有序 ??? <ol> ?? ??? ?<li>有序列表</li> ??? </ol> 3.无样式 ??? <ul class="unstyled"> ?? ??? ?<li>无样式列表</li> ??? </ul> 4.描述 ??? <dl class="dl-horizontal"> ?? ??? ?<dt>定义</dt> ?? ??? ?<dd>描述</dd> ??? </dl> 四、表格 ??? <table class="table table-striped table-bordered table-condensed"> ?? ??? ?<caption>标题</caption> ?? ??? ?<thead> ?? ??? ???? <tr class="success"> ?? ??? ??? ?<th>表头</th> ?? ??? ??? ?<th>...</th> ?? ??? ???? </tr> ?? ??? ?</thead> ?? ??? ?<tbody> ?? ??? ???? <tr class="error"> ?? ??? ??? ?<td>错误内容</td> ?? ??? ??? ?<td>...</td> ?? ??? ???? </tr> ?? ???? <tr class="warning"> ?? ??? ??? ?<td>警告内容</td> ?? ??? ??? ?<td>...</td> ?? ??? ???? </tr> ??????????? <tr class="info"> ?? ??? ??? ?<td>提示内容</td> ?? ??? ??? ?<td>...</td> ?? ??? ???? </tr> ?? ??? ?</tbody> ??? </table> 五、表单 1.布局 ??? <form class="form-horizontal"> ?? ??? ?<div class="control-group"> ?? ??? ???? <label class="control-label" for="inputEmail">Email</label> ?? ??? ???? <div class="controls"> ?? ??? ???????? <input type="text" id="inputEmail" placeholder="Email"> ?? ??? ???? </div> ?? ??? ?</div> ?? ??? ?<div class="control-group"> ?? ??? ???? <label class="control-label" for="inputAge">Age</label> ?? ??? ???? <div class="controls"> ?? ??? ???????? <select id="inputAge"> ?? ??? ???? <option>1</option> ?? ??? ???? <option>2</option> ?? ??? ???? <option>3</option> ?? ??? ???? <option>4</option> ?? ??? ???? <option>5</option> ?? ??? ?</select> ?? ??? ???? </div> ?? ??? ?</div> ?? ??? ?<div class="control-group"> ?? ??? ???? <div class="controls"> ?? ??? ???????? <label class="checkbox"> ?? ??? ???????????? <input type="checkbox"> Remember me ?? ??? ???????? </label> ?? ??? ???????? <button type="submit" class="btn">Sign in</button> ?? ??? ???? </div> ?? ??? ?</div> ??? </form> 2.控件前置/后置 ??? <div class="input-prepend input-append"> ?? ??? ?<span class="add-on">前置字符</span> ?? ?<button class="btn" type="button">前置按钮</button> ?? ??? ?<input class="span2" id="appendedPrependedInput" type="text"> ?? ??? ?<span class="add-on">后置字符</span> ?? ?<div class="btn-group"> ?? ???? <button class="btn dropdown-toggle" data-toggle="dropdown"> ?? ??? ?Action <span class="caret"></span> ?? ???? </button> ?? ???? <ul class="dropdown-menu"> ?? ??? ?后置按钮菜单 ?? ???? </ul> ?? ?</div> ??? </div> 3.控件大小设置 ??? <input class="input-mini" type="text" placeholder=".input-mini"> ??? <input class="input-small" type="text" placeholder=".input-small"> ??? <input class="input-medium" type="text" placeholder=".input-medium"> ??? <input class="input-large" type="text" placeholder=".input-large"> ??? <input class="input-xlarge" type="text" placeholder=".input-xlarge"> ??? <input class="input-xxlarge" type="text" placeholder=".input-xxlarge"> 利用栅格系统 ??? <div class="controls"> ??????? <input class="span5" type="text" placeholder=".span5"> ??? </div> ??? <div class="controls controls-row"> ??????? <input class="span4" type="text" placeholder=".span4"> ??????? <input class="span1" type="text" placeholder=".span1"> ??? </div> 4.提交按钮 ??? <div class="form-actions"> ?? ??? ?<button type="submit" class="btn btn-primary">保存</button> ?? ??? ?<button type="button" class="btn">取消</button> ??? </div> 5.控件提示 ??? <input type="text"><span class="help-inline">短提示</span> ??? <input type="text"><span class="help-block">长提示</span> 6.控件状态 ??? <input class="span3" type="email" required />必填 ??? <input type="text" disabled />禁用 ??? <span class="uneditable-input">只读</span> ?? ? ??? <div class="control-group warning"> ?? ??? ?<label class="control-label" for="inputWarning">警告</label> ?? ??? ?<div class="controls"> ?? ??? ???? <input type="text" id="inputWarning"> ?? ??? ???? <span class="help-inline">Something may have gone wrong</span> ?? ??? ?</div> ??? </div> ??? <div class="control-group error"> ?? ??? ?<label class="control-label" for="inputError">错误</label> ?? ??? ?<div class="controls"> ?? ??? ???? <input type="text" id="inputError"> ?? ??? ???? <span class="help-inline">Please correct the error</span> ?? ??? ?</div> ??? </div> ??? <div class="control-group info"> ?? ??? ?<label class="control-label" for="inputError">提示</label> ?? ??? ?<div class="controls"> ?? ??? ???? <input type="text" id="inputError"> ?? ??? ???? <span class="help-inline">Please correct the error</span> ?? ??? ?</div> ??? </div> ??? <div class="control-group success"> ?? ??? ?<label class="control-label" for="inputSuccess">成功</label> ?? ??? ?<div class="controls"> ?? ??? ???? <input type="text" id="inputSuccess"> ?? ??? ???? <span class="help-inline">Woohoo!</span> ?? ??? ?</div> ??? </div> 六、按钮 1.按钮状态 ??? <button class="btn" type="button">默认</button> ??? <button class="btn btn-primary" type="button">首要</button> ??? <button class="btn btn-info" type="button">信息</button> ??? <button class="btn btn-success">成功</button> ??? <button class="btn btn-warning">警告</button> ??? <button class="btn btn-danger">危险</button> ??? <button class="btn btn-inverse">相反</button> ??? <button class="btn btn-link" type="button">链接</button> 2.按钮大小 ??? <button class="btn btn-large" type="button">大号</button> ??? <button class="btn" type="button">默认大小</button> ??? <button class="btn btn-small" type="button">小号</button> ??? <button class="btn btn-mini" type="button">迷你</button> ??? <button class="btn btn-large btn-block" type="button">最大</button> 3.搭载元素 <a> <button> <input> 七、图片 ??? <img src="..." class="img-rounded">圆角 ??? <img src="..." class="img-circle">圆形 ??? <img src="..." class="img-polaroid">带边框八、图标 1.使用 ??? <i class="icon-search"></i> 有120个图标供选择 ??? <i class="icon-search icon-white"></i> 图标反白 2.注意 ??? 图标和文字间要留空格

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!