bootstrap使用笔记
文本颜色控制类
<p class="text-muted">我是muted</p> <p class="text-primary">我是primary</p <p class="text-success">我是success</p> <p class="text-info">我是info</p> <p class="text-warning">我是warning</p> <p class="text-danger">我是danger</p>
栅格化布局（一般包含在container内 让居中显示）
<div class="row"> <div class="col-8 offset-2 text-left text-danger">请务必用中文填写正确</div> <div class="col-8 offset-2 marginTop10"> <div class="row"> <span class="col-3">发票抬头:</span> <span class="col-8"><input type="text" class="form-control" placeholder="发票抬头"></span> </div> </div> <div class="col-8 offset-2 marginTop10"> <div class="row"> <span class="col-3">纳税人识别号:</span> <span class="col-8"><input type="text" class="form-control" placeholder="纳税人识别号"></span> </div> </div> </div>
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
.col-xs-
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
.col-sm-
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
.col-md-
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
.col-lg-
不同分辨率下展示不一样的元素大小，很爽，一直保持居中
<div style="background:green;" class="col-xs-8 col-xs-offset-2 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 border"> <div class="row"> <div class="col"> <p>请输入您的登录信息</p> </div> </div> </div>
复选框
<div class="checkbox"> <label><input type="checkbox" value="">选项 1</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">选项 2</label> </div>
单选框
<div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1 </label> </div>
加标题与副标题
<div class="h3 text-center">About Conference Hotel</div> <div class="h6 text-danger text-center">Offensives are filled out by people in the conference hotel accommodation needs </div>
文本对齐方式
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justifyt">两端对齐</p>
删除、缩小、标记标签 ：del small mark
bootstrap会将全局字体设置为14px、行高为1.28 为p标签 添加10px的下边距
指定字母大小写：
<p class="text-lowercase">ssssdDDSFdfsfsg</p> <p class="text-uppercase">ssssdDDSFdfsfsg</p> <p class="text-capitalize">ssssdDDSFdfsfsg</p>
特殊标签的使用
<kbd>cmd</kbd> <pre>some coding...</pre> <var>x</var>=<var>y</var>+<var>z</var> <samp>输出效果</samp>
表格
<div class="container">//table-responsive 响应式表格
<table class="table table-striped table-bordered table-hover table-condensed">//分别代表 声明表格 斑马线 加边框 鼠标悬停效果 紧凑表格
<thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr class="active"> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr class="success"> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td> </tr> <tr class="info"> <td>单元格7</td> <td>单元格8</td> <td>单元格9</td> </tr> <tr class=""> <td>单元格10</td> <td>单元格11</td> <td>单元格12</td> </tr> <tr class="warning"> <td>单元格13</td> <td>单元格14</td> <td>单元格15</td> </tr> <tr class="danger"> <td>单元格13</td> <td>单元格14</td> <td>单元格15</td> </tr> </tbody> </table> </div>
表单
<div role="from" class="form-inline"> <!-- 指定form-inline 为内敛表单 不指定则为100%占满父容器 --> <div class="form-group"> <!-- sr-only:代表隐藏label标签 必须得带label标签 --> <label class="sr-only">用户名</label> <input type="date" class="form-control" placeholder="user"> </div> <div class="form-group"> <label class="sr-only">邮箱</label> <input type="email" class="form-control" placeholder="email"> </div> <div class="form-group"> <label class="sr-only">密码</label> <input type="password" class="form-control" placeholder="password"> </div> <div class="form-group"> <label class="sr-only">选择文件</label> <input type="file" class="form-control"> <p class="help-block">选择你需要的文件</p> </div> </div>
水平表单 （结合栅格化 排列出整齐的表单）
<!-- 水平表单 --> <form role="form" class="form-horizontal"> <div class="form-group"> <div class="row"> <div class="col-md-2"> <label class=" control-label">email</label> </div> <div class="col-md-10"> <!-- 加上form-control后会有圆角效果 并且占满父容器 --> <input type="email" class="form-control" placeholder="email"> </div> </div> </div> <div class="form-group"> <div class="row"> <label class="col-md-2 control-label">password</label> <div class="col-md-10"> <input type="password" class="form-control" placeholder="password"> </div> </div> </div> <!-- 复选框 --> <div class="form-group"> <div class="offset-2 col-md-10"> <div class="checkbox"> <label> <input type="checkbox">记住秘密 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-10 offset-2"> <!-- 不沾满父容器 --> <button type="submit" class="btn btn-default">提交</button> <!-- 占满父容器 --> <input type="submit" class="form-control"> </div> </div> </form>
表单下
<form role="form"> <!-- fieldset标签可以给其内的表单统一设置禁用状态 --> <fieldset disabled> <input type="text" placeholder="利用fielset标签 设置警用"> </fieldset> <input type="text" class="form-control"> <textarea class="form-control" cols="2" rows="4">hello</textarea> <!-- 复选框 --> <div class="checkbox"> <label> <input type="checkbox" value="">吃橘子 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="">吃苹果 </label> </div> <!-- 单选框 --> <div class="radio"> <label> <input name="sex" type="radio" checked>男 </label> </div> <div class="radio"> <label> <input name="sex" type="radio">女 </label> </div> <!-- 下拉列表 --> <!-- multiple 指定为多项下拉列表 --> <select class="form-control"> <option value="">1</option> <option value="" selected>2</option>//默认选中第二项 <option value="">3</option> <option value="">4</option> </select> <p class="form-control-static">静态提示方式</p> <input type="text" class="form-control" disabled placeholder="禁止使用"> <!-- 利用栅格指定表单大小 不过要在form-group上指定 --> <div class="form-group col-sm-5"> <label>用户ing</label> <input type="text" class="form-control" placeholder="sda"> </div> </form>
Bootstrap3系列：输入框组
按钮
<div class="container"> <div class="btn btn-default active">default</div> <div class="btn btn-primary">primary</div> <div class="btn btn-success">success</div> <div class="btn btn-warning">warning</div> <div class="btn btn-info">info</div> <div class="btn btn-link">link</div> <div class="btn btn-danger">danger</div> </div> <div class="div"> <button type="button " class="btn btn-info btn-lg">btn-lg</button> <button type="button " class="btn btn-info">默认大小</button> <button type="button " class="btn btn-info btn-sm">btn-sm</button> <button type="button " class="btn btn-info btn-xs">btn-xs</button> </div> <button type="button" class="btn btn-default btn-block">充满父级容器</button>
图片
<img src="../images/swiper/1.jpg" class="img-circle" alt="原型图片"> <img src="../images/swiper/1.jpg" class="img-rounded" alt="带圆角"> <img src="../images/swiper/1.jpg" class="img-thumbnail" alt="圆角带边框"> <img src="../images/swiper/1.jpg" alt="正常">
下拉菜单
<div class="dropdown pull-right"> <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown"> 下拉菜单 <!-- 小箭头 --> <span class="caret"></span> </button> <!-- dropdown-menu-right 使menu向右 --> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu"> <!-- dropdown-header 标题 --> <li class="dropdown-header">大写</li> <li><a role="menuitem">一</a></li> <li><a role="menuitem">二</a></li> <li><a role="">三</a></li> <li><a role="">四</a></li> <li class="dropdown-header">小写</li> <!-- divider 分割线 只能在下拉菜单中使用 --> <li class="divider"></li> <li><a role="">1</a></li> <li><a role="">2</a></li> <!-- disabled类 指定该选项无法选定 --> <li class="disabled"><a role="">3</a></li> <li><a role="">4</a></li> </ul> </div>
按钮组，按钮组工具栏。。。。。。
<div class="container"> <!-- 指定btn-group-vertical 可以让按钮组垂直排列 默认为水平排列 --> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">left</button> <button type="button" class="btn btn-default">middle</button> <button type="button" class="btn btn-default">right</button> </div> </div> <!-- 按钮组工具栏 可含多个按钮组--> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button> </div> </div> <!-- 按钮组合下拉菜单组合使用 --> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">1</button> <div class="btn-group"> <!-- 必须指定data-toggle属性 才能有效果 --> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a>点我</a></li> <li><a>点我</a></li> </ul> </div> </div> <!-- 按钮组 占满全屏 --> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default">left</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">center</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">right</button> </div> </div>
分列式下拉菜单
<div class="container"> <!-- 分列式下拉菜单 也就是小三角与按钮分开 中间会有一个分割线 实际上是两个按钮 在按钮上添加dropup类 会使小箭头向上 在button上添加btn-lg btn-sm btn-xs会让按钮组调整大小--> <div class="btn-group "> <button type="button" class="btn btn-info">这是一个下拉菜单</button> <button type="button" class="btn btn-info dropup" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a>1</a></li> <li><a>1</a></li> </ul> </div> </div>
输入框组
<div class="container"> <!-- 最基本的输入框组 --> <!-- 添加input-group-lg -sm -xs可以调整输入框组的大小 --> <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="请输入"> </div> <!-- @显示在后面 --> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入"> <span class="input-group-addon">.00</span> </div> <!-- 前后都添加 --> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="请输入"> <span class="input-group-addon">.00</span> </div> <!-- 额外的添加多选框或单选框 --> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"> </div> <!-- 额外添加一个按钮 --> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-info">go!</button> </span> <input type="text" class="form-control"> </div> <!-- 额外添加一个下拉菜单 --> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a>1</a></li> <li><a>1</a></li> </ul> </div> <input type="text" class="form-control" placeholder="额外添加一个下拉菜单"> </div> </div>
nav/tab标签的创建
<!-- 导航组 --> <!-- 标签页 --> <div class="container"> <!-- 可以将nav-tabs 改为nav-pills 使tab标签像按钮一项 --> <!-- 添加nav-stacked 可以使标签垂直展示 --> <!-- 在ul添加 nav-justified 可以让标签页充满全屏 --> <ul id="mytab" class="nav nav-pills nav-justified" role="tablist"> <li role="presentation" class="active"><a>home</a></li> <!-- 添加disable类，指定该标签页不能点击 --> <li role="presentation" class="disabled"><a>hello</a></li> <!-- 将标签页变成可下拉的标签页 --> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown"> world <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" tabindex="-1">1</a></li> <li role="presentation"><a role="menuitem">2</a></li> <li role="presentation"><a role="menuitem">3</a></li> <li role="presentation"><a role="menuitem">4</a></li> </ul> </li> </ul> </div>
上面的切换要想成功，需要添加一个jquery脚本
$("#mytab a").click(function(e){
e.preventDefault();
$(this).tab("show")
})
导航条
<!-- 导航条 --> <div class="container"> <!-- navbar-fixed-top是默认值 默认导航条在顶部 navbar-fixed-bottom指定导航条在底部 navbar-default是默认颜色 navbar-inverse:可以将导航条颜色变为黑色 --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid">
<!-- 添加一个头部 -->
<div class="navbar-header"> <a class="navbar-brand">极客</a> </div> <!-- 导航标签 --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="mytab"> <li class="active"><a>link</a></li> <li class=""><a>link</a></li> <li class=""><a>link</a></li> </ul> <!-- 在导航条里添加表单 搜索 --> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="搜索"> </div> <button type="button" class="btn btn-default">搜索</button> </form> <!-- 居右的内容 --> <ul class="nav navbar-nav navbar-right"> <li><a>link</a></li> <!-- 在导航条理指定一个下拉标菜单 --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a>1</a></li> <li><a>2</a></li> </ul> </li> </ul> </div> </div> </nav> <!-- 添加一个路径导航 --> <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> <ol class="breadcrumb"> <li><a>home</a></li> <li><a>library</a></li> <li><a>data</a></li> </ol> </nav> </div>
同样的如果tab标签像切换，需要添加上面的jquery脚本
媒体组件 media-list
<div class="container"> <div class="media"> <!-- 左侧的图片 --> <a class="media-left"> <img style="width:50px;height:50px;" src="../images/swiper/1.jpg" alt=""> </a> <!-- 内容区域 --> <div class="media-body"> <!-- 标题 --> <h4 class="media-heading">欢迎来到极客学院</h4> <p>内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 <br> 内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 </p> </div> </div> <!-- 图片在右侧 --> <div class="media"> <!-- 内容区域 --> <div class="media-body"> <!-- 标题 --> <h4 class="media-heading">欢迎来到极客学院</h4> <p>内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 <br> 内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 </p> </div> <!-- 右侧的图片 --> <a class="media-right"> <img style="width:50px;height:50px;" src="../images/swiper/1.jpg" alt=""> </a> </div> <!-- 图片上下居中显示 --> <!-- 改成media-bottom可以让图片居底显示 --> <div class="media"> <!-- 左侧的图片 --> <a class="media-left media-middle"> <img style="width:50px;height:50px;" src="../images/swiper/1.jpg" alt=""> </a> <!-- 内容区域 --> <div class="media-body"> <!-- 标题 --> <h4 class="media-heading">欢迎来到极客学院</h4> <p>内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 <br> 内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域 </p> </div> </div> <!-- 可以使用media-list来创建多个 --> <ul class="media-list"> <li class="media"> <a href="#" class="media-left"> <img src="../images/swiper/1.jpg" alt="" style="width:50px;height:50px;"> </a> <div class="media-body"> <h4>标题</h4> <p>内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容</p> </div> </li> <li class="media"> <a href="#" class="media-left"> <img src="../images/swiper/1.jpg" alt="" style="width:50px;height:50px;"> </a> <div class="media-body"> <h4>标题</h4> <p>内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容</p> <p>内容内容内容内容内容内容内容</p> </div> </li> </ul> </div>
面板（基本面板、表格面板、列表面板）
<div class="container"> <!-- 基本的面板 --> <div class="panel panel-default"> <div class="panel-body"> hello </div> </div> <!-- 带标题的面板 带底部的面板 --> <!-- 可以更改面板的样式 panel-info panel-primary panel-success panel-warning panel-danger --> <div class="panel panel-default"> <div class="panel-heading panel-danger"> 我是面板标题 </div> <div class="panel-body"> 我是面板内容 </div> <!-- 添加面板的底部 --> <div class="panel-footer panel-success"> 我是面板的底部 </div> </div> <!-- 带表格的面板 --> <div class="panel panel-default"> <div class="panel-heading"> 我是面板头部 </div> <div class="panel-body"> <p>我是面板内容</p> <table class="table"> <thead> <tr class="active"> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr class="success"> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr class="success"> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr class="success"> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> <tr class="success"> <td>表格单元格</td> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> </table> </div> <div class="panel-footer"> 我是面板底部 </div> </div> <!-- 列表面板 --> <div class="panel panel-default"> <div class="panel-heading"> 带列表的面板 </div> <div class="panel-body"> 身体 </div> <ul class="list-group"> <li class="list-group-item"> hello1 </li> <li class="list-group-item"> hello2 </li> <li class="list-group-item"> hello3 </li> <li class="list-group-item"> hello4 </li> <li class="list-group-item"> hello5 </li> </ul> </div> </div>
well与响应式容器embed-resposive
<div class="container"> <!-- 具有响应式特性的容器 embed-responsive --> <!-- embed-responsive 代表响应式 --> <!-- embed-responsive-16by9 代表16:9 可以是4by3 只有这两种比例 --> <div class="embed-responsive embed-responsive-4by3"> <iframe src="http://www.baidu.com" frameborder="0"></iframe> </div> <!-- well的使用 --> <div class="well"> 我是well </div> <!-- 指定well-lg 适应大屏 --> <div class="well well-lg"> 我是well-lg </div> <!-- 指定well-sm 使用小屏 --> <div class="well well-sm"> 我是well-sm </div> </div>
分页、翻页、标签
<!-- 分页 --> <!-- pagination-lg大分辨率下 --> <nav> <div class="pagination pagination-lg"> <!-- disabled禁止点击状态 --> <li class="disabled"><a>«</a></li> <!-- 当前状态 --> <li class="active"><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> <li><a>4</a></li> <li><a>5</a></li> <li><a>»</a></li> </div> </nav> <nav> <div class="pagination"> <!-- disabled禁止点击状态 --> <li class="disabled"><a>«</a></li> <!-- 当前状态 --> <li class="active"><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> <li><a>4</a></li> <li><a>5</a></li> <li><a>»</a></li> </div> </nav> <!-- 小分辨率下 --> <nav> <div class="pagination pagination-sm"> <!-- disabled禁止点击状态 --> <li class="disabled"><a>«</a></li> <!-- 当前状态 --> <li class="active"><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> <li><a>4</a></li> <li><a>5</a></li> <li><a>»</a></li> </div> </nav> <!-- 翻页效果 --> <nav class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">下一页</a></li> </nav> <!-- 带箭头的分页效果 --> <nav class="pager"> <li class="previous disabled"><a href="#">←向前</a></li> <li class="next"><a href="#">向后→</a></li> </nav> <!-- 标签的使用 label --> <span class="label" style="color:black;">默认</span> <span class="label label-default">默认</span> <span class="label label-primary">primary</span> <span class="label label-success">success</span> <span class="label label-info">info</span> <span class="label label-warning">warning</span> <span class="label label-danger">danger</span> <h4>我时标题<span class="label label-success">标题的描述</span></h4>
巨幕和徽章的使用
<!-- 巨幕的使用 --> <div class="jumbotron"> <div class="container"> <h1>hello world!</h1> <p>欢迎来到极客学院</p> <p><a href="#" class="btn btn-success btn-lg" role="button">learn more</a></p> </div> </div> <!-- 标签的使用 ie8不会支持 --> <div class="container"> <a href="#">短信消息<span class="badge">30</span></a> <button class="btn btn-success">message<span class="badge">100</span></button> </div> <!-- 在导航里使用徽章 --> <ul class="nav nav-pills" role="rablist"> <li role="presentation" class="active"><a href="#">home<span class="badge">10</span></a></li> <li role="presentation" class=""><a href="#">pills<span class="badge">100</span></a></li> <li role="presentation" class=""><a href="#">message<span class="badge">1</span></a></li> </ul>
页头与缩略图的使用
<!-- 页头的使用 --> <div class="page-header"> <h1>极客学院<small>欢迎您</small></h1> </div> <!-- 缩略图的使用 --> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../images/swiper/1.jpg" alt=""> </a> </div> </div> <!-- 缩略图自定义内容 --> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../images/swiper/1.jpg" alt=""> <h3>这是一个美女哦</h3> <p>我知道你们都是喜欢看美女的，因为美女养眼啊</p> <p> <a href="#" class="btn btn-primary" role="button">不选</a> <a href="#" class="btn btn-primary" role="button">选我哦</a> </p> </a> </div> </div>
警告框的使用
<!-- 警告框的使用 --> <div class="container"> <div class="alert" role="alert"> 默认 </div> <div class="alert alert-success" role="alert"> success </div> <div class="alert alert-warning" role="alert"> warning </div> <div class="alert alert-info" role="alert"> info </div> <div class="alert alert-danger" role="alert"> danger </div> <!-- 可关闭的警告框 --> <div class="alert alert-warning"> <button type="button" class="close" role="button" data-dismiss="alert"> <span aria-disabled="true" >×</span> </button> <strong>欢迎来到极客学院！</strong> </div> <!-- 带超链接的警告框 --> <div class="alert alert-info"> 如有疑问，请来找 <a href="#" class="alert-link">极客学院</a> </div> </div>
进度条的使用
<!-- 进度条 --> <div class="container"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" style="width:50%;"> <span class="sr-only">60%</span> </div> </div> <!-- 带数值的进度条 --> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> 30% </div> </div> <!-- 不同颜色的进度条 --> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> 30% </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> 30% </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> 30% </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> 30% </div> </div> <!-- 带纹理/条纹的进度条 --> <!-- 加上active 就有动态条纹的动效 --> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;"> 30% </div> </div> <!-- 堆叠效果 的进度条 --> <div class="progress"> <div class="progress-bar progress-bar-striped active" style="width:40%;">40%</div> <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:50%;">50%</div> <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:10%;">10%</div> </div> </div>
列表组
<div class="container"> <ul class="list-group"> <li class="list-group-item"><span class="badge">30</span>哈哈</li> <li class="list-group-item">哈哈</li> <li class="list-group-item">哈哈</li> </ul> <!-- 可点击的列表组 --> <ul class="list-group"> <li class="list-group-item"><a href="#">可点击</a></li> <li class="list-group-item"><a href="#">可点击</a></li> </ul> <!-- 带颜色的列表组 --> <ul class="list-group"> <li class="list-group-item list-group-item-success"><a href="#">可点击</a></li> <li class="list-group-item list-group-item-warning"><a href="#">可点击</a></li> <li class="list-group-item list-group-item-info"><a href="#">可点击</a></li> <li class="list-group-item list-group-item-danger"><a href="#">可点击</a></li> </ul> <!-- 定制内容 --> <div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">标题</h4> <p class="list-group-item-text">文本内容</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">标题</h4> <p class="list-group-item-text">文本内容</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">标题</h4> <p class="list-group-item-text">文本内容</p> </a> </div> </div>
基本模态框的使用（就是弹窗） 这就到了 插件部分
<!-- 模态框 --> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLadel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">modal title</h4> </div> <div class="modal-body"> content </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save</button> </div> </div> </div> </div>
执行以下代码，使上述模态框（弹窗）显示
$("#myModal").modal("show");
模态框（下），使用按钮控制模态框的显示
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 启动modal </button> <!-- 模态框 --> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLadel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">modal title</h4> </div> <div class="modal-body"> content </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">save</button> </div> </div> </div> </div>
模态框中带输入框，
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"> 启动大modal </button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> 这是一个大的模态框，这里省去了header和footer部分 </div> </div> </div> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"> 启动小modal </button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> 这是一个小的模态框，这里省去了header和footer部分 </div> </div> </div> <!-- 带输入框的模态框 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">open modal for @mdo </button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="exampleModalLabel">new message</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="control-label">recipient</label> <input type="text" class="form-control" id="recipient-name"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> <button type="button" class="btn btn-primary">send</button> </div> </div> </div> </div> //执行下面jquery脚本，会改变模态框的内容 $("#exampleModal").on("show.bs.modal",function(event){ var button=$(event.relatedTarget); var recipient=button.data("whatever"); var modal=$(this); modal.find(".modal-title").text("new message to"+recipient); modal.find(".modal-body input").val(recipient); })
下拉列表
<div class="dropdown"> <button class="btn btn-default" id="dlabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> <li><a>4</a></li> </ul> </div>
