栅格系统
https://v3.bootcss.com/css/#grid
表单
https://v3.bootcss.com/css/#forms
小图标
https://v3.bootcss.com/components/
前端CDN3.3.7版本
http://www.bootcdn.cn/bootstrap/
进度条
https://v3.bootcss.com/components/#progress
按钮
https://v3.bootcss.com/css/#buttons
导航
https://v3.bootcss.com/components/#nav
分页
https://v3.bootcss.com/components/#pagination
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="">
<h1>h1. Bootstrap heading
<small>Secondary text</small>
</h1>
</div>
</div>
<div class="row">
<div class=" ">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="2" aria-valuemin="0"
aria-valuemax="100" style="min- 2em; 33%;">
1/3
</div>
</div>
</div>
<div class=" ">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title<span class="glyphicon glyphicon-pushpin pull-right"></span></h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-2 control-label">
<label for="exampleInputEmail1">姓名</label>
</div>
<div class="col-md-8">
<input type="email pull-right" class="form-control" id="exampleInputEmail1"
placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label">
<label for="exampleInputEmail1">手机</label>
</div>
<div class="col-md-8">
<input type="email pull-right" class="form-control" id="exampleInputEmail1"
placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label">
<label for="exampleInputEmail1">邮箱</label>
</div>
<div class="col-md-8">
<input type="email pull-right" class="form-control" id="exampleInputEmail1"
placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label">
<label for="exampleInputEmail1">密码</label>
</div>
<div class="col-md-8">
<input type="email pull-right" class="form-control" id="exampleInputEmail1"
placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label">
<label for="exampleInputFile">头像</label>
</div>
<div class="col-md-8">
<input type="file" id="exampleInputFile">
<p class="help-block">只支持JPG格式</p>
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label">
<label for="exampleInputFile">属性</label>
</div>
<div class="col-md-8">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success navbar-right">Submit</button>
</div>
</body>
</html>
View Code