Bootstrap--常用及实例合集
栅格系统
1. row必须放到container和container-fluid里面
2. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
列的样式
.col-xx（lg md sm xs）-数字（1~12）
container有一个padding是15px
row有一个margin是-15px
列是支持嵌套的
列偏移： col-xx-offset-数字（1~12）
列排序： .col-md-pull-数字 .col-md-push-数字
文本对齐类
- .text-left
- .text-center
- .text-right
表单
.form-group
.form-inline
.form-horizontal
表格
.table
.table-striped
.table-bordered
.table-hover
.table-condensed
响应式表格
<div class="table-responsive"> // table外面包裹一层div
<table class="table">
...
</table>
</div
按钮
.btn
.btn-default
.btn-success
.btn-warning
.btn-danger
.btn-lg
.btn-sm
.btn-xs
快速浮动
- .pull-left
- .pull-right
清除样式
- .clearfix
Bootstrap3居中处理
水平居中
- .center-block 不涉及到列的居中 本质上就是 margin: 0 auto
让那个标签居中就把它写在哪个标签的样式类中
- 我们自定义的居中 在涉及到列的居中时使用
.col-centered {
float: none;
margin: 0 auto;
}
- 文本类居中或者display: inline
.text-center
垂直居中
.vertical-center {
display: flex;
align-items: center;
}
用在父标签中，让子块级标签垂直居中
Bootstrap组件
图标
span标签，里面加上样式类
glyphicon glyphicon-piggy-bank
下拉菜单： 后面我们就要用到bootstrap.js --> 之前还要引用jQuery.js
按钮组
.btn-group
.btn-toolbar
尺寸
分列式下拉菜单按钮
.css 和.min.css的区别是：
.min.css是压缩版的，用于生产环境的，因为它把多余的空格都去掉了，体积很小
.css 是没有压缩的
我们现在是开发阶段，用哪个都可以
.min.js
.js
同上
js文件我们通常放在body标签里面的最下面
除非你的js代码就必须在文档加载之前运行，这个时候要放在head标签里面
导航
<!--导航区开始-->
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!--导航区结束-->
<!--面板区开始-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
<div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
<div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
</div>
<!--面板区结束-->
.nav-tabs --> tab式
.nav-pills --> 胶囊式
.nav-justified --> 两端对齐
导航条
.navbar-btn
.navbar-text
.navbar-left .navbar-right --> 在导航条里面用左右浮动的化需要使用这俩个
.navbar-link
**导航条不需要放在.container里面**
.navbar-fixed-top --> 固定在顶部
如果使用了上面固定在顶部的样式，那么就需要给body设置padding
body { padding-top: 70px; }
.navbar-static-top --> 静止在顶部
.navbar-inverse --> 反色
面包屑导航/路径导航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分页
翻页
标签
.label
徽章
微信未读消息
个人中心通知的提示
巨幕
铺满整个屏幕
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
页头
缩略图 --> 前女友的页面
进度条
应用场景：
- 上传下载加载
- 体现步骤进度
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
.progress-bar-striped 条纹状进度条
动起来
.active
颜色
.progress-bar-success
.progress-bar-warning
.progress-bar-info
.progress-bar-danger
媒体对象
.media-left
.media-body
.media-right
头像的位置
.默认
.media-middle --> 中间
.media-bottom --> 底部
列表组
外面的div加这个样式： .list-group
里面的元素加这个样式: .list-group-item
面板
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">这里写标题</h3>
</div>
<div class="panel-body">
这里面是内容
</div>
<div class="panel-footer">Panel footer</div>
</div>
模态框
位置要放在body里面（body的直接子元素）
弹出方式：
1. 通过 data 属性
data-toggle="modal" data-target="#myModal"
2. 通过JS代码
- $("#myModal").modal("show") --> 显示出来
- $("#myModal").modal("hide) --> 隐藏
模态框大小：(放在modal里面标签上的)
.modal-lg
.modal-sm
动画效果：
fade
一个正经模态框：
1. .modal-header
2. .modal-body
3. .modal-footer
参数
backdrop： true/false/'static' --> 遮罩层的参数
keyboard: true/false --> 键盘上的ESC按键
事件
显示之前
显示完
隐藏之前
隐藏完
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
// do something...
alert("我让模态框显示出来，但是它还没来得及显示");
});
$('#myModal').on('shown.bs.modal', function (e) {
// do something...
alert("我让模态框显示出来，现在它已经显示出来了");
})
font awesome
http://fontawesome.io/
i 标签 区别于Bootstrap自带图标的span标签
sweetalert:
https://limonte.github.io/sweetalert2/
引用css文件和JS文件之后
swal("标题", "内容", "success")
Toastr
http://www.jq22.com/yanshi476 可以查看简单示例
jQueryLazyLoad
bootstrap提供给的都是成型的样式和框架，可以拿过来用然后更改一下样式，所以很多都可以直接过去复制粘贴，当然想要自己的效果还是需要修改。
网页的布局说白了就是一个个的盒子，想好每个盒子有多大要放什么，盒子里面是否还有盒子然后是否要分row，这样来布局的话就好得多
以下是实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="dist/js/bootstrap.js"></script>
<title>Title</title>
<style>
body {
background-color: black;
} .ya {
background-color: white;
/*border-radius: 2%;*/
width: 450px;
height: 250px;
margin-top: 200px;
margin-left: 30%;;
position: fixed;
} .btn-inf {
color: white;
background-color: black;
border: black;
}
.btn-inf:active{
color: white !important;
background-color: #222222 !important;
border: black !important;
}
.btn-inf:link {
color: white;
background-color: black;
border: black;
} .btn-inf:hover {
color: white;
background-color: #333333;
}
.glyphicon {
margin-right: 10px;
}
.yu{
background-color:black ;
color:white ;
}
.nuo{
margin-top: 40px;
margin-left:10px ;
}
.btn-sc{
color: black;
background-color: white;
border: white;
/*width: 300px;*/
/*height: 100px;*/
/*font-size: 50px;*/
padding: 10px;
position: fixed;
top:40%;
left: 40%;
}
.btn-sc:hover{
color:white ;
background-color: #5e5e5e;
border: white;
}
.btn-lg{
padding: 20px 32px;
font-size: 36px;
line-height: 2;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="container ya img-rounded hidden">
<form class="form-horizontal nuo novalidate">
<div class="form-group" id="in1">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label> <div class="input-group col-sm-8">
<span class="glyphicon glyphicon-user input-group-addon yu"></span>
<input type="text" class="form-control" id="inputEmail3" placeholder="用户名"
aria-describedby="inputEmail3">
<span class="glyphicon glyphicon-ok form-control-feedback hidden" id="namer"></span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback hidden"
id="namew"></span>
<span class="glyphicon glyphicon-remove form-control-feedback hidden" id="namec"></span>
</div>
</div>
<div class="form-group" id="in2">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="input-group col-sm-8">
<span class="glyphicon glyphicon-lock input-group-addon yu"></span>
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
<span class="glyphicon glyphicon-ok form-control-feedback hidden" id="pwdr"></span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback hidden"
id="pwdw"></span>
<span class="glyphicon glyphicon-remove form-control-feedback hidden" id="pwdc"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<a href="javascript:void(0)" class="glyphicon glyphicon-link btn btn-inf btn-block" id="bu">登录</a>
</div>
</div>
</form>
</div>
<div class="tubiao">
<a href="javascript:void(0)" class="glyphicon glyphicon-tasks btn btn-sc btn-lg"> Login</a>
</div>
<script>
$("#inputEmail3").on("blur",function () {
zhi=$("#inputEmail3").val();
if (zhi.length==0){
$("#namew").removeClass("hidden");
$("#in1").addClass("has-warning")
}
if (zhi.length>15||(zhi.length<6&&zhi.length!=0)){
$("#namec").removeClass("hidden");
$("#in1").addClass("has-error")
}
if(zhi.length>=6&&zhi.length<15){
$("#namer").removeClass("hidden");
$("#in1").addClass("has-success")
} });
$("#inputEmail3").on("focus",function () {
$("#in1").removeClass("has-error");
$("#in1").removeClass("has-success");
$("#in1").removeClass("has-warning");
$("#namew").addClass("hidden");
$("#namec").addClass("hidden");
$("#namer").addClass("hidden");
});
$("#inputPassword3").on("blur",function () {
pwd=$("#inputPassword3").val();
if (pwd.length==0){
$("#pwdw").removeClass("hidden");
$("#in2").addClass("has-warning")
}
if (pwd.length>15||(pwd.length<6&&pwd.length!=0)){
$("#pwdc").removeClass("hidden");
$("#in2").addClass("has-error")
}
if(pwd.length>=6&&pwd.length<15) {
$("#pwdr").removeClass("hidden");
$("#in2").addClass("has-success")
} });
$("#inputPassword3").on("focus",function () {
$("#in2").removeClass("has-error");
$("#in2").removeClass("has-success");
$("#in2").removeClass("has-warning");
$("#pwdw").addClass("hidden");
$("#pwdc").addClass("hidden");
$("#pwdr").addClass("hidden");
});
$(".btn-sc").on("click",function () {
$(".btn-sc").addClass("hidden");
$(".ya").removeClass("hidden"); })
</script>
</body>
</html>
Bootstrap--登录校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="dist/js/bootstrap.js"></script>
<style>
.name{
margin-top: 50px;
margin-left: 50px;
}
.uang{
margin-top: 50px;
margin-left: 50px;
}
.c{
color: red;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="name">用户名<input type="text" class="te"><b class="c hide" id="1">用户名过长</b><b class="c hide" id="3">用户名过短</b><b class="c hide" id="5">请输入用户名</b></div>
<div class="name">密码<input type="password" class="te"><b class="c hide" id="2">密码过长</b><b class="c hide" id="4">密码过短</b><b class="c hide" id="6">请输入密码</b></div>
<button class="uang btn btn-info">login</button>
<script>
(function (jq) {
function login(arg) {
arg.on("click",function () {
jq(".te").each(function () {
if(jq(this).val().length>7){
jq(this).next().removeClass("hide");
console.log(jq(this).next());
return false
}
else if (jq(this).val().length<2&&jq(this).val().length>0){
jq(this).next().next().removeClass("hide");
return false
}
else if (jq(this).val().length==0){
jq(this).next().next().next().removeClass("hide");
return false
}
})
});
jq(".te").on("focus",function () {
jq(this).nextAll().addClass("hide");
});
}
jq(document).ready(function () {
jq(".uang").check()
});
jq.fn.extend({
check:function () {
login(this)
}
})
})(jQuery); </script>
</body>
<
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="sw-dist/sweetalert2.min.css">
<script src="sw-dist/sweetalert2.js"></script>
<title>信息收集</title>
</head>
<style>
.t{
height: 10px;
width: 97%;
border-bottom: 1px solid #e0e0e0;
margin: 1.5% auto;
}
.tt{
margin-bottom: 10px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>信息手机卡 <small>共三部</small></h1>
</div>
</div>
<div class="row">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 33.3%">1/3
<span class="sr-only">3/1 (success)</span>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">基本信息<div class="glyphicon glyphicon-pushpin pull-right"></div></div>
<div class="panel-body"> <form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail3" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">手机</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword3" placeholder="手机">
</div>
</div>
<div class="form-group">
<label for="inputEmail4" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail4" placeholder="邮箱">
</div>
</div>
<div class="form-group">
<label for="inputEmail5" class="col-sm-2 control-label">密码</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail5" placeholder="密码">
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-sm-2 control-label">头像</label>
<input type="file" id="exampleInputFile" class="col-sm-10">
<p class="help-block col-sm-2">只支持png、jpq、gif格式。</p>
</div> </form> <div class="row">
<div class="t"></div>
</div>
<div class="row"> <form id="suiyi" class="col-sm-12 col-sm-offset-1 form-horizontal"> <div class="radio ">
<label for="optionsRadios1" class="col-sm-1"><strong>属性</strong> </label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
我是一个好人
</label>
</div>
<div class="radio clearfix col-sm-offset-1">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
我是一个坏人
</label>
</div>
<div class="radio disabled col-sm-offset-1">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
我真不是个人
</label>
</div>
</form>
</div>
</div>
</div>
<button class="btn btn-success pull-right" id="kl">下一步
</button>
</div> </div>
<script>
$("#kl").on("click",function () {
swal("完成","填写成功","success")
}) </script>
</body> </html>
Bootstrap--信息收集
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://v3.bootcss.com/favicon.ico">
<link href="dist/fonts/glyphicons-halflings-regular.svg">
<link href="dist/fonts/glyphicons-halflings-regular.ttf" rel="stylesheet">
<link href="dist/fonts/glyphicons-halflings-regular.woff" rel="stylesheet">
<link href="dist/fonts/glyphicons-halflings-regular.woff2" rel="stylesheet">
<title>Dashboard Template for Bootstrap</title> <!-- Bootstrap core CSS -->
<link href="Dashboard%20Temp_files/bootstrap.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="Dashboard%20Temp_files/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="Dashboard%20Temp_files/dashboard.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="Dashboard%20Temp_files/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
.col-centered {
float: none;
margin: 0 auto;
}
</style>
<body> <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input class="form-control" placeholder="Search..." type="text">
</form>
</div>
</div>
</nav> <div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar"> <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" 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 class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<div class="row">
<form class="navbar-form navbar-left col-sm-12" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索">
</div>
<button type="submit" class="btn btn-info">搜索</button> </form>
<button type="submit" class="btn btn-success pull-right" style="margin-right: 15px;margin-top:8px " data-toggle="modal" data-target="#myModal">添加</button>
</div>
<div class="modal fade j" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog j" role="document">
<div class="modal-content j">
<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">
<form action="">
<div class="form-group">
<label for="d1">姓名</label>
<input type="text" class="hui form-control" id="d1">
</div>
<div class="form-group">
<label for="d2">邮箱</label>
<input type="text" class="hui form-control" id="d2">
</div>
<div class="form-group">
<label for="d3">爱好</label>
<input type="text" class="hui form-control" id="d3">
</div>
<div class="modal-footer">
<input type="reset" class="an btn btn-default" data-dismiss="modal" value="Close">
<input type="reset" class="anq btn btn-primary" value="确定添加" data-dismiss="modal" >
</div>
</form>
</div> </div>
</div>
</div> <div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="col-sm-1">#</th>
<th>姓名</th>
<th>邮箱</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-1">1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td class="col-sm-4 "><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
<tr>
<td class="col-sm-1">1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td class="col-centered"><button class="del btn btn-danger col-sm-offset-3 glyphicon glyphicon-remove">删除</button>
<button class="w btn btn-success glyphicon glyphicon-pencil">编辑</button></td>
</tr>
</tbody>
</table>
</div>
<nav aria-label="Page navigation" class=" pull-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><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>
</div>
</div>
</div> <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="Dashboard%20Temp_files/jquery.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="Dashboard%20Temp_files/bootstrap.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="Dashboard%20Temp_files/holder.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="Dashboard%20Temp_files/ie10-viewport-bug-workaround.js"></script>
<script> </script> </body></html>
Bootstrap--页面管理
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://v3.bootcss.com/favicon.ico">
<link rel="stylesheet" href="dist/css/bootstrap.min.css"> <title>Off Canvas Template for Bootstrap</title> <!-- Bootstrap core CSS -->
<link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/bootstrap.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/offcanvas.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<style>
.ty{
margin-top: -20px;
}
.he{
width: 50px;
border-bottom: #9d9d9d solid ;
border-width: 1px;
margin-left: 45%;
}
.hi{
width: 50px;
border-bottom: #9d9d9d solid ;
border-width: 1px;
margin-left: 48%;
}
.hc{
width: 50px;
border-bottom: #9d9d9d solid ;
border-width: 1px;
margin-left: 48.3%;
}
.tx{
padding: 5px;
}
.xia{
margin-top: 30px;
margin-left: 30px;
}
</style>
<body>
<nav class="navbar navbar-fixed-top navbar-inverse container-fluid">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">OldBoy</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav col-sm-10">
<li class="active"><a href="#">Python学院</a></li>
<li><a href="#about">Linux学院</a></li>
<li ><a href="#contact">好好学习</a></li>
<li class="dropdown pull-right">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们<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>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
</nav><!-- /.navbar -->
<div class="container-fluid">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 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="信息.png" alt="...">
<div class="carousel-caption"> </div>
</div>
<div class="item">
<img src="博客.png" 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>
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<div class="page-header text-center">
<h2>Bootstrap能做什么</h2>
<div class="hi"></div>
<small>网站首页、网站后台、手机页面</small>
</div>
</div>
</div>
<div class="row">
<div class="pull-left col-sm-6 col-sm-offset-1">
<img src="登录.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail">
</div>
<div class="page-header text-center col-sm-5 pull-right">
<h2 style="margin-top: 100px">使用Bootstrap搭建的</h2>
<h2>登录页面</h2>
<div class="he"></div>
<small>使用表单、按钮组件搭建</small>
</div>
</div>
<div class="row jumbotron">
<div class="pull-right col-sm-5">
<img src="信息.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail">
</div>
<div class="page-header text-center col-sm-6 pull-left">
<h2 style="margin-top: 100px">使用Bootstrap搭建的</h2>
<h2>信息采集单</h2>
<div class="he"></div>
<small>使用表单、页头、面板组件、进度条组件搭建</small>
</div>
</div> <div class="row">
<div class="pull-left col-sm-6 col-sm-offset-1">
<img src="管理.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail">
</div>
<div class="page-header text-center col-sm-5 pull-right">
<h2 style="margin-top: 100px">使用Bootstrap搭建的</h2>
<h2>管理后台</h2>
<div class="he"></div>
<small>使用导航条、表格、面板、分页等组件搭建</small>
</div>
</div> <div class="row jumbotron">
<div class="pull-right col-sm-5">
<img src="博客.png" style="width: 600px;height: 350px;margin-bottom: 50px;margin-top: 50px" class="img-thumbnail">
</div>
<div class="page-header text-center col-sm-6 pull-left">
<h2 style="margin-top: 100px">使用Bootstrap搭建的</h2>
<h2>博客页面</h2>
<div class="he"></div>
<small>使用自定义导航、自定义分栏和分页等组件搭建</small>
</div>
</div> <div class="row">
<div class="page-header text-center col-sm-12" style="margin-top: 30px;margin-bottom: 30px">
<h2 >心路历程</h2> <div class="hc"></div>
<h5>天啦噜</h5>
<small >复制粘贴</small>
</div>
</div> <div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="1.jpg">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="1112.jpg">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="333.jpg">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="44.jpg">
</a>
</div>
<div class="text-center"><h4>天啦噜</h4></div>
</div>
<div class="row jumbotron tx">
<div class=" text-center col-sm-6 col-md-3 pull-left">
<h2>所以说</h2>
<small>学好Bootstrap真的很重要</small>
</div>
<div class="col-sm-6">
<button class="btn btn-success xia">我知道了</button>
</div> </div> </div> <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/jquery.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/ie10-viewport-bug-workaround.js"></script>
<script src="3.%E4%BF%AE%E6%94%B9%E5%8D%9A%E5%AE%A2_files/offcanvas.js"></script> </body></html>
Bootstrap--页面
Bootstrap--常用及实例合集的更多相关文章
- iOS 常用的#define合集
1.定义常量 定义常量的时候最好以小写字母k开头,让人见名知意, (1)导航栏高度:我们都知道iPhone竖屏时候导航栏的高度为44,这时候可以定义一个常量来表示该高度, #define kNaivg ...
- Java常用工具+类库合集
1 常用工具 JVisual vm:可以直接通过软件包下载,支持本地以及远程JVM监控 JMH:Java Microbenchmark Harness,测试基准组件,精度可达纳秒级 JITWatch: ...
- .NET常用类库--苏飞合集
在线网站:http://tool.sufeinet.com/CodePreview/CodeView.aspx?action=view&file=Zip/SharpZip.cs C#基类库大全 ...
- 常用linux命令合集（持续更新中）
我的博客:www.while0.com 开发调试 readelf-a 查看elf文件中的内容 hexdump -C 用16进制查看文件 objdump -d 反汇编目标文件 nm 查看目标文件或者可执 ...
- 常用js方法合集
var Default = { init: function () { }, addCookie: function (name,data) { var expdate = new Date(); / ...
- 常用vim命令合集
移动命令: h:左移 l:右移 k:上移 j:下移 ^:移动到本行第一个非空白字符上 0:移动到本行第一个字符上 gg:移动到文件头 G = shift + g:移动到文件尾 %:从一个"{ ...
- sublime常用基础插件合集
插件介绍 Package Control 功能:安装包管理简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能使用方法:快捷键 Ctrl+Shift+P,输入 install 选中In ...
- 关于下拉刷新你是否真的非常理解还是只会搬砖？附 Android 实例子源代码文件下载地址380个合集
1,推荐几篇非常有用的博文 原创写的真的非常好 主要讲解原理,整体布局三部分组成以及设置padding等等作用, 下拉的具体实现 滑动到底部具体加载以及判断手势事件,再次推荐作者的 详细讲解 建议先看 ...
- 【转】Ubuntu常用软件合集
[转]Ubuntu常用软件合集 Ubuntu常用软件合集 我用的使Ubuntu-Kylin14.04,原因呢主要是觉得使本土化的,自带了日历.输入法.优客助手等易于上手的应用.也省的每次安装完原生的系 ...
随机推荐
- 远程映射错误 “发生系统错误 1312 指定的登录会话不存在。可能已被终止 IIS 访问 远程共享目录”
最近和其他公司做接口,需要将数据上传给对方. 我们发送程序部署在前置机上,文件在内网数据中.需要映射到文件服务器后上传数据.本机vs开发是可以映射成功,但是部署到远程的IIS中,就不能成功. 报错: ...
- pat 团体天梯赛 L2-002. 链表去重
L2-002. 链表去重 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一个带整数键值的单链表L,本题要求你编写程序,删除 ...
- c#调用 WinRAR.exe以命令行形式实现文件、文件夹的解压缩
在实际项目应用中会偶尔使用文件的压缩上传以及服务器端的加压处理,故写此文记录以备不时之需. 1.自己编写的ZipHelper类. public static class ZipHelper { pri ...
- 【BZOJ4477】字符串树（可持久化Trie）
此题花费我整整三天的功夫.还在NoiP贴吧发过贴. 最后发现trie树建新节点时信息未完全复制,真是愚蠢之极. 言归正传. 如果我们已经知道了每个点上的trie树那么询问就是sum[x]+sum[y] ...
- RowFilter 对于已获取到的dataset进行过滤
原文发布时间为:2009-11-12 -- 来源于本人的百度文章 [由搬家工具导入] DataView的属性RowFilter使用方法 p.s. 重点在于DataView是DateTable相关联的一 ...
- c# Thread类
现在C#已经建议摈弃使用 Suspend, Resume 暂停/恢复线程, 也尽量少用 Abort方法中断一个线程. 建议使用线程的同步手段有: Mutex.ManualResetEvent.Aut ...
- ubuntu16.04安装docker CE
如需开始在 Ubuntu 上使用 Docker CE,请确保您满足先决条件,然后再安装 Docker. 如需安装 Docker 企业版 (Docker EE),请转至获取适用于 Ubuntu 的 Do ...
- （1）WCF托管
wcf 托管方式有很多种,常见的托管方式,iis,was,控制台,winfrom等. 先创建一个wcf服务 IService1.cs using System.ServiceModel; namesp ...
- HDU 4343 Interval query（贪心 + 倍增）
题目链接 2012多校5 Problem D 题意 给定$n$个区间,数字范围在$[0, 10^{9}]$之间,保证左端点严格大于右端点. 然后有$m$个询问,每个询问也为一个区间,数字范围在$[ ...
- Fiddler简介以及web抓包
Fiddler简介以及web抓包 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.Fiddler简介简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联 ...