代码段：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 Bootstrap -->
<script src="js/jquery/3.3.1/jquery.min.js"></script>
<link href="css/bootstrap/3.3.7/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.7/bootstrap.min.js"></script>
<script src="js/holder.min.js"></script>
<style>
.container{
background:#f0f0f0;
}
.row{
margin-bottom:15px;
}
</style>
<script>
$('.close').click(function(){
$(this).parent().hide();
});
</script>
</head>
<body>
<div class="container">
<h1 class="page-header">全局css样式</h1>
<div class="row">
<!--<div class="col-md-4">
<img src="holder.js/100x100" width="100%" class="img-thunbnail">
</div> -->
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="img-rounded">
</div>
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="img-circle">
</div>
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="img-thunbnail">
</div>
</div>
<div class="row">
<!--<div class="col-md-4">
<img src="holder.js/100x100" width="100%" class="img-circle">
</div> -->
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="mg-thunbnail">
</div>
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="img-circle">
</div>
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="">
</div>
</div>
<div class="row">
<!--<div class="col-md-4">
<img src="holder.js/100x100" width="100%" class="img-circle">
</div> -->
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="img-circle">
</div>
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="img-circle">
</div>
<div class="col-xs-4">
<img src="holder.js/100x100" width="100%" class="img-circle">
</div>
</div>
<p class="text-muted">balabalabala</p>
<h1 class="bg-primary">balabalabala
<span class="close">×</span>
</h1>
<h6 class="text-success">balabalabala</h6>
<p class="bg-info">balabalabala
<button class="btn btn-primary pull-right btn-xs">更多<span class="caret"></span></button><!--
.btn-xs:超小尺寸；
.btn-sm:小按钮;
.btn-lg:大按钮;
.pull-right:向右浮动;
.clearfix:清除浮动;
-->
</p>
<p class="text-warning show">balabalabala</p>
<!--
.hidden:隐藏内容;
.show:显示内容;
-->
<p class="text-danger">balabalabala</p>
</div>
<div class="container">
<h1 class="page-header">组件</h1>
<span class="glyphicon glyphicon-cloud" style="font-size:15px"></span>
<!--字体组件，改变大小，改变颜色 -->
<button class="btn btn-primary btn-xs">更多<span class="
glyphicon glyphicon-triangle-right"></span></button>
<button class="btn btn-primary btn-xs">更多<span class="
glyphicon glyphicon-triangle-left"></span></button>
<button class="btn btn-primary btn-xs">更多<span class="
glyphicon glyphicon-triangle-top"></span></button>
<button class="btn btn-primary btn-xs">更多<span class="
glyphicon glyphicon-triangle-bottom"></span></button>
<!--下拉菜单-->
<div class="drop-down">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">更多课程<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">周一事项</li>
<li>aaa</li>
<li class="disabled">aaa</li>
<li class="divider"></li>
<li class="dropdown-header">周二事项</li>
<li>aaa</li>
</ul>
</div>
<h4 class="page-geader">按钮组,按钮工具箱</h4>
<!--按钮工具箱-->
<div class="btn-toolbar">
<div class="btn-group btn-group-sm">
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
</div>
<div class="btn-group">
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
</div>
<div class="btn-group">
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
</div>
</div>
<!--垂直排列-->
<div class="btn-group btn-group-vertical">
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
<button class="btn btn-danger"></button>
</div>
<!--两端对齐-->
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-danger"></button>
</div>
<div class="btn-group">
<button class="btn btn-primary"></button>
</div>
<div class="btn-group">
<button class="btn btn-success"></button>
</div>
<div class="btn-group">
<button class="btn btn-info"></button>
</div>
</div>
<!--分裂式按钮下拉菜单-->
<div class="btn-group">
<button class="btn btn-default">default</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">周一事项</li>
<li>aaa</li>
<li class="disabled">aaa</li>
<li class="divider"></li>
<li class="dropdown-header">周二事项</li>
<li>aaa</li>
</ul>
</div>
<h3 class="page-header">表单</h3>
<!--表单-->
<!--
将整个表单禁用掉，只需要在表单外面加上
<fieldset disabled>
<legend>balabala</legend>
</fieldset>
-->
<div class="">
<form class="form-horizontal"><!-- class="form-inline" 表单处于一行-->
<div class="form-group">
<label class="col-xs-2 control-label">用户名:</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="usename">
<!--
<input class="text" disabled>禁用
<p class="form-control-static">text框变成字后会飘上去，所以字体加样式</p>
-->
</div>
</div>
<div class="form-group has-success has-feedback"><!--三种颜色.has-success
.has-warning
.has-error
右侧小图标:.has-feedback
可通过添加<span>添加文本图标
-->
<label class="col-xs-2 control-label">密码:</label>
<div class="col-xs-10">
<input type="password" class="form-control input-sm"><!--
表单框大小：.input-lg
.input-sm
-->
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
<p class="help-block">这是一段描述</p>
</div>
</div>
<div class="form-group">
<div class="col-xs-10 col-xs-offset-2">
<input type="submit" value="ok" class="btn btn-primary">
<input type="reset" value="cancle" class="btn btn-danger">
</div>
</div>
<div class="form-group">
<label>留言:</label>
<textarea class="form-control"></textarea>
</div>
<div class="form-group">
<label>城市:</label>
<select class="form-control">
<option>北京</option>
<option>北京</option>
<option>北京</option>
</select>
</div>
<!--多选单选-->
<div class="form-group">
<label>爱好:</label>
<div><!--选项放在一行.checkbox-inline-->
<label class="checkbox-inline"><input type="checkbox"></label>
<label class="checkbox-inline"><input type="checkbox"></label>
<label class="checkbox-inline"><input type="checkbox"></label>
</div>
<!--name相同：单选 -->
<label>单选:</label>
<div class="radio"><!-- .radio-inline -->
<label><input type="radio" name="1"></label>
</div>
<div class="radio">
<label><input type="radio" name="1"></label>
</div>
<div class="radio">
<label><input type="radio" name="1"></label>
</div>
</div>
<!--文件上传-->
<div class="form-group">
<label>文件上传：</label>
<input type="file">
</div>
</form>
</div>
</div>
</body>
</html>实现效果：
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
