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

时间2024-01-26 17:26:03发布访客分类HTML浏览498

导读：收集整理的这篇文章主要介绍了html5教程-【BootStrap】陌生=》熟悉=》惊喜，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。最近...

收集整理的这篇文章主要介绍了html5教程-【BootStrap】陌生=》熟悉=》惊喜，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

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

usage Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.

        下拉菜单（Dropdown）

My PRactice

CodeHTML：

豪华版

旗舰版

标准版

 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

选项 2 - 选择它将会取消选择选项 1

My practice

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

我的配置

个性化图片
个性化文字
镭雕工艺
内存
硬盘

 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

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

CodeHTML：

豪华版

旗舰版

标准版

 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

选项 2 - 选择它将会取消选择选项 1

My practice

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

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

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

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

My practice

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

Class CSS div HTML jQuery post-format-gallery

若转载请注明出处：【BootStrap】陌生=》熟悉=》惊喜
本文地址： https://pptw.com/jishu/587058.html

h5添加音乐 HTML5第7次课堂笔记（图片验证码的应用,xmlhttprequest对象的使用,跨域）