【BootStrap】陌生=》熟悉=》惊喜

• ?Usage

• ?My practice

• ?Code

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;
        }

      }

    }

<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,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开始页面。链接地址

• ?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系统界面。

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