index.html

﻿<!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中国-逐浪CMS引领网站开发新潮流</title>
<meta name="Keywords" content="boot,bootstrap">
<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">
</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="v4">BootStrap 4</a></li>
    <li class="nav-item"><a class="nav-link " href="//code.z01.com/Boot/">Bootstrap 3</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="v4/"><img src="v4/assets/img/bootstrap-stack.png" alt="Boostrap 4.0"></a>
<h1 class="home_h1">Bootstrap最优前端开发体验<small class="text-muted">以及五大组合利器</small></h1>
<div class="text-center">
<a class="btn btn-primary " role="button" href="v4/">马上体验BootStrap 4</a>
<a class="btn btn-info" role="button" href="Sass/">Sass扩展CSS语言</a>
<a class="btn btn-secondary" role="button" href="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="https://github.com/zoomla/bootstrap4-zhcn-documentation" >Github代码仓库</a></p>

</div>
</main>

<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://wei.z01.com" target="_blank">
<i class="zi zi_mobilealt"></i>
<span class="glyphicon-class">微首页</span>
</a>
</li>
<li>
<a href="http://wei.z01.com/Class_1/Default.aspx" 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>
</ul>
</div>
<div class="clearfix"></div>
</div>

<div class="container">
一个简明的Bootstrap 4框架（只区分pc与手机并基于FlexBox布局）：
<figure class="alert alert-primary">
<p>
&lt;div class=&quot;container&quot;&gt;<br>
&lt;div class=&quot;row&quot;&gt;<br>
&lt;div class=&quot;col-sm&quot;&gt;<br/><br/>
&lt;/div&gt;<br/>
&lt;/div&gt;<br>
&lt;/div&gt;
</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>
&lt;div class=&quot;container&quot;&gt;<br>
&lt;div class=&quot;row&quot;&gt;<br>
&lt;div class=&quot;col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12&quot;&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;div class=&quot;col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12&quot;&gt;</p>
<p>&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;/div&gt;</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>
&lt;div class=&quot;container&quot;&gt;<br>
&lt;div class=&quot;row&quot;&gt;<br>
&lt;div class=&quot;col-lg-6 col-md-6 col-sm-6 col-xs-12&quot;&gt;</p>
<p>&lt;/div&gt;</p>
<p>&lt;div class=&quot;col-lg-6 col-md-6 col-sm-6 col-xs-12&quot;&gt;</p>
<p>&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;/div&gt;</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/>
&lt;div class=&quot;d-block d-sm-none&quot;&gt;谢帅，我只在手机下显啦，宽屏我羞！&lt;/div&gt;<br>
&lt;div class=&quot;d-none d-sm-block&quot;&gt;哥们，不要太老套，我粗人不喜欢手机屏幕，大方点在PC上给我丢出来！&lt;/div&gt;
</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://wei.z01.com/Class_1/NodeNews.aspx" 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="js/jquery-3.2.1.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>