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

时间：2023-01-25 06:33:32
 最近一直在写页面，上周真的是写完一个又一个的页面。通过写这些页面，也是接触到了BootStrap中很多的常用插件，类似我们之前所说的控件。下面就来看看BootStrap中会给我们带来哪些眼前一亮的插件。
   本篇博客将介绍下拉菜单、列表、单选按钮、tab切换和tiles案例（win8页面）五种。
 【具体介绍】
************************** BootStrap下拉菜单（Dropdowns）***************************
  •  Usage
        Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.

<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
【BootStrap】陌生=》熟悉=》惊喜【BootStrap】陌生=》熟悉=》惊喜
  •  Code
HTML：

<!-- 下拉菜单的实现 -->
<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
        Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.

<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
    【BootStrap】陌生=》熟悉=》惊喜             【BootStrap】陌生=》熟悉=》惊喜
  •  Code
HTML：

<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
        Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.
<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

【BootStrap】陌生=》熟悉=》惊喜【BootStrap】陌生=》熟悉=》惊喜
  •  Code
HTML：

 <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
        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
【BootStrap】陌生=》熟悉=》惊喜   【BootStrap】陌生=》熟悉=》惊喜
<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
【BootStrap】陌生=》熟悉=》惊喜
  •  Code
HTML:
 <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系统界面。
 就这样，一点点前进中......
标签：

相关文章