代码拉取完成，页面将自动刷新
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="msapplication-TileColor" content="#1A0066"/>
<meta name="msapplication-TileImage" content="/images/win8_symbol_140x140.png"/>
<link rel="icon" href="https://www.z01.com/favicon.ico">
<title>BootStrap-Vue中国-逐浪CMS引领网站开发新潮流</title>
<meta name="Keywords" content="boot,bootstrap,cscc">
<meta name="Description" content="BootStrap及相关开发文档">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >
<meta name="msapplication-TileColor" content="#1A0066"/>
<meta name="msapplication-TileImage" content="https://www.z01.com/Template/office/style/images/win8_symbol_140x140.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="https://www.z01.com/Template/office/style/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="76x76" href="https://www.z01.com/Tempalte/office/style/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="120x120" href="https://www.z01.com/Template/office/style/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="https://www.z01.com/Template/office/style/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="https://www.z01.com/Template/office/style/icons/apple-touch-icon-180x180.png" />
<link rel="icon" sizes="192x192" href="https://www.z01.com/Template/office/style/icons/android-icon-192x192.png" />
<link href="v4/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="v4/dist/css/zico.min.css" rel="stylesheet"/>
<link href="v4/assets/css/doc2017.css" rel="stylesheet">
<style type="text/css">
.bv-logo{width:30rem;}
</style>
</head>
<body>
<header class="navbar navbar-expand flex-column flex-md-row fixed-top bs_docs2017_head"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
<title>Bootstrap</title>
<path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
<path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
</svg>
</a>
<div class="navbar-nav-scroll">
<div class="pull-left">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3 navbar-toggle" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
<title>Menu</title>
<path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
</svg>
</button>
</div>
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item"><a class="nav-link " href="http://www.z01.com/">逐浪官网</a></li>
<li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4/">BootStrap 4</a></li>
<li class="nav-item"><a class="nav-link " href="bootstrap-vue/">Bootstrap Vue</a></li>
<li class="nav-item"><a class="nav-link " href="http://v.z01.com" target="_blank">H5移动创作</a></li>
<li class="nav-item"><a class="nav-link " href="http://v.ziti163.com/" target="_blank">字体大师</a></li>
<li class="nav-item"><a class="nav-link " href="//ico.z01.com">zico图标</a></li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/mtv" target="_blank" rel="noopener" aria-label="Twitter">
CMS视频
</a> </li>
<li class="nav-item"> <a class="nav-link p-2" href="http://v.z01.com/mb" target="_blank" rel="noopener" aria-label="Slack">
模板中心
</a> </li>
<li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 其它资源 </a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> <a class="dropdown-item active" href="http://help.z01.com/HelpLabel.aspx" target="_blank">标签工具</a> <a class="dropdown-item" href="http://ad.z01.com" target="_blank">广告源码</a> <a class="dropdown-item" href="http://www.z01.com/tool">IIS工具</a> <a class="dropdown-item" href="http://help.z01.com">使用手册</a> <a class="dropdown-item" href="http://bbs.z01.com">技术论坛</a> </div>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-0" href="http://www.z01.com/pub" target="_blank"><i class="zi zi_clouddownloadalt"></i> 下载Zoomla!逐浪CMS</a> </header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item">
<ul class="list-inline">
<li class="list-inline"><a class="bd-toc-link" href="http://www.z01.com/">逐浪官网</a></li>
<li class="list-inline"><a class="bd-toc-link" href="http://help.z01.com">使用手册</a></li>
<li class="list-inline"><a class="bd-toc-link" href="http://ad.z01.com" target="_blank">广告源码</a></li>
<li class="list-inline"><a class="bd-toc-link" href="http://bbs.z01.com">技术论坛</a> </a></li>
<li class="list-inline"><a class="bd-toc-link" href="http://v.z01.com/mb"> 模板中心</a></li>
</ul>
</div></nav>
</div>
</div>
</div>
<main class="bs_docs2017" id="content" role="main">
<div class="container">
<a href="bootstrap-vue/">
<svg data-v-555a030c="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200" version="1.1" shape-rendering="geometricPrecision" fill-rule="evenodd" clip-rule="evenodd" preserveAspectRatio="xMidYMid meet" role="img" focusable="false" class="bv-logo">
<title data-v-555a030c="">BootstrapVue</title>
<defs data-v-555a030c="">
<filter data-v-555a030c="" id="logo-shadow" filterUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
<feOffset data-v-555a030c="" in="SourceAlpha" dx="-10" dy="25" result="ALPHA1"></feOffset>
<feMorphology data-v-555a030c="" in="ALPHA1" operator="dilate" radius="15" result="ALPHA"></feMorphology>
<feGaussianBlur data-v-555a030c="" in="ALPHA" stdDeviation="20" result="DROP"></feGaussianBlur>
<feFlood data-v-555a030c="" in="DROP" flood-color="#333" result="SOLID"></feFlood>
<feComposite data-v-555a030c="" in="DROP" in2="SOLID" operator="in" result="SHADOW1"></feComposite>
<feComponentTransfer data-v-555a030c="" in="SHADOW1" result="SHADOW">
<feFuncA data-v-555a030c="" type="linear" slope="0.55"></feFuncA>
</feComponentTransfer>
<feMerge data-v-555a030c="">
<feMergeNode data-v-555a030c="" in="SHADOW"></feMergeNode>
<feMergeNode data-v-555a030c="" in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g data-v-555a030c="">
<g data-v-555a030c="" filter="url(#logo-shadow)" class="logo-dark-v">
<path data-v-555a030c="" fill="#34495E" d="M747 311L602 562 458 311H227l375 651 376-651z"></path>
</g>
<g data-v-555a030c="" filter="url(#logo-shadow)" class="logo-purple-v">
<path data-v-555a030c="" fill="#563D7C" fill-rule="nonzero" d="M219 195h762L599 857z"></path>
<path data-v-555a030c="" fill="#ffffff" d="M501 282l132 0c25,0 44,5 59,16 15,12 22,28 22,51 0,14 -3,26 -10,35 -7,10 -16,18 -29,23l0 1c17,3 30,11 38,24 9,12 13,27 13,46 0,11 -2,21 -6,30 -3,9 -9,17 -17,24 -9,6 -19,12 -32,16 -12,4 -28,6 -45,6l-125 0 0 -272 0 0zm48 114l77 0c12,0 21,-4 29,-10 8,-7 11,-16 11,-28 0,-14 -3,-24 -10,-29 -7,-6 -17,-9 -30,-9l-77 0 0 76 0 0zm0 119l84 0c14,0 26,-4 33,-11 8,-8 13,-19 13,-32 0,-14 -4,-24 -13,-31 -8,-8 -19,-11 -33,-11l-84 0 0 85z" class="logo-white-b"></path>
</g>
<g data-v-555a030c="" filter="url(#logo-shadow)" class="logo-green-v">
<path data-v-555a030c="" fill="#41B883" d="M839 357L600 771 361 357H202l398 690 398-690z"></path>
</g>
</g>
</svg>
</a>
<h1 class="home_h1">Bootstrap Vue卓越前端开发体验<small class="text-muted">以及五大组合利器</small></h1>
<div class="text-center">
<a class="btn btn-primary " role="button" href="bootstrap-vue">马上体验BootStrap Vue</a>
<a class="btn btn-dark " role="button" href="bootstrap-vue/">BootStrap Vue</a>
<a class="btn btn-info" role="button" href="http://code.z01.com/Sass/">Sass扩展CSS语言</a>
<a class="btn btn-secondary" role="button" href="http://code.z01.com/Emmet/">Emmet简写Web语法</a>
<a class="btn btn-light " role="button" href="http://ico.z01.com">zico图标系统</a>
<a class="btn alert-danger" role="button" href="http://www.ziti163.com/uni">Unicode全球字符集</a>
</div>
<p class="version" style="margin-top:1em;">翻译:@Zoomla!逐浪CMS发哥 <a href="http://weibo.com/zoomla" target="_blank" ><i class="zi zi_tmWeibo"></i></a> <a href="/boot/" hidden>旧版Bootstrap 3.3.7文档</a></p>
</div>
</main>
<div class="container mt-2 text-center">
<div class="btn-group" role="group" aria-label="Basic example">
<a href="/doc/vscode.html" class="btn btn-outline-secondary"><i class="zi zi_tmVisualstudio"></i> vs code使用技巧</a>
<a href="//dict.ziti163.com/" class="btn btn-secondary">字典</a>
<a href="//www.ziti163.com/photo/" class="btn btn-secondary">字体墙</a>
<a href="//v.ziti163.com/" class="btn btn-outline-dark">在线做字</a>
</div>
</div>
<div class="container">
<div class="bs-glyphicons">
<ul class="bs-glyphicons-list">
<li>
<a href="http://help.z01.com/boot.html" target="_blank">
<i class="zi zi_tmSellcast"></i>
<span class="glyphicon-class">BootStrap建模工具(框架助手)</span>
</a>
</li>
<li>
<a href="http://app.z01.com" target="_blank">
<i class="zi zi_mobilealt"></i>
<span class="glyphicon-class">微首页</span>
</a>
</li>
<li>
<a href="http://v.z01.com" target="_blank">
<i class="zi zi_flagBold"></i>
<span class="glyphicon-class">场景列表</span>
</a>
</li>
<li>
<a href="http://help.z01.com/tool/" target="_blank">
<i class="zi zi_cog"></i>
<span class="glyphicon-class">IIS站长工具</span>
</a>
</li>
<li>
<a href="http://www.ziti163.com/webfont/" target="_blank">
<i class="zi zi_fonts"></i>
<span class="glyphicon-class">WebFont</span>
</a>
</li>
<li>
<a href="http://ad.z01.com/" target="_blank">
<i class="zi zi_audiodescription"></i>
<span class="glyphicon-class">广告源码</span>
</a>
</li>
<li>
<a href="http://ad.z01.com/color.html" target="_blank">
<i class="zi zi_tachometeralt"></i>
<span class="glyphicon-class">网页配色</span>
</a>
</li>
<li>
<a href="http://code.z01.com/v4/" target="_blank">
<i class="zi zi_tv"></i>
<span class="glyphicon-class">响应式工具</span>
</a>
</li>
<li>
<a href="http://v.z01.com/mb/" target="_blank">
<i class="zi zi_tshirt"></i>
<span class="glyphicon-class">免费模板</span>
</a>
</li>
<li>
<a href="http://www.z01.com/pub/" target="_blank">
<i class="zi zi_download"></i>
<span class="glyphicon-class">下载逐浪CMS</span>
</a>
</li>
<li>
<a href="http://bbs.z01.com/index" target="_blank">
<i class="zi zi_newMsg"></i>
<span class="glyphicon-class">技术社区</span>
</a>
</li>
<li>
<a href="http://z01.com/mtv/" target="_blank">
<i class="zi zi_fileVideohei"></i>
<span class="glyphicon-class">视频教程</span>
</a>
</li>
<li>
<a href="https://z01.com/blog/techs/2975.shtml" target="_blank">
<i class="zi zi_child"></i>
<span class="glyphicon-class">Emmet</span>
</a>
</li>
<li>
<a href="http://tool.73ic.com/Item/59.aspx" target="_blank">
<i class="zi zi_tmHtml5"></i>
<span class="glyphicon-class">HTML5标签大全</span>
</a>
</li>
<li>
<a href="https://z01.com/blog/techs/2975.shtml" target="_blank">
<i class="zi zi_globe"></i>
<span class="glyphicon-class">全球UNI字符码</span>
</a>
</li>
<li><a href="http://help.z01.com/Pwa/" target="_blank">
<i class="zi zi_stroopwafel"></i>
<span class="glyphicon-class">PWA浙进式技术</span></a>
</li>
<li><a href="doc/git.html" target="_blank">
<i class="zi zi_tmGit"></i>
<span class="glyphicon-class">Git技巧</span></a>
</li>
<li><a href="doc/vue.html" target="_blank">
<i class="zi zi_tmVimeov"></i>
<span class="glyphicon-class">Vue cli速记</span></a>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="container">
一个简明的Bootstrap 4框架（只区分pc与手机并基于FlexBox布局）：
<figure class="alert alert-primary">
<p>
<div class="container"><br>
<div class="row"><br>
<div class="col-sm"><br/><br/>
</div><br/>
</div><br>
</div>
</figure>
<div class="alert alert-primary" role="alert">
Emment语法：<br/>
div.container>div.row>div.col-sm
</div>
<hr/>
一个完整的Bootstrap 4全栅格定义框架：
<figure class="alert alert-info">
<p>
<div class="container"><br>
<div class="row"><br>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12"></p>
<p></div></p>
<p><div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12"></p>
<p></div><br>
</div><br>
</div></p>
</figure>
<div class="alert alert-info" role="alert">
Emment语法：<br/>
div.container>div.row>div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12+div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12
</div>
<hr/>
一个快速的Bootstrap 3:框架：
<figure class="alert alert-danger">
<p>
<div class="container"><br>
<div class="row"><br>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></p>
<p></div></p>
<p><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></p>
<p></div><br>
</div><br>
</div></p>
</figure>
<div class="alert alert-danger" role="alert">
Emment语法：<br/>
div.container>div.row>div.col-lg-8.col-md-8.col-sm-8.col-xs-12+div.col-lg-4.col-md-4.col-sm-4.col-xs-12
</div>
<div class="alert alert-danger" role="alert">
手机与PC区分的响应式简单规则：<br/>
<div class="d-block d-sm-none">谢帅，我只在手机下显啦，宽屏我羞！</div><br>
<div class="d-none d-sm-block">哥们，不要太老套，我粗人不喜欢手机屏幕，大方点在PC上给我丢出来！</div>
</div>
这些是常用的属性<br/>
隐藏：hidden 清除边界：clearfix<br/><br/>
仅在指定屏幕下显示：visible-xs<br>
<br>
center-block<br/>
list-unstyled：不显示前缀点<br/>
列偏移：.offset-md-*
文本对齐：
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
text-capitalize 利用 <br/>
text-center 居中<br/>
text-danger 加红危险<br/>
text-hide 隐藏文字<br/>
text-info 信息<br/>
text-justify 字体对齐（齐行——<br/>
text-left 文字左对齐<br/>
text-lowercase 小写（仅英文）<br/>
text-muted 静音<br/>
text-nowrap 不换行<br/>
text-primary 原生效果<br/>
text-right 文字居右<br/>
text-success 成功<br/>
text-uppercase 文字大写（仅英文）<br/>
text-warning 警告红色<br/>
<br/><br/>
<p>文字分别是8种样式：柔和灰（text-muted）、主要蓝（text-primary）、成功绿（text-secondary）、成功红（text-success）、危险红（text-danger）、警告黄（text-warning）、危息绿（text-info）、黑白对比（text-dark）:</p>
<ol>
<li><p class="text-muted">JavaScript编程精解</p></li>
<li><p class="text-primary">JavaScript设计模式</p> </li>
<li><p class="text-secondary">JavaScript启示录</p> </li>
<li><p class="text-success">Backbone应用开发实战</p> </li>
<li><p class="text-danger">深入理解Bootstrap</p> </li>
<li><p class="text-warning">深入理解Bootstrap</p> </li>
<li><p class="text-info">深入理解Bootstrap</p> </li>
<li><p class="text-dark">深入理解Bootstrap</p> </li>
</ol><br/><br/>
背景是7款样式：主要蓝（bg-primary）、成功绿（bg-secondary）、成功红（bg-success）、危险红（bg-danger）、警告黄（bg-warning）、危息绿（bg-info）、黑白对比（bg-dark）
<br/><br/>
</div>
<div style="height:50px;"></div>
<nav class="navbar fixed-bottom bs_docs2017footer" role="navigation">
<div class="container">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 offset-md-3 home_form">
<form action="http://app.z01.com/Class_2/NodePage" method="get" target="_blank">
<div class="input-group">
<input name="Url" id="Url" type="text" class="form-control" placeholder="Search for..." value="http://www.z01.com">
<span class="input-group-btn">
<button class="btn btn-info" type="submit"><i class="zi zi_search"></i> 检验响应式支持</button>
</span>
</div>
</form>
</div>
</div>
</nav>
<script src="v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="v4/dist/js/popper.min.js"></script>
<script src="v4/dist/js/bootstrap.min.js"></script>
<script>
//跳转路由
var URL = { list: [], wait: 3, url: "", timer: null };
URL.list["code.zoomla.cn"] = "code.z01.com";
//URL.list["localhost"] = "www.z01.com";
$(function () {
var host = location.host.toLowerCase();
if (URL.list[host]) {//匹配
URL.url = "http://" + URL.list[host];
$("#msg_div").html("2016年7月逐浪软件启用全新国际顶级域名z01.com=>系统" + "<span class='time_sp'>" + URL.wait + "</span>秒后自动跳转到新网址<a href='" + URL.url + "'>" + URL.url + "</a>");
//自动计时与跳转
URL.timer = setInterval(function () {
URL.wait--;
if (URL.wait <= 1) { clearInterval(URL.timer); location = URL.url; }
$(".time_sp").text(URL.wait);
}, 1000);
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。