首页 > 代码库 > bootstrap
bootstrap
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link type="text/css" rel="stylesheet" href="http://www.mamicode.com/bootstrap3/css/bootstrap.css">
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(function(){
// $(‘#myModal‘).modal({
//// keyboard:true
// });
$(‘#myModal‘).on(‘hide.bs.modal‘,function(){
console.log(‘关闭‘);
});
$(‘.submit‘).on(‘click‘,function(){
console.log(‘sss‘);
var name = $(‘[name="uname"]‘).val();
console.log(name);
$(‘#myModal‘).modal(‘hide‘);
// $(‘#identifier‘).modal(‘show‘)
// $(‘#identifier‘).modal(‘toggle‘)
});
$(‘.carousel‘).carousel({
interval: 3000
})
$(‘#myAffix‘).affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $(‘.footer‘).outerHeight(true))
}
}
})
});
</script>
<style type="text/css">
.all{
margin-top: 20px;
}
.line{
border: solid #808080 2px;
}
.body-bottom{
height: 200px;
width: 200px;
}
.picture-img{
height: 200px;
width: 300px;
}
.dropdown-menu:before {
content: ‘‘;
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0,0,0,0.2);
position: absolute;
top: -7px;
right: 9px;
}
.dropdown-menu:after {
content: ‘‘;
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
top: -6px;
right: 10px;
}
</style>
<body>
<div class="container">
<div class="row all">
<div class="col-sm-6">
<form action="" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">用户名：</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">密码：</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">性别:</label>
<div class="col-sm-10">
<div class="radio radio-inline">
<label><input type="radio" name="sex" value="http://www.mamicode.com/0">男</label>
</div>
<div class="radio radio-inline">
<label><input type="radio" name="sex" value="http://www.mamicode.com/1">女</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">购物车:</label>
<div class="col-sm-10">
<div class="checkbox checkbox-inline">
<label><input type="checkbox" name="group">aaa</label>
</div>
<div class="checkbox checkbox-inline">
<label><input type="checkbox" name="group">bbb</label>
</div>
<div class="checkbox checkbox-inline">
<label><input type="checkbox" name="group">ccc</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">附件:</label>
<div class="col-sm-10">
<input type="file">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">注释：</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<div class="checkbox">
<label>
<input type="checkbox">记住密码？
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button class="btn btn-default" type="submit">提交</button>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<h2>test</h2>
</div>
</div>
<div class="row">
<hr class="line">
</div>
<div class="row">
<div class="col-sm-6">
<div class="list-group">
<a class="list-group-item" href="http://www.mamicode.com/#">aaa</a>
<a class="list-group-item" href="http://www.mamicode.com/#">bbb</a>
<a class="list-group-item" href="http://www.mamicode.com/#">ccc</a>
</div>
<div class="">
<p class="text-danger bg-success">图片 大苏打实打<span class="label label-info">大苏打实打实</span>实大苏打实打实上的</p>
<img class="img-thumbnail" src="http://www.mamicode.com/1.jpg" />
<img class="img-circle" src="http://www.mamicode.com/1.jpg" />
<img class="img-responsive" src="http://www.mamicode.com/1.jpg" />
<img class="img-rounded" src="http://www.mamicode.com/1.jpg" />
</div>
<div class="pull-right">
dsssss
</div>
<div class="center-block body-bottom">
内容居中
</div>
<div class="row">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
下拉
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="http://www.mamicode.com/#">dsddddsdd</a></li>
<li><a href="http://www.mamicode.com/#">dsddddsdd</a></li>
<li><a href="http://www.mamicode.com/#">dsddddsdd</a></li>
</ul>
</div>
</div>
<div class="col-sm-6">
<button class="btn btn-default">
<span class="glyphicon glyphicon-apple glyphicon-align-right">apple</span>
</button>
<div class="row">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-exclamation-sign"></span>
ddsdsddddddds
</div>
</div>
<div class="row dropdown pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-search"></span>
<span class="caret "></span>
</button>
<ul class="dropdown-menu pull-right">
<li class="dropdown-header"><a href="http://www.mamicode.com/#">标题</a> </li>
<li><a href="http://www.mamicode.com/#">aaa</a> </li>
<li><a href="http://www.mamicode.com/#">aaa</a> </li>
<li><a href="http://www.mamicode.com/#">aaa</a> </li>
</ul>
</div>
<div class="row">
<div class="clearfix"></div>
<div class="alert alert-success">
<span class="glyphicon glyphicon-exclamation-sign"></span>
按钮组
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
</div>
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-danger" data-toggle="dropdown">
<span class="glyphicon glyphicon-asterisk"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="http://www.mamicode.com/#">aa</a></li>
<li><a href="http://www.mamicode.com/#">bb</a></li>
<li class="divider"></li>
<li><a href="http://www.mamicode.com/#">cc</a></li>
</ul>
</div>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.com</span>
</div>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="searh">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<div class="row">
<ol class="breadcrumb">
<li><a href="http://www.mamicode.com/#">one</a> </li>
<li><a href="http://www.mamicode.com/#">two</a> </li>
<li class="active"><a href="http://www.mamicode.com/#">three</a> </li>
</ol>
<ul class="pager">
<li class="previous"><a href="http://www.mamicode.com/#">←aaa</a> </li>
<li class="next"><a href="http://www.mamicode.com/#">bbb→</a> </li>
</ul>
<button class="btn btn-primary">
邮件<span class="badge">3</span>
</button>
</div>
</div>
<div class="jumbotron">
<h1>巨幕 dsdsdsds</h1>
</div>
<div class="row">
<div class="col-md-6 col-xs-10">
<a href="http://www.mamicode.com/#" class="thumbnail">
<img src="http://www.mamicode.com/1.jpg">
<div class="caption">
<h3>大苏打实打实的</h3>
<p>dsdsdsdsddd</p>
<button type="button" class="btn btn-default">ssss</button>
</div>
</a>
</div>
</div>
<div class="row">
<div class="progress">
<div class="progress-bar" style="width: 60%">60%</div>
</div>
<div class="progress progress-bar-danger">
<div class="progress-bar progress-bar-striped progress-bar-info active" style="width: 30%">30%</div>
</div>
</div>
<div class="row">
<p class="text-danger bg-success">媒体内容</p>
<div class="media">
<div class="media-left">
<a href="http://www.mamicode.com/#">
<img src="http://www.mamicode.com/1.jpg" class="media-object" style="width: 64px;height: 64px;">
</a>
</div>
<div class="media-body">
<h4>大师傅士大夫水水水水</h4>
<p>dsdsdsd大苏打实打实上的ras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus</p>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">面板头部</div>
<div class="panel-body">内容</div>
</div>
</div>
<!--<div class="row">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.mamicode.com/aa.mp4"></iframe>
</div>
</div>-->
</div>
</div>
<hr class="line">
<div class="row">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">弹框</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">用户名：</label>
<div class="col-sm-10">
<input type="text" name="uname" class="form-control">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary submit">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
<div class="row">
dsdsds
<hr>
</div>
<div class="clearfix"></div>
<div class="row picture-img">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.mamicode.com/img/l1.jpg">
<div class="carousel-caption">
<h2>第一页</h2>
</div>
</div>
<div class="item">
<img src="http://www.mamicode.com/img/l2.jpg">
<div class="carousel-caption">
<h2>第二页</h2>
</div>
</div>
<div class="item">
<img src="http://www.mamicode.com/img/l3.jpg">
<div class="carousel-caption">
<h2>第三页</h2>
</div>
</div>
<a class="left carousel-control" href="http://www.mamicode.com/#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="http://www.mamicode.com/#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<div class="row">
<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
...sasasasa
</div>
</div>
</body>
</html>
bootstrap