bootstrap 基础（一）
1 bootstrap简介
- bootstrap是Twitter公司的两名前端设计师设计的。
- bootstrap是一款基于HTML、CSS和JavaScript的一个前端框架。
- bootstrap的特点：
- 是以移动设备优先。
- bootstrap适用于所有的主流浏览器，解决了浏览器兼容问题。
2 bootstrap的环境
- http://v3.bootcss.com/getting-started/#download下载用于生产环境的bootstrap。
- 解压bootstrap的压缩包。
- 下载jQuery的js文件
- 根据
https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js地址去获取对应版本的js文件，有两种方式。- ①由地址，我们可以知道jquery的版本是1.12.4，那么我们就可以去jQuery的官网下载对应的版本。
- ②通过上面的地址，跳转到对应的地址，然后就会看到对应的js文件，保存到指定的位置即可。
- 根据
3 以移动设备为优先。窗口和移动设备一致
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
4 bootstrap布局容器
<!-- 宽度是1170px -->
<div class="container" style="background-color: white">
hello
</div>
<!-- 宽度是100% -->
<div class="container-fluid">
world
</div>
- 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="background-color: gray">
<!-- 宽度是1170px -->
<div class="container" style="background-color: white">
hello
</div>
<!-- 宽度是100% -->
<div class="container-fluid">
world
</div>
</body>
</html>
5 排版标签
- <h1></h1>
- <h2></h2>
- <h3></h3>
- <h4></h4>
- <h5></h5>
- <h6></h6>
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="background-color: gray">
<div class="container-fluid" style="background-color: #ffffff">
<!--
class="page-header" 设置页头，给标题加一个分割线
-->
<!--
h1是36px
h2是30px
h3是24px
h4是18px
h5是14px
h6是12px
-->
<h1 class="page-header">产品展示</h1>
<h3 class="page-header">新闻内容</h3>
</div>
</body>
</html>
- <small></small> 小一号副标题
- <big></big> 大一号标题
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="background-color: gray">
<div class="container-fluid" style="background-color: #ffffff">
<!--
class="page-header" 设置页头，给标题加一个分割线
-->
<!--
h1是36px
h2是30px
h3是24px
h4是18px
h5是14px
h6是12px
-->
<h1 class="page-header">
产品展示
<small>呵呵</small>
</h1>
<h3 class="page-header">
新闻内容
<big>
哈哈
</big>
</h3>
</div>
</body>
</html>
- <p></p> 14px
- <strong></strong> 推荐使用的加粗
- <em></em>推荐使用的
- <del></del>删除线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body style="background-color: gray">
<div class="container-fluid" style="background-color: #ffffff">
<p>
<em>w3schools.com</em> 是最受欢迎的前端技术教程网站，
但是国内用户一直不能访问，
并且国内的中文翻译版本<del>十分陈旧</del>。
因此做了个镜像，<strong>希望</strong>英文好的同学直接去看原版教程吧！
</p>
</div>
</body>
</html>
6 文本对齐方式
- class="text-left" 向左对齐
- class="text-center" 居中对齐
- class="text-right" 向右对齐
- class="text-uppercase" 设置英文大写
- class="text-lowercase" 设置英文小写
- class="text-capitalize" 设置英文首字母大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
<h1 class="text-right">你好</h1>
<h1 class="text-center">世界</h1>
<h1 class="text-left">我不好</h1>
<p class="text-uppercase">
以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。
Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.
</p>
<p class="text-lowercase">
以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。
Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.
</p>
<p class="text-capitalize">
以下实例全部基于前面所讲的基本模板并配合 Bootstrap 的众多组件开发而成。我们鼓励你根据自身项目的需要对 Bootstrap 进行定制和修改。
Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory.
</p>
</div>
</body>
</html>
7 列表
- 有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
- 无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
- 定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
- class="list-unstyled" 去除列表前面的符号和原有的格式。
- class="list-inline" 把<li></li>之间的内容，纵向变横向。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
<!--
列表
-->
<!-- 有序列表 -->
<h3 class="page-header">有序列表</h3>
<ol>
<li>哈哈</li>
<li>呵呵</li>
<li>嘻嘻</li>
</ol>
<h3 class="page-header">去除列表前面的符号和原有的格式的有序列表</h3>
<ol class="list-unstyled">
<li>哈哈</li>
<li>呵呵</li>
<li>嘻嘻</li>
</ol>
<h3 class="page-header">去除符号的横向有序列表</h3>
<ol class="list-unstyled list-inline">
<li>哈哈</li>
<li>呵呵</li>
<li>嘻嘻</li>
</ol>
</div>
</body>
</html>
- class="dl-horizontal" 由纵向变为横向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
<h3 class="page-header">定义列表</h3>
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>内容对标题的解释</dd>
</dl>
</div>
</body>
</html>
8 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
<table>
<tr>
<td>产品编号</td>
<td>产品名称</td>
<td>产品状态</td>
</tr>
<tr>
<td>0001</td>
<td>宝马</td>
<td>未发货</td>
</tr>
<tr>
<td>0002</td>
<td>奥迪</td>
<td>已发货</td>
</tr>
<tr>
<td>0003</td>
<td>丰田</td>
<td>已退货</td>
</tr>
<tr>
<td>0004</td>
<td>本田</td>
<td>正在处理中</td>
</tr>
</table>
</div>
</body>
</html>
- class="table" 表格的一个基类，如果需要加其他的表格样式，都必须在.table的基础上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
<table class="table">
<tr>
<td>产品编号</td>
<td>产品名称</td>
<td>产品状态</td>
</tr>
<tr>
<td>0001</td>
<td>宝马</td>
<td>未发货</td>
</tr>
<tr>
<td>0002</td>
<td>奥迪</td>
<td>已发货</td>
</tr>
<tr>
<td>0003</td>
<td>丰田</td>
<td>已退货</td>
</tr>
<tr>
<td>0004</td>
<td>本田</td>
<td>正在处理中</td>
</tr>
</table>
</div>
</body>
</html>
- class="table table-bordered" 给表格加外边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
<table class="table table-bordered">
<tr>
<td>产品编号</td>
<td>产品名称</td>
<td>产品状态</td>
</tr>
<tr>
<td>0001</td>
<td>宝马</td>
<td>未发货</td>
</tr>
<tr>
<td>0002</td>
<td>奥迪</td>
<td>已发货</td>
</tr>
<tr>
<td>0003</td>
<td>丰田</td>
<td>已退货</td>
</tr>
<tr>
<td>0004</td>
<td>本田</td>
<td>正在处理中</td>
</tr>
</table>
</div>
</body>
</html>
- class="table table-hover" 鼠标悬停效果，鼠标移到行或者单元格上，变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
<table class="table table-bordered table-hover">
<tr>
<td>产品编号</td>
<td>产品名称</td>
<td>产品状态</td>
</tr>
<tr>
<td>0001</td>
<td>宝马</td>
<td>未发货</td>
</tr>
<tr>
<td>0002</td>
<td>奥迪</td>
<td>已发货</td>
</tr>
<tr>
<td>0003</td>
<td>丰田</td>
<td>已退货</td>
</tr>
<tr>
<td>0004</td>
<td>本田</td>
<td>正在处理中</td>
</tr>
</table>
</div>
</body>
</html>
- class="table table-striped" 斑马线效果，就是单行和双行的颜色不一样，就好像斑马身上的条纹一样。
- class="table table-condensed" 使得表格变得紧凑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid">
<table class="table table-bordered table-hover table-striped table-condensed">
<tr>
<td>产品编号</td>
<td>产品名称</td>
<td>产品状态</td>
</tr>
<tr>
<td>0001</td>
<td>宝马</td>
<td>未发货</td>
</tr>
<tr>
<td>0002</td>
<td>奥迪</td>
<td>已发货</td>
</tr>
<tr>
<td>0003</td>
<td>丰田</td>
<td>已退货</td>
</tr>
<tr>
<td>0004</td>
<td>本田</td>
<td>正在处理中</td>
</tr>
</table>
</div>
</body>
</html>
- class="table-responsive" 给table的父元素加，移动设备优先，如果内容不能完全显示，会出现响应式的滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-condensed">
<tr>
<td>产品编号</td>
<td>产品名称</td>
<td>产品状态</td>
</tr>
<tr>
<td>0001</td>
<td>宝马</td>
<td>未发货</td>
</tr>
<tr>
<td>0002</td>
<td>奥迪</td>
<td>已发货</td>
</tr>
<tr>
<td>0003</td>
<td>丰田</td>
<td>已退货</td>
</tr>
<tr>
<td>0004</td>
<td>本田</td>
<td>正在处理中</td>
</tr>
</table>
</div>
</div>
</body>
</html>
- 状态类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-condensed">
<tr class="active">
<td>产品编号</td>
<td>产品名称</td>
<td>产品状态</td>
</tr>
<tr class="info">
<td>0001</td>
<td>宝马</td>
<td>未发货</td>
</tr>
<tr class="success">
<td>0002</td>
<td>奥迪</td>
<td>已发货</td>
</tr>
<tr class="warning">
<td>0003</td>
<td>丰田</td>
<td>已退货</td>
</tr>
<tr class="danger">
<td>0004</td>
<td>本田</td>
<td>正在处理中</td>
</tr>
</table>
</div>
</div>
</body>
</html>
9 响应式图片
- class="img-responsive" 图片响应式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
<img src="img/timg.jpg" class="img-responsive"/>
</div>
</body>
</html>
- class="img-circle" 以圆形展示
- class="img-rounded" 将图片的四个角变为圆角，圆角矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
<img src="img/timg.jpg" class="img-responsive img-rounded"/>
</div>
</body>
</html>
- class="thumbnail" 给图片加圆角的边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body >
<div class="container-fluid ">
<img src="img/timg.jpg" class="img-responsive img-thumbnail"/>
</div>
</body>
</html>
10 栅格系统
- 栅格系统一定要放入容器中。
- 栅格系统，浏览器窗口最多自动分成12列，所以栅格系统又称为“十二栅格”。
- 栅格系统是由行(row)和列(col)表示。
- 验证：十二栅格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
div[class*='col-md']{
border:1px solid #1b6d85;
}
</style>
</head>
<body style="background-color: #333333;" >
<!-- 栅格系统 -->
<div class="container-fluid" style="background-color: white">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-2</div>
<div class="col-md-1">col-md-3</div>
<div class="col-md-1">col-md-4</div>
<div class="col-md-1">col-md-5</div>
<div class="col-md-1">col-md-6</div>
<div class="col-md-1">col-md-7</div>
<div class="col-md-1">col-md-8</div>
<div class="col-md-1">col-md-9</div>
<div class="col-md-1">col-md-10</div>
<div class="col-md-1">col-md-11</div>
<div class="col-md-1">col-md-12</div>
<div class="col-md-1">col-md-13</div>
<div class="col-md-1">col-md-14</div>
</div>
</div>
</body>
</html>
- 栅格系统案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
div[class*='col-md']{
border:1px solid #2b669a;
}
</style>
</head>
<body style="background-color: #333333;" >
<!-- 栅格系统 -->
<div class="container-fluid" style="background-color: white">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-2</div>
<div class="col-md-1">col-md-3</div>
<div class="col-md-1">col-md-4</div>
<div class="col-md-1">col-md-5</div>
<div class="col-md-1">col-md-6</div>
<div class="col-md-1">col-md-7</div>
<div class="col-md-1">col-md-8</div>
<div class="col-md-1">col-md-9</div>
<div class="col-md-1">col-md-10</div>
<div class="col-md-1">col-md-11</div>
<div class="col-md-1">col-md-12</div>
<div class="col-md-1">col-md-13</div>
<div class="col-md-1">col-md-14</div>
</div>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
<div class="row">
<div class="col-md-2">2</div>
<div class="col-md-3">3</div>
<div class="col-md-7">7</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
<h3 class="page-header">美女</h3>
<p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
</div>
<div class="col-md-4">
<img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
<h3 class="page-header">美女</h3>
<p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
</div>
<div class="col-md-4">
<img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
<h3 class="page-header">美女</h3>
<p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
</div>
</div>
</div>
</body>
</html>
- 栅格参数
- 如果想要栅格系统实现响应式，那么必须使用栅格参数了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap学习</title>
<!-- 移动设备优先 -->
<!--
屏幕和设备的宽度保持一致，初始缩放为1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- 导入bootstrap的css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<!-- 导入jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
div[class*='col-md']{
border:1px solid #2b669a;
}
</style>
</head>
<body style="background-color: #333333;" >
<!-- 栅格系统 -->
<div class="container-fluid" style="background-color: white">
<div class="row">
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-1</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-2</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-3</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-4</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-5</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-6</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-7</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-8</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-9</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-10</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-11</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-12</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-13</div>
<div class="col-md-1 col-xs-1 col-lg-1 col-sm-1">col-md-14</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">4</div>
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">4</div>
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">4</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6 col-lg-6 col-sm-6">6</div>
<div class="col-md-6 col-xs-6 col-lg-6 col-sm-6">6</div>
</div>
<div class="row">
<div class="col-md-2 col-xs-2 col-lg-2 col-sm-2">2</div>
<div class="col-md-3 col-xs-2 col-lg-2 col-sm-2">3</div>
<div class="col-md-7 col-xs-2 col-lg-2 col-sm-2">7</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">
<img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
<h3 class="page-header">美女</h3>
<p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
</div>
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">
<img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
<h3 class="page-header">美女</h3>
<p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
</div>
<div class="col-md-4 col-xs-4 col-lg-4 col-sm-4">
<img src="img/timg.jpg" alt="美女" class="img-responsive img-thumbnail"/>
<h3 class="page-header">美女</h3>
<p>美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女美女</p>
</div>
</div>
</div>
</body>
</html>
bootstrap 基础（一）的更多相关文章
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap <基础二十九>面板（Panels）
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- Bootstrap <基础二十五>警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Bootstrap<基础二十四> 缩略图
Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...
随机推荐
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- CSS实现横列布局的方法总结
一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...
- app请求服务器数据方法1-HttpUrlConnection
1. 实例化URL对象 首先第一步实例化一个URL对象,传入参数为请求的数据的网址. URL url = new URL("http://www.imooc.com/api/teacher? ...
- [补档]暑假集训D6总结
考试 不是爆零,胜似爆零= = 三道题,就拿了20分,根本没法玩好吧= = 本来以为打了道正解,打了道暴力,加上个特判分,应该不会死的太惨,然而--为啥我只有特判分啊- - 真的是惨. 讲完题觉得题是 ...
- 如何将1234通过java变成4321，下面介绍几种办法。
//1 StringBuffer的反转 public static void main(String[] args) { int a=1234; StringBuffer sb = new Strin ...
- python实战第一天-paramiko模块并练习
操作系统 Ubuntu 15.10 IDE & editor JetBrains PyCharm 5.0.2 ipython3 Python版本 python-3.4.3 安装paramiko ...
- hdu--1072--Nightmare（bfs回溯）
Nightmare Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- POJ 2479 Maximum sum 解题报告
Maximum sum Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 40596 Accepted: 12663 Des ...
- HDU字符串基础题(1020,1039,1062,1088,1161,1200,2017)
并不是很精简,随便改改A过了就没有再简化了. 1020. Problem Description Given a string containing only 'A' - 'Z', we could ...
- Eclipse中的Debug
一.Debug的基本过程 设置断点(双击待设断点左边行号处) 进入Debug模式(在待调试类上右键>调试方式,根据需求选择) 开始调试 二.Debug中的常用操作 继续执行[F8]:继续运行程序 ...