width: auto;
margin: 0;
}
- .btn-navbar {
- display: block;
- }
}
@media (min-width: 768px) and (max-width: 940px) {
.container {
padding-left: 10px;
padding-right: 10px;
}
+ .btn-navbar {
+ display: block;
+ }
+ .nav-collapse {
+ overflow: hidden;
+ height: 0;
+ }
}
/*
@media (min-width: 1210px) {
margin-top: 3px;
}
.navbar .brand:hover {
- color: #ffffff;
text-decoration: none;
}
.navbar .brand {
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="active">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </li>
- <li class="">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="active">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="active">
- <a href="./components.html">Components</a>
- </li>
- <li class="">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="active">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </li>
- <li class="">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="active">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="active">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </li>
- <li class="">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="active">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </li>
- <li class="">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="active">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </li>
- <li class="active">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="active">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </li>
- <li class="">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="active">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="active">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="">
- <a href="./index.html">Overview</a>
- </li>
- <li class="active">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </li>
- <li class="">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="active">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="{{index}}">
- <a href="./index.html">{{_i}}Overview{{/i}}</a>
- </li>
- <li class="{{scaffolding}}">
- <a href="./scaffolding.html">{{_i}}Scaffolding{{/i}}</a>
- </li>
- <li class="{{base-css}}">
- <a href="./base-css.html">{{_i}}Base CSS{{/i}}</a>
- </li>
- <li class="{{components}}">
- <a href="./components.html">{{_i}}Components{{/i}}</a>
- </li>
- <li class="{{javascript}}">
- <a href="./javascript.html">{{_i}}Javascript plugins{{/i}}</a>
- </li>
- <li class="{{less}}">
- <a href="./less.html">{{_i}}Using LESS{{/i}}</a>
- </li>
- <li class="{{download}}">
- <a href="./download.html">{{_i}}Customize{{/i}}</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="{{index}}">
+ <a href="./index.html">{{_i}}Overview{{/i}}</a>
+ </li>
+ <li class="{{scaffolding}}">
+ <a href="./scaffolding.html">{{_i}}Scaffolding{{/i}}</a>
+ </li>
+ <li class="{{base-css}}">
+ <a href="./base-css.html">{{_i}}Base CSS{{/i}}</a>
+ </li>
+ <li class="{{components}}">
+ <a href="./components.html">{{_i}}Components{{/i}}</a>
+ </li>
+ <li class="{{javascript}}">
+ <a href="./javascript.html">{{_i}}Javascript plugins{{/i}}</a>
+ </li>
+ <li class="{{less}}">
+ <a href="./less.html">{{_i}}Using LESS{{/i}}</a>
+ </li>
+ <li class="{{download}}">
+ <a href="./download.html">{{_i}}Customize{{/i}}</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
-
-
+
+
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
- <a class="btn btn-navbar">
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
- <ul class="nav">
- <li class="">
- <a href="./index.html">Overview</a>
- </li>
- <li class="">
- <a href="./scaffolding.html">Scaffolding</a>
- </li>
- <li class="">
- <a href="./base-css.html">Base CSS</a>
- </li>
- <li class="">
- <a href="./components.html">Components</a>
- </li>
- <li class="">
- <a href="./javascript.html">Javascript plugins</a>
- </li>
- <li class="">
- <a href="./less.html">Using LESS</a>
- </li>
- <li class="">
- <a href="./download.html">Customize</a>
- </li>
- </ul>
+ <div class="nav-collapse">
+ <ul class="nav">
+ <li class="">
+ <a href="./index.html">Overview</a>
+ </li>
+ <li class="">
+ <a href="./scaffolding.html">Scaffolding</a>
+ </li>
+ <li class="">
+ <a href="./base-css.html">Base CSS</a>
+ </li>
+ <li class="">
+ <a href="./components.html">Components</a>
+ </li>
+ <li class="">
+ <a href="./javascript.html">Javascript plugins</a>
+ </li>
+ <li class="">
+ <a href="./less.html">Using LESS</a>
+ </li>
+ <li class="">
+ <a href="./download.html">Customize</a>
+ </li>
+ </ul>
+ </div>
</div>
</div>
</div>
-// COLLAPSE
-// --------
+// ACCORDION
+// ---------
// Parent container
.navbar {
// Hover and active states
.brand:hover {
- color: @white;
text-decoration: none;
}
// Website or project name
left: auto;
right: 13px;
}
-}
+}
\ No newline at end of file
width: auto;
margin: 0;
}
-
- // Navbar button
- .btn-navbar {
- display: block;
- }
-
}
padding-left: 10px;
padding-right: 10px;
}
+ // Navbar button
+ .btn-navbar {
+ display: block;
+ }
+
+ .nav-collapse {
+ overflow: hidden;
+ height: 0;
+ }
}