bootstrap4.0没法实现col-xs-6的功能， 切回3.3才生效 不知道为啥
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="with=device-with,initial-scale=1"> <title>Title</title> <link href="bootstrap.min.css" rel="stylesheet"> <style> .row{ margin-bottom: 20px; } .row.row { margin-top: 15px; margin-bottom: 0px; } [class*="col-"]{ padding-top: 15px; padding-bottom: 15px; background-color:#eeeeee ; border:1px solid #dddddd; background-color: rgba(86,61,124,15); border: 1px solid rgba(86,61,124,0.2); } </style> </head> <body> <!--栅格系统学习--> <div class="container"> <div class="row"> <!--<div class="col-md-4 col-sm-5 col-xs-6"> col-mad4 </div> --> <!--列偏移--> <!--<div class="col-md-8 col-sm-7 col-xs-6 col-md-offset-3"> col-mad8 </div> --> <!--嵌套列--> <!-- <div class="col-md-9"> col-md-9 <div class="row"> <div class="col-md-8 col-md-offset-1">col-md-8</div> </div> </div>--> <!-- 列排序--> <div class="col-md-9 col-md-push-3">col-md-9</div> <div class="col-md-3 col-md-pull-9">col-md-3</div> </div> </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form class="form-horizontal">
<!--通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。-->
<label class="col-md-2 control-label">Email</label>
<!--control-label 文本右对齐，一般不建议使用，因为不好看-->
<div class="col-md-10">
<input type="email" class="form-control">
</div>
<!--包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。--><textarea class="form-control" rows="3"></textarea>
</form>
<form>
<!--标准样式-->
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<!--对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项-->
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2">Email</label>
<div class="col-md-10">
<!--如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可-->
<p class="form-control-static">sxt@163.com</p>
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<form>
<div class="form-group"><!--更好抵到排列-->
<lable>用户名</lable><!--用于低版本浏览器的提示信息-->
<input type="email" class="form-control" placeholder="Email" /></div><!--所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;placeholder为框中提示的文字。 -->
<div class="form-group">
<lable>密码</lable>
<input type="password" class="form-control" placeholder="********"/>
</div>
<div class="form-group">
<lable>File input</lable>
<input type="file"/>
<p>选择您需要的文件</p>
</div>
<div class="checkbox">
<lable>
<input type="checkbox"/>女
</lable>
<lable>
<input type="checkbox"/>男
</lable>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<!--不要将表单组和输入框组混合使用,不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用-->
<!--内联表单-->
<!--为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。-->
<form class="form-inline">
<div class="form-group">
<label class="sr-only">username</label>
<!--一定要添加 label 标签如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
-->
<input type="email" class="form-control" placeholder="email" />
<div class="input-group">
</div>
</div>
<div class="form-group">
<label class="sr-only">password</label>
<input type="password" class="form-control" placeholder="********1"/>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"> $ </div>
<input type="email" class="form-control" placeholder="email" />
<div class="input-group-addon">.00</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<!--标准样式-->
<table class="table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!--斑马条纹样式，不支持ie8-->
<table class="table table-striped">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!--有边框-->
<table class="table table-bordered">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!--鼠标悬停-->
<table class="table table-hover">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
<!--紧缩表格，padding减半-->
<table class="table table-condensed">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<!--通过code包裹内联样式的代码段，< <，> >，转义符号，kbd终端颜色-->
<p>Hello Eveyone,欢迎来到<code>英雄联盟</code>，希望<您>能在<kbd>bootstrap</kbd>希望您<code>p</code>能在这里有个好的理解</p>
<!--多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。-->
<pre><p>Sample text here...</p></pre>
<!--max-height为350px，并在垂直方向显示滚动条-->
<pre class="pre-scrollable"><p>Sample text here...</p></pre>
<!--加减乘除不用包裹，声明变量-->
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<!--跟平时显示没区别，为了代码可读性，标记程序输出内容-->
<samp>This text is meant to be treated as sample output from a computer program.</samp>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!-- 描述：viewport（视图） device-width（设备宽度）
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
-->
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><!--外部样式表-->
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<!--功能：兼容ie8-->
</head>
<body>
<div class="container"><!--容器-->
<p>你好！</p>
</div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--描述：bootstrap依赖于jquery，所以jquery先导入，顺序不能乱-->
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!-- viewport:视口，内容：当前宽度=设备宽度，缩放比为1-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
最大缩放比为1，禁用缩放比
-->
<title>全局css样式</title>
</head>
<body><!--•使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数-->
<div class="container"><!--Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。-->
<!--.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
这两种 容器类不能互相嵌套。
-->
<p>给他一个内容</p>
<!--P标签：
默认:14px
行高：20px
底部外边距：10px-->
</div>
<a href="#">Hello World!</a>
<!--•为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<title>全局css样式栅格系统</title>
<style type="text/css">
.row{
margin-bottom: 20px;
}
.row .row{
margin-top: 10px;
margin-bottom: 0;
}/*后面.row里面会嵌套.row,这里先写了不影响效果*/ [class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
background-color: rgba(86,61,124,0.5);
border: 1px solid rgba(86,61,124,0.2);
}/*通配符*=可以增加所有col-样式*/
</style>
</head>
<body>
<div class="container"><!--容器-->
<div class="row"><!--•“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。-->
<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-12</div>
<div class="row">
<div class="col-md-1">col-md-12</div>
</div>
<!--xs:超小屏幕 手机 (<768px),sm:小屏幕 平板 (≥768px),md:中等屏幕 桌面显示器 (≥992px),lg:大屏幕 大桌面显示器 (≥1200px) -->
<!--•通过“行（row）”在水平方向创建一组“列（column）”。•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。-->
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<title>全局css样式栅格系统</title>
<style type="text/css">
.row{
margin-bottom: 20px;
}
.row .row{
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
background-color: rgba(86,61,124,0.5);
border: 1px solid rgba(86,61,124,0.2);
}
</style>
</head>
<body>
<div class="container"><!--容器-->
<div class="row"><!--栅格系统一共12份，加起来不超过12份就可以-->
<div class="col-md-4 col-xs-6">col-md-4</div>
<div class="col-md-8 col-xs-6">col-md-8</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12">col-md-4</div>
<div class="col-md-8 col-sm-7 col-xs-6">col-md-8</div>
<!--随着屏幕大小变化显示栅栏数-->
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-12">col-md-4,col-md-4,
col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,col-md-4,</div><!--超出部分会另起一行显示，只增加高度，不增加宽度-->
<div class="col-md-8 col-xs-6 col-md-offset-4">col-md-8</div>
<!--语法使用 .col-md-offset-* 类可以将列向右侧偏移。-->
</div>
<!--行的嵌套，同样总数不超过12，没必要占满-->
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-5 col-md-offset-1">
col-md-8
</div>
</div>
</div>
</div>
<!--通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
push相当于在前面增加*个空位，pull相当于在后面增加*个空位，两者可以重叠
-->
<div class="row">
<div class="col-md-9 col-md-push-3">col-md-9</div>
<div class="col-md-3 col-md-pull-9">col-md-3</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>排版</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<!--HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。-->
<!--在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。-->
<h1>这是一个h1标签<small>这是一个副标题</small></h1>
<h2>这是一个h2标签<small>这是一个副标题</small></h2>
<h3>这是一个h3标签<small>这是一个副标题</small></h3>
<h4>这是一个h4标签<small>这是一个副标题</small></h4>
<h5>这是一个h5标签<small>这是一个副标题</small></h5>
<h6>这是一个h6标签<small>这是一个副标题</small></h6>
<!--Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。-->
<p>欢迎来到阿里云大学，希望您能通过本套课程以及bootstrap中文网来学习bootstrap开源框架<br />欢迎来到阿里云大学，希望您能通过本套课程以及bootstrap中文网来学习bootstrap开源框架</p>
<p>欢迎来到阿里云大学，希望您能通过本套课程以及bootstrap中文网来学习bootstrap开源框架</p>
<!--段落突出-->
<p class="lead">欢迎来到阿里云大学，希望您能通过本套课程以及bootstrap中文网来学习bootstrap开源框架</p>
</div>
</body>
</html>
这是效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>排版02</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<!--标记哈，给mark的字增加淡黄色背景色-->
<!--del和s,ins和u都会出现删除线，效果一样，都会出现时为了增加代码阅读性>-->
<!--small将被设置为父容器字体大小的 85%,和标题的small的font-size不同
-->
<p>欢迎来到<mark>阿里云大学</mark>，<ins>希望</ins>您能通过<del>本套本套本套本套本套本套</del>课程以及bootstrap中文网来学习bootstrap开源框架<br /><s>欢迎来到阿里云大学</s>，<u>希望</u><small>您能通过本套课程以及bootstrap中文网来学习bootstrap开源框架</small></p>
<!--strong着重（增加font-weight值），em斜体-->
<p>欢迎来到<strong>阿里云大学</strong>，<em>希望您能通过本套本套本套</em>本套本套本套课程以及bootstrap中文网来学习bootstrap开源框架</p>
<!--left：左，right：右，center：中，，justify：整理，nowrap：禁止文字自动换行-->
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
<!--依次是全文小写，全文大写，首字母大写-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<!-- <abbr> 元素的增强样式。缩略语元素带有 title ，文字下方有虚线，鼠标悬停文字上方时有问号同时title里的字符串会显示-->
<abbr title="attribute sdafasdfasdfasdfasdf">attrsdfsdf</abbr>
<!--为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些-->
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<!--address中让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。-->
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
</div>
</body>
</html>
中文官网：bootcss.com
2倍速的听，这语速。。厉害了，但是语速快但是咬字还是清楚的。
基本模板
