1. 网格类的使用
使用到的类:container 水平居中
row 12等分布局
col-lg-6 大屏幕二等分
col-md-6 中等屏幕二等分
col-sm-6 小屏幕二等分
col-xs-6 超小屏幕二等分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1 class="page-header">Bootstrap</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-lg-6">
<h1 class="page-header">Bootstrap</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-6">
<h1 class="page-header">Bootstrap</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-6">
<h1 class="page-header">Bootstrap</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-sm-6">
<h1 class="page-header">Bootstrap</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-sm-6">
<h1 class="page-header">Bootstrap</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-xs-6">
<h1 class="page-header">Bootstrap</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-xs-6">
<h1 class="page-header">Bootstrap</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
</div>
</div>
</body>
</html>
2. 网格类混合使用
开始是col-md-6 二等分，当屏幕小到一定程度变成col-sm-8 二八分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8">
<h1 class="page-header">主体内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-6 col-sm-4">
<h1 class="page-header">边栏内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
</div>
</div>
</body>
</html>
3. 改变网格布局内容排序
主体内容由左边跑到右边，边栏内容由右边跑到左边
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<h1 class="page-header">主体内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-3 col-md-pull-9">
<h1 class="page-header">边栏内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
</div>
</div>
</body>
</html>
4. 嵌套布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<h1 class="page-header">主体内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
<div class="col-md-4">
<h1 class="page-header">主体内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-4">
<h1 class="page-header">主体内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-4">
<h1 class="page-header">主体内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
</div>
<div class="col-md-3 col-md-pull-9">
<h1 class="page-header">边栏内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
</div>
</div>
</body>
</html>
5. 清除浮动，根据屏幕宽度隐藏和显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
<h1 class="page-header">主体内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
<div class="col-md-4">
<h1 class="page-header">区域一</h1>
<!--visible-xs屏幕很小的时候显示-->
<p class="alert alert-info visible-xs">屏幕很小的时候显示</p>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-4">
<h1 class="page-header">区域二</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-4">
<h1 class="page-header">区域三</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<!--clearfix清除浮动-->
<div class="clearfix"></div>
<!--col-md-offset-6向右偏移6-->
<div class="col-md-6 col-md-offset-6">
<h1 class="page-header">区域四</h1>
<p class="alert-info">图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
<div class="col-md-6">
<h1 class="page-header">区域五</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
</div>
<!--hidden-md中等大小时隐藏-->
<div class="col-md-3 col-md-pull-9 hidden-md">
<h1 class="page-header">边栏内容</h1>
<p>图为澳大利亚海军最新接收的美制P-8A反潜巡逻机，也是全世界最先进的海上巡逻机，由波音737客机改装而来，最大航程超过8000公里，巡航速度为815公里/小时，可携带AGM-84鱼叉反舰导弹、AGM-84K对地导弹和AGM-65小牛导弹，同时可携带MK-46和MK-50等反潜反舰鱼雷，兼具反舰、反潜和对地攻击能力，用于取代美军及其盟友现有的P-3C巡逻机。
澳大利亚海军目前订购了8架，主要部署在该国北部地区，作战区域覆盖东南亚和西太大部分水域。</p>
</div>
</div>
</div>
</body>
</html>
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
