Bootstrap演练
将代码复制到html文档中，查看样式
注意引入的jQuery，Bootstrap文件的路径是否正确
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
<title>Bootstrap演练</title>
<style>
body {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>巨幕演示</p>
<p>.......................<a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a></p>
</div>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 632px;height: 340px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./Redmi Note 8.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./Redmi Note 8.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="./logo.png" style="position: relative;left: -13px;top: -14px;">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">面板</div>
<div class="panel-body">
面板演示
</div>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-2">
<div class="row">
<div class="col-md-6">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">嵌套列</div>
<div class="panel-body">
嵌套列1
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">嵌套列</div>
<div class="panel-body">
嵌套列2
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">标题</div>
<div class="panel-body">
<h1>h1. Bootstrap <small>小标题</small></h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">中心内容</div>
<div class="panel-body">
<p class="lead">中心内容</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">对齐</div>
<div class="panel-body">
<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-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">改变大小写</div>
<div class="panel-body">
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">capitalized text.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">缩略语</div>
<div class="panel-body">
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">地址</div>
<div class="panel-body">
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">引用</div>
<div class="panel-body">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">表格</div>
<div class="panel-body">
<table class="table">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>alex</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>MJJ</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>Egon</td>
<td>38</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">条纹状表格</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>alex</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>MJJ</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>Egon</td>
<td>38</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">带边框表格</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>alex</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>MJJ</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>Egon</td>
<td>38</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">鼠标悬停响应表格</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-hover">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>alex</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>MJJ</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>Egon</td>
<td>38</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">紧凑表格</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>1</td>
<td>alex</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>MJJ</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>Egon</td>
<td>38</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">状态类</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr class="active">
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
<tr class="success">
<td>1</td>
<td>alex</td>
<td>18</td>
</tr>
<tr class="warning">
<td>2</td>
<td>MJJ</td>
<td>28</td>
</tr>
<tr class="danger">
<td>3</td>
<td>Egon</td>
<td>38</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">表单</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="username">username</label>
<input type="email" class="form-control" id="username" placeholder="username">
</div>
<div class="form-group">
<label for="password">password</label>
<input type="password" class="form-control" id="password" placeholder="password">
</div>
<div class="form-group">
<label for="file">选择文件</label>
<input type="file" id="file">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 已读
</label>
</div>
<button type="submit" class="btn btn-default">登陆</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">内联表单</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label for="姓名">姓名</label>
<input type="text" class="form-control" id="姓名" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="邮箱">邮箱</label>
<input type="email" class="form-control" id="邮箱" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">发送邀请</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">内联表单</div>
<div class="panel-body">
<!-- 将普通的form-group的div包裹在form-inline的form中 -->
<form class="form-inline">
<div class="form-group">
<label for="姓名">姓名</label>
<input type="text" class="form-control" id="姓名" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="邮箱">邮箱</label>
<input type="email" class="form-control" id="邮箱" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">发送邀请</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">内联表单</div>
<div class="panel-body">
<!-- 将普通的form-group的div包裹在form-inline的form中 -->
<form class="form-inline">
<div class="form-group">
<label for="姓名">姓名</label>
<input type="text" class="form-control" id="姓名" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="邮箱">邮箱</label>
<input type="email" class="form-control" id="邮箱" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">发送邀请</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">焦点状态、禁用状态、只读状态</div>
<div class="panel-body">
<input class="form-control" id="disabledInput" type="text"
placeholder="Disabled input here..." disabled>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">用col-md-X调整控件宽度</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">按钮</div>
<div class="panel-body">
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">预定义样式按钮</div>
<div class="panel-body">
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">按钮尺寸</div>
<div class="panel-body">
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">按钮激活状态</div>
<div class="panel-body">
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">按钮禁用状态</div>
<div class="panel-body">
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary
button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">关闭按钮</div>
<div class="panel-body">
<button type="button" class="close" aria-label="Close"><span
aria-hidden="true">×</span></button>
<div class="panel-heading">三角符号</div>
<span class="caret"></span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">快速浮动</div>
<div class="panel-body">
class="pull-left" <br>
class="pull-right"
</div>
<div class="panel-heading">让内容块居中</div>
<div class="panel-body">
class="center-block"
</div>
<div class="panel-heading">清除浮动</div>
<div class="panel-body">
class="clearfix"
</div>
<div class="panel-heading">显示或隐藏内容</div>
<div class="panel-body">
class="show"<br>
class="hidden"
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">字体图标</div>
<div class="panel-body">
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">下拉菜单</div>
<div class="panel-body">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">标题</li>
<li class="disabled"><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li class="active"><a href="#">选项3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">选项4</a></li>
</ul>
</div>
</div>
<div class="panel-heading">分列式按钮下拉菜单</div>
<div class="panel-body">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-info">Action</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="panel-heading">向上弹出式菜单</div>
<div class="panel-body">
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">按钮组</div>
<div class="panel-body">
<div class="btn-group" role="group" aria-label="...">
<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>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">标签页</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<div class="panel-heading">胶囊式标签页</div>
<div class="panel-body">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">分页</div>
<div class="panel-body">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="panel-heading">翻页</div>
<div class="panel-body">
<nav aria-label="...">
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">标签</div>
<div class="panel-body">
<h3>Example heading <span class="label label-default">标签</span></h3>
</div>
<div class="panel-heading">可用的变体</div>
<div class="panel-body">
<span class="label label-default">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>
</div>
<div class="panel-heading">徽章</div>
<div class="panel-body">
<a href="#">收件箱 <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
消息 <span class="badge">4</span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">警告框</div>
<div class="panel-body">
<div class="alert alert-success" role="alert">success</div>
<div class="alert alert-danger" role="alert">danger</div>
</div>
<div class="panel-heading">可关闭的警告框</div>
<div class="panel-body">
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">进度条</div>
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
</div>
<div class="panel-heading">条纹进度条</div>
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
</div>
<div class="panel-heading">动画条纹进度条</div>
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active"
role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 60%;">
60%
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">滚动监听</div>
<div class="panel-body">
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">luffy</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li>
<a href="#ios">iOS</a>
</li>
<li>
<a href="#svn">SVN</a>
</li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
<li>
<a href="#jmeter" tabindex="-1">jmeter</a>
</li>
<li>
<a href="#ejb" tabindex="-1">ejb</a>
</li>
<li class="divider"></li>
<li>
<a href="#spring" tabindex="-1">spring</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;">
<h4 id="ios">iOS</h4>
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
</p>
<h4 id="svn">SVN</h4>
<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
</p>
<h4 id="jmeter">jMeter</h4>
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
</p>
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
<h4 id="spring">Spring</h4>
<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
</p>
<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">标签页</div>
<div class="panel-body">
<div>
<!-- 标签选项卡 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">标签内容1</div>
<div role="tabpanel" class="tab-pane" id="profile">标签内容2</div>
<div role="tabpanel" class="tab-pane" id="messages">标签内容3</div>
<div role="tabpanel" class="tab-pane" id="settings">标签内容4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">静态弹出框</div>
<div class="panel-body">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail" style="height: 400px;">
<div class="panel panel-default">
<div class="panel-heading">手风琴特效（侧边导航栏）</div>
<div class="panel-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
模态框
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">标题</h4>
</div>
<div class="modal-body">
内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</div>
<script src="./bootstrap-3.3.7-dist/js/jquery-3.5.0.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
$('.collapse').collapse()
</script>
</body>
</html>
603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
