2016-12-21
如今使用boostrap3架设网站的越来越多，bootstrap除了不支持ie9一下的浏览器以外，在制作其网站方面还是非常不错的。响应式框架是网站建设前端开发的首先工具。
先说css样式的使用
/*--------------公共部分------------------------*/.navbar .container { position: relative;}.navbar .dropdown-menu { left: auto;}.navbar .dropdown-menu > li { display: block;}.navbar .dropdown { position: static;}/*----------------下来菜单-----------------------*/.navbar .dropdown-submenu { position: relative; }.navbar .dropdown-submenu > a:after { top: 8px; right: 9px; font-size: 11px; content: "f105"; position: absolute; font-weight: normal; display: inline-block; font-family: FontAwesome;}.navbar .dropdown-submenu > .dropdown-menu { top: 3px; left: 100%; margin-top: -5px; margin-left: 0px; }/*Submenu comes from LEFT side*/.navbar .dropdown-submenu > .dropdown-menu.submenu-left { left: -100%;}.navbar .dropdown-submenu:hover > .dropdown-menu { display: block;}/*----------------全屏菜单-----------------------*/.navbar .dropdown.mega-menu-fullwidth .dropdown-menu { left: 0; right: 0; overflow: hidden;}
以上为css样式
Toggle navigationBootstrap theme
Home
About
Contact
Dropdown
Action
Another action
Something else here
Nav header
Separated link
One more separated link
Sub Level 1
Sub Level 2
Sub Level 2
Sub Level 3
Sub Level 3
Sub Level 3
Sub Level 3
Sub Level 2
Sub Level 2
Sub Level 3
Sub Level 3
Sub Level 3
Portfolio
Default
Portfolio Item Option
Portfolio Item Option 1
Portfolio Item Option 2
Portfolio 2 Columns
Portfolio 3 Columns
Portfolio 4 Columns
Portfolio 4 Columns With Text
2 Columns
2 Columns No Sapce
2 Columns Grid Text
2 Columns Grid
3 Columns
3 Columns No Sapce
3 Columns Grid Text
3 Columns Grid
4 Columns
4 Columns Full Width No Sapce
4 Columns Fullwidth Grid Text
4 Columns Fullwidth Grid
4 Columns No Sapce
4 Columns Grid Text
4 Columns Grid
5 Columns
5 Columns Fullwidth No Sapce
5 Columns Fullwidth Grid Text
5 Columns Fullwidth Grid
6 Columns
6 Columns Fullwidth No Sapce
6 Columns Fullwidth Grid Text
6 Columns Fullwidth Grid
