margin-left: 30px;
}
.container,
+ .navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
margin-left: 20px;
}
.container,
+ .navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 724px;
}
.container,
+.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
}
.navbar-fixed-top .navbar-inner,
-.navbar-fixed-bottom .navbar-inner {
+.navbar-fixed-bottom .navbar-inner,
+.navbar-static-top .navbar-inner {
border: 0;
}
border-radius: 0;
}
+.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px;
top: 0;
}
-.navbar-fixed-top .navbar-inner {
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner {
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
body {
position: relative;
- padding-top: 40px;
}
/* Code in headings */
/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
-body > .navbar-fixed-top {
+body > .navbar-static-top {
font-size: 13px;
}
/* Change the docs' brand */
-body > .navbar-fixed-top .brand {
+body > .navbar-static-top .brand {
padding-right: 0;
padding-left: 0;
margin-left: 20px;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
-body > .navbar-fixed-top .brand:hover {
+body > .navbar-static-top .brand:hover {
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
}
/* padding for in-page bookmarks and fixed navbar */
section {
- padding-top: 60px;
+ padding-top: 30px;
}
section > .page-header,
section > .lead {
}
.bs-docs-sidenav {
- width: 218px;
+ width: 228px;
margin-top: 30px;
padding: 0;
- margin-right: 10px;
background-color: #fff;
margin-left: 0;
-webkit-border-radius: 6px;
border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
- border-color: #08c;
position: relative;
z-index: 2;
+ padding: 9px 15px;
+ border: 0;
+ -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+ -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+ box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
.bs-docs-sidenav a:hover .icon-chevron-right {
opacity: .5;
}
-.bs-docs-sidenav .active .icon-chevron-right {
+.bs-docs-sidenav .active .icon-chevron-right,
+.bs-docs-sidenav .active a:hover .icon-chevron-right {
background-image: url(../img/glyphicons-halflings-white.png);
opacity: .75;
}
.bs-docs-sidenav.affix {
- top: 40px;
+ top: 0;
}
.bs-docs-sidenav.affix-bottom {
position: absolute;
body {
padding-top: 0;
}
- /* Widen masthead and social buttons to fill body padding */
- .jumbotron {
- margin-top: -20px; /* Offset bottom margin on .navbar */
- }
/* Adjust sidenav width */
.bs-docs-sidenav {
width: 166px;
margin-top: 20px;
}
- .bs-docs-sidenav.affix {
- top: 0;
- }
}
/* Tablet
.footer p {
margin-bottom: 9px;
}
- .bs-docs-sidenav.affix {
- top: 0;
- }
}
/* Landscape phones
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<h1>Typography</h1>
</div>
- <h2>Headings</h2>
+ <ul>
+ <li><a href="./base-css.html#headings">Headings</a></li>
+ <li><a href="./base-css.html#body-copy">Body copy</a></li>
+ <li><a href="./base-css.html#emphasis">Emphasis</a></li>
+ </ul>
+
+ <hr>
+
+ <h2 id="headings">Headings</h2>
<p>All HTML headings, <code><h1></code> through <code><h6></code> are available.</p>
<div class="bs-docs-example">
<h1>h1. Heading 1</h1>
<h6>h6. Heading 6</h6>
</div>
- <h2>Body copy</h2>
+ <h2 id="body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their line-height (9px by default).</p>
<div class="bs-docs-example">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
</div>
<pre class="prettyprint"><p class="lead">...</p></pre>
- <h2>Built with Less</h2>
+ <h3>Built with Less</h3>
<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
<hr class="bs-docs-separator">
- <h2>Emphasis</h2>
+ <h2 id="emphasis">Emphasis</h2>
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
<h3><code><small></code></h3>
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<!-- Subhead
================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="jumbotron subhead">
<div class="container">
<h1>JavaScript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life—now with 13 custom jQuery plugins.
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
{{/production}}
</head>
- <body data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
+ <body data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Navbar
================================================== -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<h1>{{_i}}Typography{{/i}}</h1>
</div>
+ <ul>
+ <li><a href="./base-css.html#headings">Headings</a></li>
+ <li><a href="./base-css.html#body-copy">Body copy</a></li>
+ <li><a href="./base-css.html#emphasis">Emphasis</a></li>
+ </ul>
+
+ <hr>
+
{{! Headings }}
- <h2>{{_i}}Headings{{/i}}</h2>
+ <h2 id="headings">{{_i}}Headings{{/i}}</h2>
<p>{{_i}}All HTML headings, <code><h1></code> through <code><h6></code> are available.{{/i}}</p>
<div class="bs-docs-example">
<h1>h1. {{_i}}Heading 1{{/i}}</h1>
</div>
{{! Body copy }}
- <h2>{{_i}}Body copy{{/i}}</h2>
+ <h2 id="body-copy">{{_i}}Body copy{{/i}}</h2>
<p>{{_i}}Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code><body></code> and all paragraphs. In addition, <code><p></code> (paragraphs) receive a bottom margin of half their line-height (9px by default).{{/i}}</p>
<div class="bs-docs-example">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<pre class="prettyprint"><p class="lead">...</p></pre>
{{! Using LESS }}
- <h2>{{_i}}Built with Less{{/i}}</h2>
+ <h3>{{_i}}Built with Less{{/i}}</h3>
<p>{{_i}}The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}</p>
{{! Emphasis }}
- <h2>{{_i}}Emphasis{{/i}}</h2>
+ <h2 id="emphasis">{{_i}}Emphasis{{/i}}</h2>
<p>{{_i}}Make use of HTML's default emphasis tags with lightweight styles.{{/i}}</p>
<h3><code><small></code></h3>
<!-- Subhead
================================================== -->
-<header class="jumbotron subhead" id="overview">
+<header class="jumbotron subhead">
<div class="container">
<h1>{{_i}}JavaScript for Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Bring Bootstrap's components to life—now with 13 custom jQuery plugins.{{/i}}
// Set the container width, and override it for fixed navbars in media queries
.container,
+ .navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { .span(@gridColumns); }
left: 0;
z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for default navbar
+}
+.navbar-fixed-top,
+.navbar-fixed-bottom,
+.navbar-static-top {
.navbar-inner {
border: 0;
}
}
// Reset container width
+// Required here as we reset the width earlier on and the grid mixins don't override early enough
+.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
// Fixed to top
.navbar-fixed-top {
top: 0;
+}
+.navbar-fixed-top,
+.navbar-static-top {
.navbar-inner {
.box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
}
.img-circle {
.border-radius(500px);
-}
\ No newline at end of file
+}
visibility: hidden;
}
+// For Affix plugin
.affix {
position: fixed;
-}
\ No newline at end of file
+}