Commit 441e04c8 authored by Mark Otto's avatar Mark Otto

Merge branch '3.0.0-wip' into bs3_homepage

Conflicts:
	dist/css/bootstrap.min.css
	getting-started.html
parents ffbec23c 1b814ddd
...@@ -145,7 +145,6 @@ module.exports = function(grunt) { ...@@ -145,7 +145,6 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-recess'); grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('browserstack-runner'); grunt.loadNpmTasks('browserstack-runner');
// Docs HTML validation task // Docs HTML validation task
grunt.registerTask('validate-docs', ['jekyll', 'validation']); grunt.registerTask('validate-docs', ['jekyll', 'validation']);
......
...@@ -10,28 +10,28 @@ ...@@ -10,28 +10,28 @@
<li> <li>
<a href="#btn-groups">Button groups</a> <a href="#btn-groups">Button groups</a>
<ul class="nav"> <ul class="nav">
<li><a href="#btn-groups-single">Basic button group</a></li> <li><a href="#btn-groups-single">Basic example</a></li>
<li><a href="#btn-groups-toolbar">Button toolbar</a></li> <li><a href="#btn-groups-toolbar">Button toolbar</a></li>
<li><a href="#btn-groups-sizing">Button group sizing</a></li> <li><a href="#btn-groups-sizing">Sizing</a></li>
<li><a href="#btn-groups-nested">Nested button groups</a></li> <li><a href="#btn-groups-nested">Nesting</a></li>
<li><a href="#btn-groups-vertical">Vertical variation</a></li> <li><a href="#btn-groups-vertical">Vertical variation</a></li>
<li><a href="#btn-groups-justified">Justified link buttons</a></li> <li><a href="#btn-groups-justified">Justified link variation</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#btn-dropdowns">Button dropdowns</a> <a href="#btn-dropdowns">Button dropdowns</a>
<ul class="nav"> <ul class="nav">
<li><a href="#btn-dropdowns-single">Single button dropdown</a></li> <li><a href="#btn-dropdowns-single">Single button dropdowns</a></li>
<li><a href="#btn-dropdowns-split">Split button dropdown</a></li> <li><a href="#btn-dropdowns-split">Split button dropdowns</a></li>
<li><a href="#btn-dropdowns-sizes">Button sizes</a></li> <li><a href="#btn-dropdowns-sizing">Sizing</a></li>
<li><a href="#btn-dropdowns-dropup">Dropup variation</a></li> <li><a href="#btn-dropdowns-dropup">Dropup variation</a></li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#input-groups">Input groups</a> <a href="#input-groups">Input groups</a>
<ul class="nav"> <ul class="nav">
<li><a href="#input-groups-basic">Basic input group</a></li> <li><a href="#input-groups-basic">Basic example</a></li>
<li><a href="#input-groups-sizes">Sizing options</a></li> <li><a href="#input-groups-sizing">Sizing</a></li>
<li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li> <li><a href="#input-groups-checkboxes-radios">Checkbox and radios addons</a></li>
<li><a href="#input-groups-buttons">Button addons</a></li> <li><a href="#input-groups-buttons">Button addons</a></li>
<li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li> <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li>
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
<li> <li>
<a href="#nav">Navs</a> <a href="#nav">Navs</a>
<ul class="nav"> <ul class="nav">
<li><a href="#nav-tabs">Tabs nav</a></li> <li><a href="#nav-tabs">Tabs</a></li>
<li><a href="#nav-pills">Pills nav</a></li> <li><a href="#nav-pills">Pills</a></li>
<li><a href="#nav-justified">Justified nav</a></li> <li><a href="#nav-justified">Justified nav</a></li>
<li><a href="#nav-disabled-links">Disabled links</a></li> <li><a href="#nav-disabled-links">Disabled links</a></li>
<li><a href="#nav-alignment">Alignment options</a></li> <li><a href="#nav-alignment">Alignment options</a></li>
...@@ -53,13 +53,13 @@ ...@@ -53,13 +53,13 @@
<a href="#navbar">Navbar</a> <a href="#navbar">Navbar</a>
<ul class="nav"> <ul class="nav">
<li><a href="#navbar-default">Default navbar</a></li> <li><a href="#navbar-default">Default navbar</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li> <li><a href="#navbar-buttons">Buttons</a></li>
<li><a href="#navbar-text">Text in navbars</a></li> <li><a href="#navbar-text">Text</a></li>
<li><a href="#navbar-links">Links in navbars</a></li> <li><a href="#navbar-links">Non-nav links</a></li>
<li><a href="#navbar-component-alignment">Component alignment</a></li> <li><a href="#navbar-component-alignment">Component alignment</a></li>
<li><a href="#navbar-fixed-top">Fixed top navbar</a></li> <li><a href="#navbar-fixed-top">Fixed to top</a></li>
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li> <li><a href="#navbar-fixed-bottom">Fixed to bottom</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li> <li><a href="#navbar-static-top">Static top</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li> <li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul> </ul>
</li> </li>
...@@ -73,17 +73,12 @@ ...@@ -73,17 +73,12 @@
</li> </li>
<li><a href="#labels">Labels</a></li> <li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li> <li><a href="#badges">Badges</a></li>
<li> <li><a href="#jumbotron">Jumbotron</a></li>
<a href="#type-components">Typography</a> <li><a href="#page-header">Page header</a></li>
<ul class="nav">
<li><a href="#type-components-jumbotron">Jumbotron</a></li>
<li><a href="#type-components-page-header">Page header</a></li>
</ul>
</li>
<li> <li>
<a href="#thumbnails">Thumbnails</a> <a href="#thumbnails">Thumbnails</a>
<ul class="nav"> <ul class="nav">
<li><a href="#thumbnails-default">Default thumbnails</a></li> <li><a href="#thumbnails-default">Default example</a></li>
<li><a href="#thumbnails-custom-content">Custom content</a></li> <li><a href="#thumbnails-custom-content">Custom content</a></li>
</ul> </ul>
</li> </li>
...@@ -99,7 +94,7 @@ ...@@ -99,7 +94,7 @@
<li> <li>
<a href="#progress">Progress bars</a> <a href="#progress">Progress bars</a>
<ul class="nav"> <ul class="nav">
<li><a href="#progress-basic">Basic progress bar</a></li> <li><a href="#progress-basic">Basic example</a></li>
<li><a href="#progress-alternatives">Contextual alternatives</a></li> <li><a href="#progress-alternatives">Contextual alternatives</a></li>
<li><a href="#progress-striped">Striped</a></li> <li><a href="#progress-striped">Striped</a></li>
<li><a href="#progress-animated">Animated</a></li> <li><a href="#progress-animated">Animated</a></li>
...@@ -116,17 +111,16 @@ ...@@ -116,17 +111,16 @@
<li> <li>
<a href="#list-group">List group</a> <a href="#list-group">List group</a>
<ul class="nav"> <ul class="nav">
<li><a href="#list-group-basic">Basic list group</a></li> <li><a href="#list-group-basic">Basic example</a></li>
<li><a href="#list-group-badges">Badges</a></li> <li><a href="#list-group-badges">Badges</a></li>
<li><a href="#list-group-linked">Linked items</a></li> <li><a href="#list-group-linked">Linked items</a></li>
<li><a href="#list-group-custom-content">Custom content</a></li> <li><a href="#list-group-custom-content">Custom content</a></li>
<!-- <li><a href="#list-group-pic">Leading picture</a></li> -->
</ul> </ul>
</li> </li>
<li> <li>
<a href="#panels">Panels</a> <a href="#panels">Panels</a>
<ul class="nav"> <ul class="nav">
<li><a href="#panels-basic">Basic panel</a></li> <li><a href="#panels-basic">Basic example</a></li>
<li><a href="#panels-heading">Panel with heading</a></li> <li><a href="#panels-heading">Panel with heading</a></li>
<li><a href="#panels-alternatives">Contextual alternatives</a></li> <li><a href="#panels-alternatives">Contextual alternatives</a></li>
<li><a href="#panels-list-group">With list groups</a> <li><a href="#panels-list-group">With list groups</a>
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
<li><a href="#overview-doctype">HTML5 doctype</a></li> <li><a href="#overview-doctype">HTML5 doctype</a></li>
<li><a href="#overview-mobile">Mobile first</a></li> <li><a href="#overview-mobile">Mobile first</a></li>
<li><a href="#overview-responsive-images">Responsive images</a></li> <li><a href="#overview-responsive-images">Responsive images</a></li>
<li><a href="#overview-type-links">Type and links</a></li> <li><a href="#overview-type-links">Typography and links</a></li>
<li><a href="#overview-normalize">Normalize</a></li> <li><a href="#overview-normalize">Normalize</a></li>
<li><a href="#overview-container">Container</a></li> <li><a href="#overview-container">Containers</a></li>
</ul> </ul>
</li> </li>
<li> <li>
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
<a href="#grid">Grid system</a> <a href="#grid">Grid system</a>
<ul class="nav"> <ul class="nav">
<li><a href="#grid-media-queries">Media queries</a></li> <li><a href="#grid-media-queries">Media queries</a></li>
<li><a href="#grid-options">Available options</a></li> <li><a href="#grid-options">Grid options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li> <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li> <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li> <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
<li><a href="#grid-responsive-resets">Responsive column resets</a></li> <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
<li><a href="#grid-offsetting">Offset columns</a></li> <li><a href="#grid-offsetting">Offsetting columns</a></li>
<li><a href="#grid-nesting">Nested columns</a></li> <li><a href="#grid-nesting">Nesting columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li> <li><a href="#grid-column-ordering">Column ordering</a></li>
<li><a href="#grid-less">LESS mixins and variables</a></li> <li><a href="#grid-less">LESS mixins and variables</a></li>
</ul> </ul>
...@@ -44,10 +44,10 @@ ...@@ -44,10 +44,10 @@
<a href="#tables">Tables</a> <a href="#tables">Tables</a>
<ul class="nav"> <ul class="nav">
<li><a href="#tables-example">Basic example</a></li> <li><a href="#tables-example">Basic example</a></li>
<li><a href="#tables-striped">Zebra striping</a></li> <li><a href="#tables-striped">Striped rows</a></li>
<li><a href="#tables-bordered">Bordered tables</a></li> <li><a href="#tables-bordered">Bordered table</a></li>
<li><a href="#tables-hover-rows">Hover rows</a></li> <li><a href="#tables-hover-rows">Hover rows</a></li>
<li><a href="#tables-condensed">Condensed tables</a></li> <li><a href="#tables-condensed">Condensed table</a></li>
<li><a href="#tables-contextual-classes">Contextual classes</a></li> <li><a href="#tables-contextual-classes">Contextual classes</a></li>
</ul> </ul>
</li> </li>
...@@ -55,10 +55,10 @@ ...@@ -55,10 +55,10 @@
<a href="#forms">Forms</a> <a href="#forms">Forms</a>
<ul class="nav"> <ul class="nav">
<li><a href="#forms-example">Basic example</a></li> <li><a href="#forms-example">Basic example</a></li>
<li><a href="#forms-inline">Inline variation</a></li> <li><a href="#forms-inline">Inline form</a></li>
<li><a href="#forms-horizontal">Horizontal variation</a></li> <li><a href="#forms-horizontal">Horizontal form</a></li>
<li><a href="#forms-controls">Supported controls</a></li> <li><a href="#forms-controls">Supported controls</a></li>
<li><a href="#forms-controls-static">Static form control</a></li> <li><a href="#forms-controls-static">Static control</a></li>
<li><a href="#forms-control-states">Control states</a></li> <li><a href="#forms-control-states">Control states</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li> <li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-help-text">Help text</a></li> <li><a href="#forms-help-text">Help text</a></li>
...@@ -67,9 +67,9 @@ ...@@ -67,9 +67,9 @@
<li> <li>
<a href="#buttons">Buttons</a> <a href="#buttons">Buttons</a>
<ul class="nav"> <ul class="nav">
<li><a href="#buttons-options">Button options</a></li> <li><a href="#buttons-options">Options</a></li>
<li><a href="#buttons-sizes">Sizes</a></li> <li><a href="#buttons-sizes">Sizes</a></li>
<li><a href="#buttons-disabled">Disabled</a></li> <li><a href="#buttons-disabled">Disabled state</a></li>
<li><a href="#buttons-tags">Button tags</a></li> <li><a href="#buttons-tags">Button tags</a></li>
</ul> </ul>
</li> </li>
......
<li> <li>
<a href="#download">Download Bootstrap</a> <a href="#download">Download Bootstrap</a>
<ul class="nav"> <ul class="nav">
<li><a href="#download-options">Download options</a></li> <li><a href="#download-source">Download source</a></li>
<li><a href="#download-additional">Additional downloads</a></li>
<li><a href="#download-cdn">Bootstrap CDN</a></li> <li><a href="#download-cdn">Bootstrap CDN</a></li>
</ul> </ul>
</li> </li>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<li><a href="#js-individual-compiled">Individual or compiled</a></li> <li><a href="#js-individual-compiled">Individual or compiled</a></li>
<li><a href="#js-data-attrs">Data attributes</a></li> <li><a href="#js-data-attrs">Data attributes</a></li>
<li><a href="#js-programmatic-api">Programmatic API</a></li> <li><a href="#js-programmatic-api">Programmatic API</a></li>
<li><a href="#js-noconflict">No Conflict</a></li> <li><a href="#js-noconflict">No conflict</a></li>
<li><a href="#js-events">Events</a></li> <li><a href="#js-events">Events</a></li>
</ul> </ul>
</li> </li>
......
...@@ -23,13 +23,13 @@ ...@@ -23,13 +23,13 @@
<a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a> <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
</li> </li>
<li> <li>
<a href="../getting-started#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a> <a href="{{ page.base_url }}getting-started#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
</li> </li>
<li> <li>
<a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a> <a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a>
</li> </li>
<li> <li>
<a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a> <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
</li> </li>
</ul> </ul>
</footer> </footer>
......
...@@ -138,7 +138,7 @@ body { ...@@ -138,7 +138,7 @@ body {
.bs-masthead-links { .bs-masthead-links {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 0; padding: 0 15px;
list-style: none; list-style: none;
} }
.bs-masthead-links li { .bs-masthead-links li {
...@@ -417,7 +417,7 @@ body { ...@@ -417,7 +417,7 @@ body {
.bs-example > blockquote:last-child, .bs-example > blockquote:last-child,
.bs-example > .form-control:last-child, .bs-example > .form-control:last-child,
.bs-example > .table:last-child, .bs-example > .table:last-child,
.bs-example > .navbar:last-child .bs-example > .navbar:last-child,
.bs-example > .jumbotron:last-child, .bs-example > .jumbotron:last-child,
.bs-example > .alert:last-child, .bs-example > .alert:last-child,
.bs-example > .panel:last-child, .bs-example > .panel:last-child,
...@@ -534,6 +534,12 @@ body { ...@@ -534,6 +534,12 @@ body {
} }
} }
/* Pagination */
.bs-example .pagination {
margin-top: 10px;
margin-bottom: 10px;
}
/* Example modals */ /* Example modals */
.bs-example-modal { .bs-example-modal {
background-color: #f5f5f5; background-color: #f5f5f5;
...@@ -735,9 +741,7 @@ body { ...@@ -735,9 +741,7 @@ body {
.bs-social-buttons li { .bs-social-buttons li {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
} padding: 5px 8px;
.bs-social-buttons li + li {
margin-left: 15px;
} }
.bs-social-buttons .twitter-follow-button { .bs-social-buttons .twitter-follow-button {
width: 225px !important; width: 225px !important;
...@@ -849,6 +853,10 @@ body { ...@@ -849,6 +853,10 @@ body {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.bs-masthead-links {
padding: 0;
}
.carbonad { .carbonad {
margin: 0 !important; margin: 0 !important;
border: 1px solid #463265 !important; border: 1px solid #463265 !important;
......
This diff is collapsed.
This diff is collapsed.
...@@ -733,6 +733,8 @@ pre code { ...@@ -733,6 +733,8 @@ pre code {
} }
.container { .container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
...@@ -757,6 +759,11 @@ pre code { ...@@ -757,6 +759,11 @@ pre code {
clear: both; clear: both;
} }
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before, .row:before,
.row:after { .row:after {
display: table; display: table;
...@@ -777,18 +784,6 @@ pre code { ...@@ -777,18 +784,6 @@ pre code {
clear: both; clear: both;
} }
@media (min-width: 768px) {
.container .row {
margin-right: -15px;
margin-left: -15px;
}
}
.row .row {
margin-right: -15px;
margin-left: -15px;
}
.col-xs-1, .col-xs-1,
.col-xs-2, .col-xs-2,
.col-xs-3, .col-xs-3,
...@@ -907,7 +902,7 @@ pre code { ...@@ -907,7 +902,7 @@ pre code {
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
max-width: 720px; max-width: 750px;
} }
.col-sm-1, .col-sm-1,
.col-sm-2, .col-sm-2,
...@@ -1061,7 +1056,7 @@ pre code { ...@@ -1061,7 +1056,7 @@ pre code {
@media (min-width: 992px) { @media (min-width: 992px) {
.container { .container {
max-width: 940px; max-width: 970px;
} }
.col-md-1, .col-md-1,
.col-md-2, .col-md-2,
...@@ -1224,7 +1219,7 @@ pre code { ...@@ -1224,7 +1219,7 @@ pre code {
@media (min-width: 1200px) { @media (min-width: 1200px) {
.container { .container {
max-width: 1140px; max-width: 1170px;
} }
.col-lg-1, .col-lg-1,
.col-lg-2, .col-lg-2,
...@@ -1413,6 +1408,7 @@ th { ...@@ -1413,6 +1408,7 @@ th {
.table thead > tr > th { .table thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid #dddddd;
} }
.table caption + thead tr:first-child th, .table caption + thead tr:first-child th,
...@@ -1454,6 +1450,11 @@ th { ...@@ -1454,6 +1450,11 @@ th {
border: 1px solid #dddddd; border: 1px solid #dddddd;
} }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th { .table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9; background-color: #f9f9f9;
...@@ -1888,6 +1889,11 @@ textarea.input-lg { ...@@ -1888,6 +1889,11 @@ textarea.input-lg {
padding-top: 6px; padding-top: 6px;
} }
.form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
.form-horizontal .form-group:before, .form-horizontal .form-group:before,
.form-horizontal .form-group:after { .form-horizontal .form-group:after {
display: table; display: table;
...@@ -1908,18 +1914,6 @@ textarea.input-lg { ...@@ -1908,18 +1914,6 @@ textarea.input-lg {
clear: both; clear: both;
} }
@media (min-width: 768px) {
.container .form-horizontal .form-group {
margin-right: -15px;
margin-left: -15px;
}
}
.form-horizontal .form-group .row {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.form-horizontal .control-label { .form-horizontal .control-label {
text-align: right; text-align: right;
...@@ -2277,7 +2271,7 @@ fieldset[disabled] .btn-link:focus { ...@@ -2277,7 +2271,7 @@ fieldset[disabled] .btn-link:focus {
} }
.btn-xs { .btn-xs {
padding: 3px 5px; padding: 1px 5px;
} }
.btn-block { .btn-block {
...@@ -2485,6 +2479,7 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -2485,6 +2479,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
vertical-align: middle; vertical-align: middle;
border-top: 4px solid #000000; border-top: 4px solid #000000;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-bottom: 0 dotted;
border-left: 4px solid transparent; border-left: 4px solid transparent;
content: ""; content: "";
} }
...@@ -2603,7 +2598,7 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -2603,7 +2598,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
.dropup .caret, .dropup .caret,
.navbar-fixed-bottom .dropdown .caret { .navbar-fixed-bottom .dropdown .caret {
border-top: 0; border-top: 0 dotted;
border-bottom: 4px solid #000000; border-bottom: 4px solid #000000;
content: ""; content: "";
} }
...@@ -2738,7 +2733,7 @@ a.list-group-item:focus { ...@@ -2738,7 +2733,7 @@ a.list-group-item:focus {
.panel-title { .panel-title {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-size: 17.5px; font-size: 16px;
} }
.panel-title > a { .panel-title > a {
...@@ -2978,21 +2973,13 @@ button.close { ...@@ -2978,21 +2973,13 @@ button.close {
background-color: transparent; background-color: transparent;
} }
.nav.open > a, .nav .open > a,
.nav.open > a:hover, .nav .open > a:hover,
.nav.open > a:focus { .nav .open > a:focus {
color: #ffffff; background-color: #eeeeee;
background-color: #428bca;
border-color: #428bca; border-color: #428bca;
} }
.nav.open > a .caret,
.nav.open > a:hover .caret,
.nav.open > a:focus .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.nav .nav-divider { .nav .nav-divider {
height: 1px; height: 1px;
margin: 9px 0; margin: 9px 0;
...@@ -3040,15 +3027,20 @@ button.close { ...@@ -3040,15 +3027,20 @@ button.close {
} }
.nav-tabs.nav-justified > li { .nav-tabs.nav-justified > li {
display: table-cell;
float: none; float: none;
width: 1%;
} }
.nav-tabs.nav-justified > li > a { .nav-tabs.nav-justified > li > a {
text-align: center; text-align: center;
} }
@media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
}
.nav-tabs.nav-justified > li > a { .nav-tabs.nav-justified > li > a {
margin-right: 0; margin-right: 0;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
...@@ -3091,15 +3083,20 @@ button.close { ...@@ -3091,15 +3083,20 @@ button.close {
} }
.nav-justified > li { .nav-justified > li {
display: table-cell;
float: none; float: none;
width: 1%;
} }
.nav-justified > li > a { .nav-justified > li > a {
text-align: center; text-align: center;
} }
@media (min-width: 768px) {
.nav-justified > li {
display: table-cell;
width: 1%;
}
}
.nav-tabs-justified { .nav-tabs-justified {
border-bottom: 0; border-bottom: 0;
} }
...@@ -3229,7 +3226,6 @@ button.close { ...@@ -3229,7 +3226,6 @@ button.close {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
overflow-x: visible; overflow-x: visible;
overflow-y: auto;
border-top: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
...@@ -3255,6 +3251,10 @@ button.close { ...@@ -3255,6 +3251,10 @@ button.close {
clear: both; clear: both;
} }
.navbar-collapse.in {
overflow-y: auto;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-collapse { .navbar-collapse {
width: auto; width: auto;
...@@ -3274,9 +3274,12 @@ button.close { ...@@ -3274,9 +3274,12 @@ button.close {
} }
} }
.navbar-static-top {
border-width: 0 0 1px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-static-top { .navbar-static-top {
border-width: 0 0 1px;
border-radius: 0; border-radius: 0;
} }
} }
...@@ -3364,10 +3367,7 @@ button.close { ...@@ -3364,10 +3367,7 @@ button.close {
} }
.navbar-nav { .navbar-nav {
padding-top: 7.5px; margin: 7.5px -15px;
padding-bottom: 7.5px;
margin-right: -15px;
margin-left: -15px;
} }
.navbar-nav > li > a { .navbar-nav > li > a {
...@@ -3438,8 +3438,6 @@ button.close { ...@@ -3438,8 +3438,6 @@ button.close {
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-nav { .navbar-nav {
float: left; float: left;
padding-top: 0;
padding-bottom: 0;
margin: 0; margin: 0;
} }
.navbar-nav > li { .navbar-nav > li {
...@@ -3842,7 +3840,7 @@ button.close { ...@@ -3842,7 +3840,7 @@ button.close {
.btn-group-xs > .btn { .btn-group-xs > .btn {
padding: 5px 10px; padding: 5px 10px;
padding: 3px 5px; padding: 1px 5px;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
border-radius: 3px; border-radius: 3px;
...@@ -4145,7 +4143,7 @@ button.close { ...@@ -4145,7 +4143,7 @@ button.close {
.pager li > a:hover, .pager li > a:hover,
.pager li > a:focus { .pager li > a:focus {
text-decoration: none; text-decoration: none;
background-color: #428bca; background-color: #eeeeee;
} }
.pager .next > a, .pager .next > a,
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -1064,7 +1064,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") } ...@@ -1064,7 +1064,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
}) })
$(document) $(document)
.on('shown.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') }) .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
}(window.jQuery); }(window.jQuery);
......
This diff is collapsed.
...@@ -78,25 +78,9 @@ body { ...@@ -78,25 +78,9 @@ body {
.featurette-divider { .featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */ margin: 80px 0; /* Space out the Bootstrap <hr> more */
} }
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */ /* Thin out the marketing headings */
.featurette-heading { .featurette-heading {
font-size: 50px;
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
letter-spacing: -1px; letter-spacing: -1px;
...@@ -131,4 +115,14 @@ body { ...@@ -131,4 +115,14 @@ body {
line-height: 1.4; line-height: 1.4;
} }
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
} }
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Carousel Template for Bootstrap</title> <title>Carousel Template for Bootstrap</title>
...@@ -68,7 +69,7 @@ ...@@ -68,7 +69,7 @@
</ol> </ol>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="item active">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:First slide" alt=""> <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>Example headline.</h1> <h1>Example headline.</h1>
...@@ -78,7 +79,7 @@ ...@@ -78,7 +79,7 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Second slide" alt=""> <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>Another example headline.</h1> <h1>Another example headline.</h1>
...@@ -88,7 +89,7 @@ ...@@ -88,7 +89,7 @@
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Third slide" alt=""> <img src="data:image/png;base64," data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption"> <div class="carousel-caption">
<h1>One more for good measure.</h1> <h1>One more for good measure.</h1>
...@@ -113,19 +114,19 @@ ...@@ -113,19 +114,19 @@
<!-- Three columns of text below the carousel --> <!-- Three columns of text below the carousel -->
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
<h2>Heading</h2> <h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" src="data:image/png;base64," data-src="holder.js/140x140" alt="Generic placeholder image">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
...@@ -137,27 +138,39 @@ ...@@ -137,27 +138,39 @@
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="featurette"> <div class="row featurette">
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512"> <div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5">
<img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="featurette"> <div class="row featurette">
<img class="featurette-image img-circle pull-left" data-src="holder.js/512x512"> <div class="col-md-5">
<img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="col-md-7">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2> <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
</div>
<hr class="featurette-divider"> <hr class="featurette-divider">
<div class="featurette"> <div class="row featurette">
<img class="featurette-image img-circle pull-right" data-src="holder.js/512x512"> <div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div> </div>
<div class="col-md-5">
<img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider"> <hr class="featurette-divider">
...@@ -173,11 +186,11 @@ ...@@ -173,11 +186,11 @@
</div><!-- /.container --> </div><!-- /.container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/holder.js"></script> <script src="../../assets/js/holder.js"></script>
</body> </body>
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Grid Template for Bootstrap</title> <title>Grid Template for Bootstrap</title>
...@@ -104,5 +105,10 @@ ...@@ -104,5 +105,10 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Narrow Jumbotron Template for Bootstrap</title> <title>Narrow Jumbotron Template for Bootstrap</title>
...@@ -63,5 +64,10 @@ ...@@ -63,5 +64,10 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Jumbotron Template for Bootstrap</title> <title>Jumbotron Template for Bootstrap</title>
...@@ -46,8 +47,12 @@ ...@@ -46,8 +47,12 @@
</li> </li>
</ul> </ul>
<form class="navbar-form navbar-right"> <form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control"> <input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control"> <input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn">Sign in</button> <button type="submit" class="btn">Sign in</button>
</form> </form>
</div><!--/.navbar-collapse --> </div><!--/.navbar-collapse -->
...@@ -93,7 +98,12 @@ ...@@ -93,7 +98,12 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
...@@ -4,12 +4,6 @@ body { ...@@ -4,12 +4,6 @@ body {
padding-bottom: 20px; padding-bottom: 20px;
} }
/* Set widths on the navbar form inputs since otherwise they're 100% wide */
.navbar-form input[type="text"],
.navbar-form input[type="password"] {
width: 180px;
}
/* Wrapping element */ /* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */ /* Set some basic padding to keep content from hitting the edges */
.body-content { .body-content {
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Justified Nav Template for Bootstrap</title> <title>Justified Nav Template for Bootstrap</title>
...@@ -21,7 +22,7 @@ ...@@ -21,7 +22,7 @@
<div class="masthead"> <div class="masthead">
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
<ul class="nav navbar-nav nav-justified"> <ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li> <li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li> <li><a href="#">Services</a></li>
...@@ -46,17 +47,17 @@ ...@@ -46,17 +47,17 @@
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
</div> </div>
</div> </div>
...@@ -69,5 +70,10 @@ ...@@ -69,5 +70,10 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>
...@@ -4,17 +4,16 @@ body { ...@@ -4,17 +4,16 @@ body {
/* Everything but the jumbotron gets side spacing for mobile-first views */ /* Everything but the jumbotron gets side spacing for mobile-first views */
.masthead, .masthead,
.body-content,
.footer { .footer {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }
.footer { .footer {
border-top: 1px solid #ddd; border-top: 1px solid #eee;
margin-top: 30px; margin-top: 40px;
padding-top: 29px; padding-top: 40px;
padding-bottom: 30px; padding-bottom: 40px;
} }
/* Main marketing message and sign up button */ /* Main marketing message and sign up button */
...@@ -28,8 +27,8 @@ body { ...@@ -28,8 +27,8 @@ body {
} }
/* Customize the nav-justified links to be fill the entire space of the .navbar */ /* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified { .nav-justified {
max-height: 50px;
background-color: #eee; background-color: #eee;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -40,8 +39,7 @@ body { ...@@ -40,8 +39,7 @@ body {
color: #777; color: #777;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
border-left: 1px solid rgba(255,255,255,.75); border-bottom: 1px solid #d5d5d5;
border-right: 1px solid rgba(0,0,0,.1);
background-color: #e5e5e5; /* Old browsers */ background-color: #e5e5e5; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */ background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
...@@ -52,23 +50,41 @@ body { ...@@ -52,23 +50,41 @@ body {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */ background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
} }
.nav-justified > .active > a { .nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-color: #ddd; background-color: #ddd;
background-image: none; background-image: none;
box-shadow: inset 0 3px 7px rgba(0,0,0,.15); box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
} }
.nav-justified > li:first-child > a { .nav-justified > li:first-child > a {
border-left: 0; border-radius: 5px 5px 0 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
} }
.nav-justified > li:last-child > a { .nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-left: 1px solid #fff;
border-right: 1px solid #d5d5d5;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-radius: 0 5px 5px 0;
border-right: 0; border-right: 0;
border-top-right-radius: 5px; }
border-bottom-right-radius: 5px;
} }
/* Responsive: Portrait tablets and up */ /* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
/* Remove the padding we set earlier */ /* Remove the padding we set earlier */
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Fixed Top Navbar Example for Bootstrap</title> <title>Fixed Top Navbar Example for Bootstrap</title>
...@@ -47,9 +48,9 @@ ...@@ -47,9 +48,9 @@
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li> <li><a href="../navbar/">Default</a></li>
<li><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li> <li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li> <li class="active"><a href="./">Fixed top</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
...@@ -60,18 +61,21 @@ ...@@ -60,18 +61,21 @@
<!-- Main component for a primary marketing message or call to action --> <!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron"> <div class="jumbotron">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
body { body {
padding-top: 60px; min-height: 2000px;
} padding-top: 70px;
.jumbotron {
margin-top: 20px;
} }
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Static Top Navbar Example for Bootstrap</title> <title>Static Top Navbar Example for Bootstrap</title>
...@@ -47,9 +48,9 @@ ...@@ -47,9 +48,9 @@
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li> <li><a href="../navbar/">Default</a></li>
<li class="active"><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li> <li class="active"><a href="./">Static top</a></li>
<li><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
...@@ -61,18 +62,21 @@ ...@@ -61,18 +62,21 @@
<!-- Main component for a primary marketing message or call to action --> <!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron"> <div class="jumbotron">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
.jumbotron { body {
margin-top: 30px; min-height: 2000px;
}
.navbar-static-top {
margin-bottom: 19px;
} }
\ No newline at end of file
...@@ -49,9 +49,9 @@ ...@@ -49,9 +49,9 @@
</li> </li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li class="active"><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li> <li class="active"><a href="./">Default</a></li>
<li><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li> <li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li> <li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul> </ul>
</div><!--/.nav-collapse --> </div><!--/.nav-collapse -->
</div> </div>
...@@ -62,16 +62,18 @@ ...@@ -62,16 +62,18 @@
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p> <p>
<a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a> <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p> </p>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Off Canvas Template for Bootstrap</title> <title>Off Canvas Template for Bootstrap</title>
...@@ -81,7 +82,7 @@ ...@@ -81,7 +82,7 @@
</div><!--/row--> </div><!--/row-->
</div><!--/span--> </div><!--/span-->
<div class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="well sidebar-nav"> <div class="well sidebar-nav">
<ul class="nav"> <ul class="nav">
<li>Sidebar</li> <li>Sidebar</li>
...@@ -108,8 +109,13 @@ ...@@ -108,8 +109,13 @@
</div><!--/.container--> </div><!--/.container-->
<!-- jQuery and plugin -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
<script src="offcanvas.js"></script> <script src="offcanvas.js"></script>
</body> </body>
......
...@@ -17,7 +17,6 @@ footer { ...@@ -17,7 +17,6 @@ footer {
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.row-offcanvas { .row-offcanvas {
position: relative; position: relative;
overflow: hidden; /* Needed for Internet Explorer */
-webkit-transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out; transition: all 0.25s ease-out;
...@@ -25,24 +24,25 @@ footer { ...@@ -25,24 +24,25 @@ footer {
.row-offcanvas-right .row-offcanvas-right
.sidebar-offcanvas { .sidebar-offcanvas {
right: -58.333333333333336%; /* 6 columns */ right: -50%; /* 6 columns */
} }
.row-offcanvas-left .row-offcanvas-left
.sidebar-offcanvas { .sidebar-offcanvas {
left: -58.333333333333336%; /* 6 columns */ left: -50%; /* 6 columns */
} }
.row-offcanvas-right.active { .row-offcanvas-right.active {
right: 58.333333333333336%; /* 6 columns */ right: 50%; /* 6 columns */
} }
.row-offcanvas-left.active { .row-offcanvas-left.active {
left: 58.333333333333336%; /* 6 columns */ left: 50%; /* 6 columns */
} }
.sidebar-offcanvas { .sidebar-offcanvas {
position: absolute; position: absolute;
width: 58.333333333333336%; /* 6 columns */ top: 0;
width: 50%; /* 6 columns */
} }
} }
\ No newline at end of file
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Signin Template for Bootstrap</title> <title>Signin Template for Bootstrap</title>
...@@ -31,5 +32,10 @@ ...@@ -31,5 +32,10 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Starter Template for Bootstrap</title> <title>Starter Template for Bootstrap</title>
...@@ -46,7 +47,12 @@ ...@@ -46,7 +47,12 @@
</div><!-- /.container --> </div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Sticky Footer Navbar Template for Bootstrap</title> <title>Sticky Footer Navbar Template for Bootstrap</title>
...@@ -69,9 +70,12 @@ ...@@ -69,9 +70,12 @@
</div> </div>
</div> </div>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/jquery.js"></script> <script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script>
</body> </body>
</html> </html>
...@@ -24,17 +24,6 @@ body { ...@@ -24,17 +24,6 @@ body {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS /* Custom page CSS
-------------------------------------------------- */ -------------------------------------------------- */
...@@ -47,6 +36,11 @@ body { ...@@ -47,6 +36,11 @@ body {
margin: 20px 0; margin: 20px 0;
} }
#footer > .container {
padding-left: 15px;
padding-right: 15px;
}
code { code {
font-size: 80%; font-size: 80%;
} }
\ No newline at end of file
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content=""> <meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title> <title>Sticky Footer Template for Bootstrap</title>
...@@ -36,5 +37,10 @@ ...@@ -36,5 +37,10 @@
</div> </div>
</div> </div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/respond.min.js"></script>
</body> </body>
</html> </html>
...@@ -24,15 +24,6 @@ body { ...@@ -24,15 +24,6 @@ body {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS /* Custom page CSS
-------------------------------------------------- */ -------------------------------------------------- */
......
...@@ -19,7 +19,7 @@ base_url: "../" ...@@ -19,7 +19,7 @@ base_url: "../"
<p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p> <p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p> <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
<h3 id="download-options">More download options</h3> <h3 id="download-additional">Additional downloads</h3>
<div class="bs-docs-dl-options"> <div class="bs-docs-dl-options">
<h4> <h4>
<a href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest source code</a> <a href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest source code</a>
...@@ -36,7 +36,7 @@ base_url: "../" ...@@ -36,7 +36,7 @@ base_url: "../"
{% highlight bash %}$ bower install bootstrap{% endhighlight %} {% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div> </div>
<h3 id="download-cdn">Use the Bootstrap CDN</h3> <h3 id="download-cdn">Bootstrap CDN</h3>
<p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p> <p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
{% highlight html linenos %} {% highlight html linenos %}
<!-- Latest compiled and minified CSS --> <!-- Latest compiled and minified CSS -->
...@@ -202,10 +202,17 @@ bootstrap/ ...@@ -202,10 +202,17 @@ bootstrap/
<img src="../examples/screenshots/sticky-footer-navbar.jpg" alt=""> <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="">
</a> </a>
<h4>Sticky footer with navbar</h4> <h4>Sticky footer with navbar</h4>
<p>Attach a footer to the bottom of the viewport along with a fixed navbar at the top.</p> <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
</div> </div>
<div class="clearfix visible-xs"></div> <div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/justified-nav/">
<img src="../examples/screenshots/justified-nav.jpg" alt="">
</a>
<h4>Justified nav</h4>
<p>Expand on the default navbar and more to create justified navigation links.</p>
</div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/offcanvas/"> <a class="thumbnail" href="../examples/offcanvas/">
<img src="../examples/screenshots/offcanvas.jpg" alt=""> <img src="../examples/screenshots/offcanvas.jpg" alt="">
...@@ -213,6 +220,8 @@ bootstrap/ ...@@ -213,6 +220,8 @@ bootstrap/
<h4>Offcanvas</h4> <h4>Offcanvas</h4>
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p> <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div> </div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a class="thumbnail" href="../examples/carousel/"> <a class="thumbnail" href="../examples/carousel/">
<img src="../examples/screenshots/carousel.jpg" alt=""> <img src="../examples/screenshots/carousel.jpg" alt="">
...@@ -351,6 +360,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) { ...@@ -351,6 +360,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
<h3>Modals and mobile devices</h3> <h3>Modals and mobile devices</h3>
<p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p> <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
<p>Also, note that if you're using inputs in your modal – iOS has a rendering bug which doesn't update the position of fixed elements when the virtual keyboard is triggered. There are a few work arounds for this including transforming your elements to position absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
<h3>Browser zooming</h3> <h3>Browser zooming</h3>
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p> <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
......
...@@ -1415,11 +1415,11 @@ $('.nav-tabs').button() ...@@ -1415,11 +1415,11 @@ $('.nav-tabs').button()
<div class="panel-group" id="accordion"> <div class="panel-group" id="accordion">
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1 Collapsible Group Item #1
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseOne" class="panel-collapse collapse in"> <div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
...@@ -1429,11 +1429,11 @@ $('.nav-tabs').button() ...@@ -1429,11 +1429,11 @@ $('.nav-tabs').button()
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2 Collapsible Group Item #2
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseTwo" class="panel-collapse collapse"> <div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
...@@ -1443,11 +1443,11 @@ $('.nav-tabs').button() ...@@ -1443,11 +1443,11 @@ $('.nav-tabs').button()
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3 Collapsible Group Item #3
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseThree" class="panel-collapse collapse"> <div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
...@@ -1461,11 +1461,11 @@ $('.nav-tabs').button() ...@@ -1461,11 +1461,11 @@ $('.nav-tabs').button()
<div class="panel-group" id="accordion"> <div class="panel-group" id="accordion">
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1 Collapsible Group Item #1
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseOne" class="panel-collapse collapse in"> <div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body"> <div class="panel-body">
...@@ -1475,11 +1475,11 @@ $('.nav-tabs').button() ...@@ -1475,11 +1475,11 @@ $('.nav-tabs').button()
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2 Collapsible Group Item #2
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseTwo" class="panel-collapse collapse"> <div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
...@@ -1489,11 +1489,11 @@ $('.nav-tabs').button() ...@@ -1489,11 +1489,11 @@ $('.nav-tabs').button()
</div> </div>
<div class="panel"> <div class="panel">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3 Collapsible Group Item #3
</a> </a>
</h3> </h4>
</div> </div>
<div id="collapseThree" class="panel-collapse collapse"> <div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
......
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
}) })
$(document) $(document)
.on('shown.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') }) .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
}(window.jQuery); }(window.jQuery);
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
} }
.btn-xs { .btn-xs {
padding: 3px 5px; padding: 1px 5px;
} }
......
...@@ -13,6 +13,9 @@ ...@@ -13,6 +13,9 @@
border-top: @caret-width-base solid @dropdown-caret-color; border-top: @caret-width-base solid @dropdown-caret-color;
border-right: @caret-width-base solid transparent; border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent; border-left: @caret-width-base solid transparent;
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
// we can just straight up remove this.
border-bottom: 0 dotted;
content: ""; content: "";
} }
...@@ -161,7 +164,9 @@ ...@@ -161,7 +164,9 @@
.navbar-fixed-bottom .dropdown { .navbar-fixed-bottom .dropdown {
// Reverse the caret // Reverse the caret
.caret { .caret {
border-top: 0; // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
// gets fixed, restore `border-top: 0;`.
border-top: 0 dotted;
border-bottom: 4px solid @dropdown-caret-color; border-bottom: 4px solid @dropdown-caret-color;
content: ""; content: "";
} }
......
...@@ -524,26 +524,16 @@ ...@@ -524,26 +524,16 @@
.container-fixed() { .container-fixed() {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
.clearfix(); .clearfix();
} }
// Creates a wrapper for a series of columns // Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) { .make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
.container & {
@media (min-width: @screen-small) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2); margin-left: (@gutter / -2);
margin-right: (@gutter / -2); margin-right: (@gutter / -2);
} .clearfix();
} }
// Generate the extra small columns // Generate the extra small columns
......
...@@ -51,19 +51,18 @@ ...@@ -51,19 +51,18 @@
// content for the user's viewport. // content for the user's viewport.
.navbar-collapse { .navbar-collapse {
max-height: 340px;
overflow-x: visible;
padding-right: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%); border-top: 1px solid darken(@navbar-bg, 7%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
// Clear floated elements and prevent collapsing of padding
.clearfix(); .clearfix();
-webkit-overflow-scrolling: touch;
// This is not automatically added to the `.navbar-fixed-top` because it causes &.in {
// z-index bugs in iOS7 (possibly earlier).
max-height: 340px;
overflow-x: visible;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; }
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
width: auto; width: auto;
...@@ -94,8 +93,8 @@ ...@@ -94,8 +93,8 @@
// Static top (unfixed, but 100% wide) navbar // Static top (unfixed, but 100% wide) navbar
.navbar-static-top { .navbar-static-top {
@media (min-width: @grid-float-breakpoint) {
border-width: 0 0 1px; border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-radius: 0; border-radius: 0;
} }
} }
...@@ -191,10 +190,7 @@ ...@@ -191,10 +190,7 @@
// the nav the full height of the horizontal nav (above 768px). // the nav the full height of the horizontal nav (above 768px).
.navbar-nav { .navbar-nav {
padding-top: (@navbar-padding-vertical / 2); margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
padding-bottom: (@navbar-padding-vertical / 2);
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
> li > a { > li > a {
padding-top: 10px; padding-top: 10px;
...@@ -271,8 +267,6 @@ ...@@ -271,8 +267,6 @@
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
float: left; float: left;
margin: 0; margin: 0;
padding-top: 0;
padding-bottom: 0;
> li { > li {
float: left; float: left;
......
...@@ -42,17 +42,12 @@ ...@@ -42,17 +42,12 @@
} }
// Open dropdowns // Open dropdowns
&.open > a { .open > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
color: @nav-open-link-hover-color; background-color: @nav-link-hover-bg;
background-color: @link-color;
border-color: @link-color; border-color: @link-color;
.caret {
border-top-color: @nav-open-caret-border-color;
border-bottom-color: @nav-open-caret-border-color;
}
} }
} }
...@@ -159,14 +154,20 @@ ...@@ -159,14 +154,20 @@
.nav-justified { .nav-justified {
width: 100%; width: 100%;
> li { > li {
float: none; float: none;
display: table-cell;
width: 1%;
> a { > a {
text-align: center; text-align: center;
} }
} }
@media (min-width: @screen-small) {
> li {
display: table-cell;
width: 1%;
}
}
} }
// Move borders to anchors instead of bottom of list // Move borders to anchors instead of bottom of list
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
> a:hover, > a:hover,
> a:focus { > a:focus {
text-decoration: none; text-decoration: none;
background-color: @pagination-active-bg; background-color: @pagination-hover-bg;
} }
} }
......
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
.panel-title { .panel-title {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-size: (@font-size-base * 1.25); font-size: ceil((@font-size-base * 1.125));
> a { > a {
color: inherit; color: inherit;
} }
......
...@@ -137,7 +137,6 @@ ...@@ -137,7 +137,6 @@
.visible-print { .visible-print {
.responsive-invisibility(); .responsive-invisibility();
} }
.hidden-print { }
@media print { @media print {
.visible-print { .visible-print {
......
...@@ -35,6 +35,7 @@ th { ...@@ -35,6 +35,7 @@ th {
// Bottom align for column headings // Bottom align for column headings
thead > tr > th { thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
} }
// Remove top border from thead by default // Remove top border from thead by default
caption + thead, caption + thead,
...@@ -92,6 +93,14 @@ th { ...@@ -92,6 +93,14 @@ th {
} }
} }
} }
> thead {
> tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
} }
......
...@@ -600,10 +600,10 @@ ...@@ -600,10 +600,10 @@
// -------------------------------------------------- // --------------------------------------------------
// Small screen / tablet // Small screen / tablet
@container-tablet: 720px; @container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop // Medium screen / desktop
@container-desktop: 940px; @container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop // Large screen / wide desktop
@container-large-desktop: 1140px; @container-large-desktop: ((1140px + @grid-gutter-width));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment