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 创建缩略图的步骤如下: 在图像周围添加带有 ...
随机推荐
- 二．GC相关之Java内存模型
根据上节描述的问题,我们知道其最终原因是GC导致的.本节我们就先详细探讨下与GC息息相关的Java内存模型. 名词解释:变量,理解为java的基本类型.对象,理解为java new出来的实例. Jav ...
- 最小生成树详解 prim+ kruskal代码模板
最小生成树概念: 一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边. 最小生成树可以用kruskal(克鲁斯卡尔)算法或prim(普里 ...
- ASP.NET Core MVC – Caching Tag Helpers
简介 缓存可以大大提高应用程序加载时间和响应速度.我们可以使用缓存Tag Helpers缓存不会频繁更改的HTML内容. 在上一篇文章中,我们谈到了Tag Helpers,演示Tag Helpers能 ...
- Java集合框架Collections【List/Set】
1.基本介绍: 集合就是存放对象的,他比数组好的一点就是他一开始不清楚自己长度 容器一般是分为很多种的,很多的容器在一起然后进过断的抽象和抽取就成了一个体系,我们称之为集合框架 我们看体系首先是看顶层 ...
- 这是个巧妙的表达式: a ˆ= b ˆ= a ˆ= b 它不需要临时变量就可 以交换 a 和 b 的值。
这不具有可移植性.它试图在序列点之间两次修改变量 a, 而这是无定义的. 例如,有人报告如下代码: int a = 123, b = 7654; a ^= b ^= a ^= b; 在 SCO 优化 ...
- ESLint入门
ESLint是一个用于识别和报告ECMAScript/JavaScript中代码格式的工具,目的是使代码风格更加统一和避免错误. 1.安装和使用有两种方式去安装ESLint:全局和本地. 1.1本地安 ...
- maven3自定义archetype
maven使用起来还是很方便,但默认自带的archetype配置junit版本比较老.每次创建新项目都要手动修改junit版本,所以就想着能不能自己建一个新版本出来,省得每次手动修改的麻烦. 网上找了 ...
- 简单聊天室(java版)
这是本人从其他地方学习到的关于聊天室的一个模本,我从中截取了一部分关于客户端和服务端通信的Socket的内容.希望对大家对socket有个了解,我写的这些代码可以实现两人或多人在多台电脑上实现简单的对 ...
- java基础（数据类型，运算符）
java基础之数据类型(变量) java中存在的数据有常量和变量 常量:在程序执行的过程中其值不可以发生改变 常量的分类 字面值常量 字面值常量的分类 常量 描述 字符串常量 用双引号括起来的内容 整 ...
- Zim学习笔记 （Fedora）
俗话说好记性不如烂笔头, 对于一个搞IT的人来说最好的笔毫无疑问就应该是电脑了, 但最好的本呢? 之前一直在找一款适合自己的笔记软件, 找来找去只有Zim适合自己, 当然对于有编辑器之神之美誉的ema ...