最近一直在写页面，上周真的是写完一个又一个的页面。通过写这些页面，也是接触到了BootStrap中很多的常用插件，类似我们之前所说的控件。下面就来看看BootStrap中会给我们带来 哪些 眼前一亮的插件。 本篇博客将介绍下拉菜单、列表、单选按钮、tab切换和tiles案例（ win8 页面）五种。 【具体介绍】
**************************BootStrap下拉菜单（Dropdowns）***************************
usage Make sure jQuery .js,bootstrap.js and bootstrap.css is loaded.
&nbs p;
下拉菜单（Dropdown）.. .
My PR actice
Code HTML ：
asp opup="true" class="dLabel luxury" data-toggle="dropdown"> 豪华版
旗舰版
标准版
Less：
@m arg in-left-body: 16px; @menu: 140px; .dropdown { /* 下拉菜单 尺寸 设置 */ width: @mar gin -left-body + @menu; h ei ght: @menu; & am p;.o PE n { /* 下拉菜单展开尺寸设置 */ width: @margin-left-body + @menu; height: @menu; } ul.dropdown-menu { /* 下拉菜单 背景颜色 ，位置设置 */ margin-left: @margin-left-body; background-color: # 508 CF 9; height: @menu; &.ulti MATE { /* 下拉菜单展开背景颜色，位置设置 */ width: @menu; margin -t op: 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; } } . img version { /* 菜单中各个版本图片位置设置 */ 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 jq uery.js,bootstrap.js and bootstrap.css is loaded.
One Two T hr ee
My practice
Code HT ML ：
玫瑰金
颜色：
玫瑰金 浅粉红 紫罗兰
Less：
@listtwo-margin-top: 100px; @listthree-margin-top: 200px; ul { &.list-group-fontf ami ly { margin-bottom: 0px; dis play : none; } li.list-group -i tem { z-index: 4; pos IT ion: 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
Code HTML：
位置：
lenovo
Less：
.position { width: 310px; height: 210px; background-color: #B5B5B5; -moz-border-radius: @radius; /* Gecko br owsers */ - 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 -s quare（不能直接添加超链接，大家可以粘贴到浏览器看看）
**************************BootStra p标签 页（Tab）***************************
Usage Make sure jQuery.js,bootstrap.js and bootstrap.css is loaded.
......
...
...
My practice
我的配置
个性化图片
个性化文字
镭雕工艺
内存
硬盘
Less:
ul { float: left; border: none; } . config Tab { .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: #ee f2 f5; 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
Code HTML:
1 TB 5400转 -￥500
1 TB 5400转 -￥500
Less:
//win8 tile组件选中状态设置 .tile.selected{ margin-top: 14px; height: 58px; width: 298.797px; border:4px #4390 DF 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
Code HTML：
asp opup="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
Code HTML：
玫瑰金
颜色：
玫瑰金 浅粉红 紫罗兰
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
Code HTML：
位置：
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
Code HTML:
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教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-【BootStrap】陌生=》熟悉=》惊喜 全部内容，希望文章能够帮你解决 html5教程-【BootStrap】陌生=》熟悉=》惊喜 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-【BootStrap】陌生=》熟悉=》惊喜的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219212