摘要:**************************BootStrap下拉菜单(Dropdowns)*************************** Usage Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

**************************BootStrap下拉菜单(Dropdowns)***************************

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

 

        下拉菜单(Dropdown)       
  • ...
 

 

 
  • My practice
   
html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典 html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
 

 

 

        
html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
  • 旗舰版
  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
  • 标准版

 

 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
     
html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典 html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
 

 

 

                          玫瑰金

 

颜色:

 

 

  •  玫瑰金
  •  浅粉红
  •  紫罗兰
 
 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.
  

 

 

 

 
  • My practice

 

  html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典 html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

 

 
  • CodeHTML:

 

  位置:

 

lenovo

 

 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
  html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典    html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
 
  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    我的配置

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    个性化图片

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    个性化文字

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    镭雕工艺

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    内存

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    硬盘

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

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

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

 

 

 

 
 
  • My practice
   
html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

 

 
  • CodeHTML:

               1 TB 5400转             -¥500   

 

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
   
html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典 html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
 
  • CodeHTML:

 

 

        
html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
  • 旗舰版
  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
  • 标准版

 

 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
     
html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典 html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
 
  • 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.
  

 

 

 

 
  • My practice

 

  html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典 html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

 

 
  • CodeHTML:

 

  位置:

 

lenovo

 

 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
  html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典    html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典
 
  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    我的配置

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    个性化图片

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    个性化文字

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    镭雕工艺

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    内存

  • html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

    硬盘

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

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

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

 

 

 

 
 
  • My practice
   
html5教程-【BootStrap】陌生=》熟悉=》惊喜-脚本宝典

 

 
  • CodeHTML:

               1 TB 5400转             -¥500   

 

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教程,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/html5%e6%95%99%e7%a8%8b/html5%e6%95%99%e7%a8%8b_2363.html