最近一直在写页面，上周真的是写完一个又一个的页面。通过写这些页面，也是接触到了BootStrap中很多的常用插件，类似我们之前所说的控件。下面就来看看BootStrap中会给我们带来哪些眼前一亮的插件。
本篇博客将介绍下拉菜单、列表、单选按钮、tab切换和tiles案例（win8页面）五种。
【具体介绍】
************************** BootStrap下拉菜单（Dropdowns）***************************
- Usage
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
下拉菜单（Dropdown） <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>
- My practice
- Code
<!-- 下拉菜单的实现 -->
<div class="dropdown">
<ul class="dLabel luxury" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="imgversion" src="../style/images/icon-豪华版_11.png"/>
<div class="version luxury">豪华版</div>
<div class="fontcharacter">︾</div>
</ul>
<ul class="dropdown-menu ultimate">
<li><img class="imgversion dropdownlist-two" src="../style/images/icon-豪华版_11.png"/></li>
<li class="version luxury ultimate">旗舰版</li>
</ul>
<ul class="dropdown-menu standard">
<li><img class="imgversion dropdownlist-two" src="../style/images/icon-豪华版_11.png"/></li>
<li class="version luxury standard">标准版</li>
</ul>
</div>
Less：
@margin-left-body: 16px;
@menu: 140px;
.dropdown { /* 下拉菜单尺寸设置 */
width: @margin-left-body + @menu;
height: @menu;
&.open { /* 下拉菜单展开尺寸设置 */
width: @margin-left-body + @menu;
height: @menu;
}
ul.dropdown-menu { /* 下拉菜单背景颜色，位置设置 */
margin-left: @margin-left-body;
background-color: #508cf9;
height: @menu;
&.ultimate { /* 下拉菜单展开背景颜色，位置设置 */
width: @menu;
margin-top: 0px;
background-color: #85aefb;
}
&.standard {
width: @menu;
margin-top: 138px;
background-color: #96b9fb;
}
}
.dLabel {
&.luxury { /* 豪华版菜单样式设置 */
height: @menu;
width: @menu + @margin-left-body;
margin-left: @margin-left-body;
background-color: #508cf9;
padding-left: 0px;
}
}
.imgversion { /* 菜单中各个版本图片位置设置 */
margin-top: 14px;
margin-left: 50px;
&.dropdownlist-one {
margin-left: 45px;
margin-top: 14px;
}
&.dropdownlist-two {
margin-left: 45px;
margin-top: 14px;
}
}
.fontcharacter { /* 首菜单下拉标识尺寸位置设置 */
margin-left: 70px;
margin-top: -20px;
width: 40px;
}
.version { /* 菜单中版本信息字体设置 */
font-size: 30px;
&.luxury {
width: 100px;
height: 50px;
margin-left: 35px;
margin-top: 6px;
&.ultimate {
margin-top: -65px;
}
&.standard {
margin-top: -65px;
}
}
}
}
************************** BootStrap列表（List）***************************
- Usage
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
- My practice
- Code
<div class="personaltext-content colorset">
<span class="perfect-circle"></span>
<div class="colortag">玫瑰金</div>
</div>
<div class="personaltext-fontset">颜色：</div>
<div class="line"></div>
<ul class="list-group-color">
<li class="list-group-item colorone" onclick="listcolorHide()"><span class="circle gold"></span> 玫瑰金</li>
<li class="list-group-item colortwo" onclick="listcolorHide()"><span class="circle pink"></span> 浅粉红</li>
<li class="list-group-item colorthree" onclick="listcolorHide()"><span class="circle purple"></span> 紫罗兰</li>
</ul>
Less：
@listtwo-margin-top: 100px;
@listthree-margin-top: 200px;
ul {
&.list-group-fontfamily {
margin-bottom: 0px;
display: none;
}
li.list-group-item {
z-index: 4;
position: absolute;
width: 80%;
height: 100px;
margin-left: 60px;
padding-left: 60px;
padding-right: 15px;
padding-top: 30px;
&.fontone {
color: #e70116;
}
&.fonttwo {
margin-top: @listtwo-margin-top;
}
&.fontthree {
margin-top: @listthree-margin-top;
}
}
************************** BootStrap单选按钮（Radio）***************************
- Usage
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
选项 2 - 选择它将会取消选择选项 1
</label>
</div>
- My practice
- Code
<div class="personaltext-fontset">位置：</div>
<div class="position">
<span class="textpostion">lenovo</span>
<input type="radio" class="radio righttop" name="radioposition">
<input type="radio" class="radio middle" name="radioposition">
<input type="radio" class="radio leftbottom" name="radioposition">
<input type="radio" class="radio rightbottom" name="radioposition">
</div>
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;
}
}
}
************************** BootStrap标签页（Tab）***************************
- Usage
<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
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile selected"></div>
<div class="tile bg-color-orange"></div>
- My practice
- Code
<div class="container01" onclick="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系统界面。
就这样，一点点前进中......