Bootstrap学习笔记
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统。
Bootstrap把一个容器或整个网页平均分成了12列。
栅格系统必须放在.container或container-fluid中
| 样式名称 | 含义 | 分辨率 | .container最大宽度 | 列间隔 |
|---|---|---|---|---|
| col-xs-* | 超小屏幕、手机 | <768px | 自动 | 30px |
| col-sm-* | 小屏幕、平板 | ≥768px | 750px | 30px |
| col-md-* | 中等屏幕、桌面显示器 | ≥992px | 970px | 30px |
| col-lg-* | 大屏幕、大桌面显示器 | ≥1200px | 1170px | 30px |
栅格系统
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<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" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<!-- 栅格系统 -->
<div class="row">
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
<div class="col-md-1" style="border:1px solid red;height:50px;">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8" style="border:1px solid red;height:50px;">.col-md-8</div>
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6" style="border:1px solid red;height:50px;">.col-md-6</div>
<div class="col-md-6" style="border:1px solid red;height:50px;">.col-md-6</div>
</div>
<div class="row">
<!-- 列偏移，向右偏移4列 -->
<div class="col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
<div class="col-md-offset-4 col-md-4" style="border:1px solid red;height:50px;">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4" style="border:1px solid red;height:100px;">.col-md-4</div>
<div class="col-md-8" style="border:1px solid red;height:100px;">
.col-md-8
<div class="row">
<div class="col-md-6" style="border:1px solid black;height:50px;">列嵌套.col-md-6</div>
<div class="col-md-6" style="border:1px solid black;height:50px;">列嵌套.col-md-6</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<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" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- container：固定宽度 container-fluid：100%宽度 -->
<font class="h1">标题标题标题标题标题标题标题标题</font>
<!-- h1-h6样式重写 -->
<h1 class="text-center">标题标题标题标题标题标题标题标题</h1>
<!-- 文本对齐 -->
<h1 class="text-right">标题标题标题标题标题标题标题标题</h1>
<p>中共中央***、国家主席、中央军委主席***视察战略支援部队机关，代表党中央和中央军委，对战略支援部队第一次党代表大会的召开表示热烈的祝贺，向战略支援部队全体指战员致以诚挚的问候。他强调，要以党在新形势下的强军目标为引领，贯彻新形势下军事战略方针，坚持政治建军、改革强军、依法治军，把握部队建设特点和规律，担负历史重任，瞄准世界一流，勇于创新超越，努力建设一支强大的现代化战略支援部队。</p>
<!-- 无符号列表 -->
<ul class="list-unstyled">
<li>ASP</li>
<li>PHP</li>
<li>JSP</li>
</ul>
<!-- 行内块 -->
<ul class="list-inline">
<li>ASP</li>
<li>PHP</li>
<li>JSP</li>
</ul>
<!-- table-striped 隔行换色 -->
<!-- table-hover 鼠标经过变色 -->
<!-- style="background-color:#CCC;padding:50px;" -->
<!-- table-condensed 紧凑的表格 -->
<!-- 行或单元格的背景色：active success info warning danger 只能给tr td添加 -->
<!-- table-responsive 响应式布局，当屏幕宽度小于768px出现滚动条 -->
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<tr>
<td class="active"> </td>
<td class="info"> </td>
<td> </td>
</tr>
<tr class="warning">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="danger">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="success">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<!-- form-inline 内联表单样式（用于form元素），可使元素一行排列 -->
<!-- radio-inline 使一组单选按钮在同一行 -->
<!-- checkbox-inline 使一组复选框排在同一行 -->
<form class="form-inline">
<!-- form-group 表单组，将label和表单元素包含其中，可以更好排列 -->
<div class="form-group">
<!-- sr-only 隐藏元素 -->
<label for="username" class="sr-only">用户名</label>
<!-- form-control 表单元素样式，常用语input textarea select元素 -->
<input type="text" name="" class="form-control" id="username" placeholder="用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" name="" class="form-control" id="password" placeholder="密码">
</div>
</form>
</div>
</body>
</html>
效果图如下
表单栅格系统
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<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" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="padding:50px;background-color:#CCC;">
<!-- 表单栅格系统 -->
<div class="container" style="padding:50px;background-color:#FFF;">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-md-2 control-label">用户名</label>
<div class="col-md-10">
<input type="text" name="username" class="form-control" id="username" placeholder="用户名"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-2 control-label">密码</label>
<div class="col-md-10">
<input type="text" name="password" class="form-control" id="password" placeholder="密码"/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">上传图片</label>
<div class="col-md-10">
<input type="file" name=""/>
<p class="help-block">上传图片类型只能是png、jpg、gif</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">兴趣爱好</label>
<div class="col-md-10">
<!--
<div class="checkbox">
-->
<label class="checkbox-inline"><input type="checkbox" name="">篮球</label>
<label class="checkbox-inline"><input type="checkbox" name="">羽毛球</label>
<label class="checkbox-inline"><input type="checkbox" name="">乒乓球</label>
<label class="checkbox-inline"><input type="checkbox" name="">足球</label>
<!--
</div>
-->
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">学历</label>
<div class="col-md-10">
<!-- class="radio" -->
<label class="radio-inline"><input type="radio" name="degree">本科</label>
<label class="radio-inline"><input type="radio" name="degree">硕士</label>
<label class="radio-inline"><input type="radio" name="degree">博士</label>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">个人简介</label>
<div class="col-md-10">
<textarea rows="5" class="form-control" placeholder="请输入个人简介"></textarea>
</div>
</div>
<!-- 列偏移 -->
<div class="col-md-10 col-md-offset-2">
<button class="btn btn-primary btn-lg disabled">提交</button>
</div>
</form>
</div>
</body>
</html>
效果图如下
图片样式
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">图片样式</h2>
<div>
<!-- img-responsive响应式图片 img-rounded圆角 img-circle圆形 img-thumbnail 带边框 center-block居中对齐 -->
<img src="QQ20160831-0.png" width="400" class="img-responsive img-thumbnail center-block">
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</div>
</body>
效果图如下：
浮动和清除的应用
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">浮动和清除的应用</h2>
<!-- 文本颜色类：text-muted柔和的 text-primary text-success text-info text-warning text-danger -->
<!-- 背景颜色类：bg-primary bg-info bg-warning bg-danger -->
<!-- 三角符号：<span class="caret"></span> -->
<!-- 快速浮动类：pull-left左浮动 pull-right右浮动 -->
<!-- 清除浮动：为父元素添加 clearfix可以清除浮动 -->
<!-- 让内容块网页居中：<div class="center-block"></div> -->
<div class="clearfix bg-warning" style="width:330px;border:1px sold red;">
<ul class="list-unstyled">
<li class="pull-left" style="padding:10px">
<a href="#"><img src="../QQ20160831-2.png" width="142" height="88"></a><br/>
<a href="#">链接文字链接文字</a>
</li>
<li class="pull-left" style="padding:10px">
<a href="#"><img src="../QQ20160831-2.png" width="142" height="88"></a><br/>
<a href="#">链接文字链接文字</a>
</li>
<li class="pull-left" style="padding:10px">
<a href="#"><img src="../QQ20160831-2.png" width="142" height="88"></a><br/>
<a href="#">链接文字链接文字</a>
</li>
<li class="pull-left" style="padding:10px">
<a href="#"><img src="../QQ20160831-2.png" width="142" height="88"></a><br/>
<a href="#">链接文字链接文字</a>
</li>
</ul>
</div>
</div>
</body>
效果图如下：
下拉菜单
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">下拉菜单的应用</h2>
<!-- dropdown将下拉菜单触发器和下拉菜单包含在其中（下来菜单父元素） -->
<div class="dropdown">
<!-- data-toglge：下拉菜单触发器，取值为dropdown -->
<button type="button" class="btn btn-default" data-toggle="dropdown">
编程语言<span class="caret"></span>
</button>
<!-- dropdown-menu给<ul>指定下拉菜单的样式 -->
<!-- dropup 向上弹出的菜单 -->
<!-- 下拉菜单对其方式：dropdown-menu-left dropdown-menu-right -->
<ul class="dropdown-menu">
<li><a href="#">JAVA</a></li>
<li><a href="#">C</a></li>
<li class="divider"></li><!-- 分割线 -->
<li><a href="#">C++</a></li>
<!-- 禁用的菜单项 -->
<li class="disabled"><a href="#">PHP</a></li>
</ul>
</div>
</div>
</body>
效果图如下：
按钮组
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">按钮组的应用</h2>
<!-- 按钮组工具栏，将一组按钮放在同一行 -->
<div class="btn-toolbar">
<!-- btn-group 按钮组，将一组按钮放在同一行 -->
<!-- 按钮组尺寸：btn-group-lg btn-group-sm btn-group-xs -->
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">left</button>
<button type="button" class="btn btn-primary">center</button>
<button type="button" class="btn btn-primary">right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">1</button>
<button type="button" class="btn btn-success">2</button>
<button type="button" class="btn btn-success">3</button>
</div>
<!-- btn-group-vertical按钮组垂直排列 -->
<div class="btn-group btn-group-sm btn-group-vertical">
<button type="button" class="btn btn-warning">top</button>
<button type="button" class="btn btn-warning">middle</button>
<button type="button" class="btn btn-warning">bottom</button>
</div>
</div>
</div>
</body>
效果图如下：
按钮下拉菜单
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">按钮下拉菜单应用</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action1</a></li>
<li><a href="#">Action2</a></li>
<li><a href="#">Action3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action4</a></li>
<li><a href="#">Action5</a></li>
</ul>
</div>
<h2 class="page-header">分裂式按钮下拉菜单应用</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action1</a></li>
<li><a href="#">Action2</a></li>
<li><a href="#">Action3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Action4</a></li>
<li><a href="#">Action5</a></li>
</ul>
</div>
</div>
</body>
效果图如下：
输入框组&标签页&胶囊式标签页&路径导航
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">输入框组的应用</h2>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">$</span>
<input type="text" name="" class="form-control" placeholder="金额" aria-describedby="basic-addon3">
<span class="input-group-addon" id="basic-addon3">.00</span>
</div>
<h2 class="page-header">标签页应用</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class=""><a href="#">Message</a></li>
<li class=""><a href="#">Profile</a></li>
</ul>
<h2 class="page-header">胶囊式标签页应用</h2>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li class=""><a href="#">Message</a></li>
<li class=""><a href="#">Profile</a></li>
</ul>
<h2 class="page-header">路径导航应用</h2>
<ol class="breadcrumb">
<li class=""><a href="#">Home</a></li>
<li class=""><a href="#">Message</a></li>
<li class="">Profile</li>
</ul>
</div>
</body>
效果图如下：
缩略图
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<h2 class="page-header">缩略图的应用</h2>
<div class="row">
<div class="col-md-4">
<!-- thumbnail赋给<a>标签，可以实现缩略图样式 -->
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<!-- caption缩略图的标题及描述 -->
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><img src="../QQ20160831-0.png"></a>
<div class="caption">
<h4>标题标题</h4>
</div>
</div>
</div>
</div>
</body>
效果图如下：
分页栏
<body style="padding:50px;background-color:#CCC;">
<div class="container" style="padding:50px;background-color:#FFF;">
<div class="row text-center">
<!-- pagination 实现分页效果 -->
<!-- agination-sm小尺寸 agination-lg大尺寸 -->
<ul class="pagination pagination-sm">
<!-- « 上一页 -->
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<!-- active当前页 -->
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<!-- disabled禁用 -->
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<!-- » 下一页 -->
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</body>
效果图如下：
导航栏
<body style="background-color:#EEE;padding-top:70px">
<!-- navbar-default导航栏默认样式，用于nav元素 -->
<!-- container是nav的子元素，导航栏内容放入其中 -->
<!-- navbar-inverse反色导航栏，用于nav元素 -->
<!-- navbar-fixed-top导航栏固定在顶部，用于nav元素,需要设置body为padding-top:70px -->
<!-- navbar-fixed-bottom导航栏固定在底部，用于nav元素,需要设置body为padding-bottom:70px -->
<!-- navbar-static-top导航栏静止在顶部，用于nav元素，会随着滚动条移动而消失 -->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<!-- 导航栏 -->
<div class="container">
<!-- 导航栏头部 -->
<!-- navbar-header导航栏头部样式 -->
<div class="navbar-header">
<!-- navbar-brand品牌图标样式 -->
<a href="#" class="navbar-brand">品牌</a>
<!-- navbar-text导航栏普通文本有行距和颜色，用于p元素 -->
<p class="navbar-text">欢迎光临</p>
</div>
<!-- 导航条主链接 -->
<!-- collapse折叠导航栏的样式的基类 -->
<!-- navbar-collapse折叠导航栏样式 -->
<div class="collapse navbar-collapse">
<!-- nav导航栏链接基类 -->
<!-- navbar-nav导航栏链接样式 -->
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
<!-- navbar-form导航栏表单，可以使表单元素排列在同一行 -->
<!-- navbar-right navbar-left组件排列 ,导航栏链接、表单、按钮或文本对齐-->
<form class="navbar-form navbar-right">
<input type="text" name="" class="form-control" placeholder="搜索">
<button type="button" class="btn btn-primary">搜索</button>
</form>
</div>
</div>
</nav>
</body>
效果图如下：
积跬步以致千里，积小流以成江海。
2016年5月之前的博文发布于51cto，链接地址:shamrock.blog.51cto.com
2016年5月之后博文发布与cnblogs上。
Github地址 https://github.com/umgsai
Keep moving~!!!
2016年5月之前的博文发布于51cto，链接地址:shamrock.blog.51cto.com
2016年5月之后博文发布与cnblogs上。
Github地址 https://github.com/umgsai
Keep moving~!!!
浙公网安备 33010602011771号