脚本宝典收集整理的这篇文章主要介绍了html5教程-【BootStrap】陌生=》熟悉=》惊喜，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

    最近一直在写页面，上周真的是写完一个又一个的页面。通过写这些页面，也是接触到了BootStrap中很多的常用插件，类似我们之前所说的控件。下面就来看看BootStrap中会给我们带来哪些眼前一亮的插件。  本篇博客将介绍下拉菜单、列表、单选按钮、tab切换和tiles案例（win8页面）五种。   【具体介绍】

        下拉菜单（Dropdown）       

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

                          玫瑰金

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

   选项 1  

  位置：

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

   ...

 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;     }     p {    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;     }     p {    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开始页面。链接地址

               1 TB 5400转             -￥500   

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

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

    最近一直在写页面，上周真的是写完一个又一个的页面。通过写这些页面，也是接触到了BootStrap中很多的常用插件，类似我们之前所说的控件。下面就来看看BootStrap中会给我们带来哪些眼前一亮的插件。  本篇博客将介绍下拉菜单、列表、单选按钮、tab切换和tiles案例（win8页面）五种。   【具体介绍】

**************************BootStrap下拉菜单（Dropdowns）***************************

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

        下拉菜单（Dropdown）       

• ...

• My practice

• CodeHTML：

aspopup="true" class="dLabel luxury" data-toggle="dropdown">
• 豪华版

   

   

• 

• 旗舰版

• 

• 标准版

 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.

• One
• Two
• Three

• My practice

• CodeHTML：

                          玫瑰金

•  玫瑰金
•  浅粉红
•  紫罗兰

 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.

   选项 1  

• My practice

• CodeHTML：

  位置：

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

另外，自己还发现了一个网址，可以对单选和复选按钮进行美化，各种样式应有尽有。链接地址：file:///H:/icheck-1.x/demo/index.html#skin-square（不能直接添加超链接，大家可以粘贴到浏览器看看）

**************************BootStrap标签页（Tab）***************************

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

   ...

• My practice

• 

  我的配置

• 

  个性化图片

• 

  个性化文字

• 

  镭雕工艺

• 

  内存

• 

  硬盘

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

• My practice

• CodeHTML:

               1 TB 5400转             -￥500   

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

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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-【BootStrap】陌生=》熟悉=》惊喜全部内容，希望文章能够帮你解决html5教程-【BootStrap】陌生=》熟悉=》惊喜所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。