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,原因呢主要是觉得使本土化的,自带了日历.输入法.优客助手等易于上手的应用.也省的每次安装完原生的系 ...
随机推荐
- 解决ie8下面placeholder显示问题
今天测试反馈一个bug,需要在ie8下面看到placeholder提示,开始的想法是对ie8进行降级处理,在ie8下面就不显示了. 现在测试反馈了,解决办法. function isLowIE() { ...
- regression
单变量线性回归univariate linear regression 代价函数square error cost function : \(J(\theta)=\frac{1}{2m}\sum_{i ...
- 存储过程代码生成器Stored Procedure Generator
原文发布时间为:2010-10-26 -- 来源于本人的百度文章 [由搬家工具导入] Stored Procedure Generator (for SQL Server 2000/2005) htt ...
- JS读取/创建本地文件及目录文件夹的方法
原文链接:http://www.cnblogs.com/ayan/archive/2013/04/22/3036072.html 注:以下操作只在IE下有效! Javascript是网页制作中离不开的 ...
- java中 文件压缩处理
public static void main(String[] args) throws IOException { File file=new File("./mhxx_configs. ...
- sql_mode引发的数据库问题
前几天,在本地做完项目,测试完毕后,上传到线上服务器的时候,在做很多写入数据库的操作时,发现全部发生500报错,返回的报错信息是,某个字段没有默认值,写入的时候没有添加这个字段,该字段在数据表中是NO ...
- Educational Codeforces Round 40 (Rated for Div. 2)
A. Diagonal Walking time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Unity工程资源破解
Unity工程资源提取其实还是很方便的,网上也有很多相关介绍,比如雨凇就专门写了一遍关于破解Unity资源的文章(http://www.xuanyusong.com/archives/3618 ...
- python正则表达式从路径中取文件名出来不加后缀（txt）
正则表达式[^\\/:*?"<>|\r\n]+$ ---->取文件名包括后缀 e.g. >>>D:\PyCharm 2018.2.4\pythonWork ...
- Android Retrofit使用教程(三):Retrofit与RxJava初相逢
上一篇文章讲述了Retrofit的基本使用,包括GET,POST等请求.今天的文章中Retrofit要与RxJava配合使用. 了解RxJava RxJava有种种好处,我不在这里一一讲述.这里我只给 ...