• Usage

        Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.

• My practice

•  Code

HTML：

Less：

 .position {width: 310px;height: 210px;background-color: #B5B5B5;-moz-border-radius: @radius; /* Gecko browsers */-webkit-border-radius: @radius; /* Webkit browsers */border-radius: @radius; /* W3C syntax */.textpostion {color: #FFFFFF;margin-left: 25px;}.radio {width: 40px;height: 40px;float: right;position: relative;margin-top: 30px;margin-right: 45px;background-color: #FFFFFF;&.middle {margin-right: 60px;margin-top: 85px;}&.leftbottom {float: left;margin-left: 45px;margin-top: 115px;margin-right: 40px;}&.rightbottom {margin-left: 0px;margin-top: 30px;margin-bottom: 0px;margin-right: 45px;}}}

        Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.

<div class="tab-content"><div class="tab-pane fade in active" id="home">...</div><div class="tab-pane fade" id="svn">...</div><div class="tab-pane fade" id="ios">...</div><div class="tab-pane fade" id="java">...</div>
</div>

• My practice

<ul class="nav nav-tabs configTab"><li class="myConfig"><a href="#add0" data-toggle="tab"><img class="myConfigIcon" src="../style/images/icon-我的配置.png" alt="我的配置"/><div>我的配置</div></a></li></ul><ul class="nav nav-tabs configTab innerUl"><li class="innerTab"><a href="#personalpicture" data-toggle="tab"><img class="myConfigIcon" src="../style/images/icon-个性化图片.png" alt="个性化图片"/><div>个性化图片</div></a></li><li class="innerTab"><a href="#personaltext" data-toggle="tab"><img class="myConfigIcon" src="../style/images/icon-个性化文字.png" alt="个性化文字"/><div>个性化文字</div></a></li><li class="innerTab"><a href="#laser" data-toggle="tab"><img class="myConfigIcon" src="../style/images/icon-镭雕工艺.png" alt="镭雕工艺"/><div>镭雕工艺</div></a></li><li class="innerTab"><a href="#add1" data-toggle="tab"><img class="myConfigIcon" src="../style/images/icon-内存.png" alt="内存"/><div>内存</div></a></li><li class="innerTab"><a href="#add1" data-toggle="tab"><img class="myConfigIcon" src="../style/images/icon-硬盘.png" alt="硬盘"/><div>硬盘</div></a></li>
</ul>

Less:

  ul {float: left;border: none;}.configTab {.myConfig {width: 140px;height: 100%;background-color: #508cF9;border-radius: 25px 25px 0 0;margin: 0 20px 0 0;box-shadow: 1px 1px 6px 1px rgba(90, 90, 90, 0.5);a {margin: 0;padding: 0;border: none;.myConfigIcon {position: relative;top: 16px;}div {margin-right: 0;margin-top: 24px;border: none;padding: 0;color: #fff;font-size: 20px;white-space: nowrap;}}}li.active {border-bottom: none;background-color: #518bf9;border-radius: 25px 25px 0 0;a {border-bottom: none;background-color: #518bf9;border-radius: 25px 25px 0 0;}}}.innerUl {float: left;.innerTab {width: 105px;height: 100%;margin-right: 43px;border-bottom: none;a {padding: 0;.myConfigIcon {position: relative;top: 16px;}div {margin-right: 0;margin-top: 24px;border: none;padding: 0;color: #949494;font-size: 20px;white-space: nowrap;}}}li.active {border: 1px solid #518bf9;border-bottom: none;background-color: #eef2f5;border-radius: 20px 20px 0 0;a {border: 1px solid #518bf9;border-bottom: none;background-color: #eef2f5;border-radius: 20px 20px 0 0;}}
}

其实，这是我看见的一个案例，BootStrap如何实现win8开始页面。链接地址

************************** BootStrap Metro UI CSS ***************************

• Usage

        Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.

<div class="tile"></div><div class="tile double"></div><div class="tile selected"></div><div class="tile bg-color-orange"></div>

• My practice

•  Code

HTML:

 <div class="container01" οnclick="Show()"><span class="conInf">1 TB 5400转</span><span class="infPrice">-￥500</span></div><div class="tile selected" style="display: none;"></div><div class="container" style="display: none;"><span class="conInf">1 TB 5400转</span><span class="infPrice">-￥500</span></div>

Less:

//win8 tile组件选中状态设置.tile.selected{margin-top: 14px;height: 58px;width: 298.797px;border:4px #4390df solid;&.two{margin-top: 40px;}}.tile.selected:after{position: absolute;display: block;border-bottom: 34px solid #4390df;border-left: 40px solid transparent;right: 10%;top: 18.5%;content: '';z-index: 101;}.tile.selected:before{position: absolute;display: block;content: "\e013";color: #FFFFFF;right: 10%;top: 18.5%;font-family: "Glyphicons Halflings";font-size: 10pt;font-weight: normal;z-index: 102;padding-top: 8px;width: 20px;height: 10px;margin-top: 3px;}

  【项目收获】   陌生

    BootStrap虽然没有接触过，在刚来的时候，也不记得要去用它。组长就提醒我，XX地方可以直接用BootStrap的样式。

   熟悉

   到现在，做的多了，在想怎么去实现之前，都会去查查BootStrap中有没有可以满足我的。再后来，BootStrap原本的一些样式满足不了我的需求，就会去找找其他的经过美化后的样式。

   惊喜

 五一两天，回去看了本书，竟惊喜的发现，BootStrap又一个很炫酷的东西，我们可以在它的基础上直接实现Win8系统界面。

       就这样，一点点前进中......