Commit 29fe7ed6 authored by Mark Otto's avatar Mark Otto
Browse files

fix up justified nav example

parent 03170319
main cleanup-floating-forms cssvar-function dependabot/npm_and_yarn/stylelint-and-stylelint-config-twbs-bootstrap-15.3.0 extend-snippets feat/data-target floating-always-visible floating-labels-icons fod-main-banner form-controls-with-icons gh-pages gh-pages-530-alpha2 github/fork/719media/patch-13 github/fork/719media/patch-14 github/fork/719media/patch-9 github/fork/ChellyAhmed/fix-typo-reboot.md github/fork/ChellyAhmed/offcanvas-scroll-back github/fork/CtrlAltLilith/main github/fork/Elysiome/offcanvas-optional-window-resizing github/fork/JanSargsyan/main github/fork/LunicLynx/support-different-line-height-for-buttons github/fork/Psixodelik/main github/fork/Ronid1/ronid1/offcanvas_static_backdrop github/fork/RyanBerliner/tooltip-accessibility github/fork/SantiagoPVazquez/Feature-default-border-bottom-to-dropdown-item github/fork/Sir-Genius/utils github/fork/Sumit-Singh-8/main github/fork/Viktor-VERA2020/offcanvas-slide github/fork/Zivangu9/input-group-for-form-control-plaintext github/fork/alpadev/alpadev/call-dispose-on-component-reinstantiation github/fork/astagi/fix/tree-shake-modules github/fork/compnerd/dark-accordion-icon github/fork/derSascha/dropdown-dont-close-on-input-click github/fork/dev-ph1l/main github/fork/donquixote/issue-33861-utl-mixin github/fork/florianlacreuse/mixin-make-row-gutter-y github/fork/gregorw/main github/fork/iteggmbh/transitionend-dispose-race github/fork/jdelStrother/patch-1 github/fork/jonnysp/form-floating github/fork/jonnysp/independent-offcanvas github/fork/jonnysp/theme-dark-on-card-and-modal-fix github/fork/josefdlange/floating-label-placeholder-opacity github/fork/julien-deramond/enhance-change-version.js github/fork/julien-deramond/main-jd-fix-offset-content github/fork/julien-deramond/main-jd-issue-with-utitlies github/fork/julien-deramond/main-xmr-pa11y-ci-jd-add-hideElements github/fork/kyletsang/fix-tooltip-padding github/fork/lacutah/CheckboxCenteringDocumentation github/fork/lekoala/patch-3 github/fork/louismaximepiton/main-kld-lmp-collapse-proposal github/fork/louismaximepiton/main-lmp-card-inner-border-radius-fix github/fork/louismaximepiton/main-lmp-carousel-multiple-images github/fork/louismaximepiton/main-lmp-css-var-init github/fork/louismaximepiton/main-lmp-disabled-floating-label-fix github/fork/louismaximepiton/main-lmp-input-range-fix github/fork/louismaximepiton/main-lmp-shift-color github/fork/louismaximepiton/main-lmp-table-active-tr-fix github/fork/maciek-szn/switch github/fork/michael-roth/feature/19964-multiple-tab-targets github/fork/mistic100/dom-utils github/fork/nkdas91/accordion github/fork/nstungcom/fix-missing-modal-open-class github/fork/oraliahdz/animation-utilities github/fork/pine3ree/patch-7 github/fork/pouwerkerk/unindent-scss-docs-shortcode github/fork/smares/smares-no-scolling-on-modal-close github/fork/tgm-git/patch-1 gs-forms gs-toasts-with-animated-progress-bar gs/add-history-helper gs/change-version-dir-on-docs gs/data-must-set-onlu-one-instance gs/docs/fix-drop-down-error gs/event-handler-2 gs/make-docs-js-build gs/make-simple-attribute-toggler gs/popover-fix-doc gs/provide-steConfig-method gs/scrollspy-smoothscroll-option-use-browser-history gs/streamline-jqueryInterface gs/support-drop-down-in-navbar gs/test-js-generic-trigger gs/try-web-components gs/tweak-collapse-js-selector gs/use-event-handler-in-cocmponent gs/use-rollup-replace-for-version jo-docs-thanks-page jo-ssr-friendly logical-props-spacing-utils main-fod-disabled-form-check-label main-fod-nested-accordion main-fod-simpler-table-structure main-fod-table-separator main-fod-utilities-contrast main-jd-abbr-title main-jd-add-chips main-jd-add-doc-for-sass-custom-colors main-jd-add-enable-host-to-handle-web-components main-jd-browserstack-fine-tune main-jd-browserstack-updates main-jd-docs-consistent-usage-of-css-sections-step-2 main-jd-fix-docs-headers-in-white main-jd-fix-highlight-docs-border-radius main-jd-fix-placeholder-color-background-params-for-img-markup main-jd-glossary-experiment main-jd-postcss-drop-empty-css-vars main-jd-proto-doc-astro main-jd-skip-navigation-component main-jd-stackblitz-for-examples main-jd-upgrade-browserlistrc main-jd-use-host main-lmp-dark-theme-customization main-lmp-handle-scroll-target main-lmp-tab-fix main-mc-opensearch main-xmr-bundlewatch-action main-xmr-eslint-plugin-compat main-xmr-hugo-docs-vendor main-xmr-hugo-rm-ver main-xmr-linkinator-prod main-xmr-min-mangle main-xmr-pa11y-ci more-darkmode-examples nested-dropdowns patrickhlauke-issue37428 patrickhlauke-use-of-color-tweaks pr/34102 pr/37590 previous-next-docs-links sticky-thead utilities-functions-mixin v3-dev v4-dev v4-dev-dropdown-hide-method v530-dev v6-postcss-custom-media v6-spinner-dots v6/gs/use-floating-ui-in-place-of-popper xmr/dev xmr/docs-png xmr/docs-svgs xmr/hugo-reorg-files xmr/js-2 xmr/markdownlint xmr/prepare-530-alpha2 xmr/xo v5.3.0-alpha1 v5.2.3 v5.2.2 v5.2.1 v5.2.0 v5.2.0-beta1 v5.1.3 v5.1.2 v5.1.1 v5.1.0 v5.0.2 v5.0.1 v5.0.0 v5.0.0-beta3 v5.0.0-beta2 v5.0.0-beta1 v5.0.0-alpha3 v5.0.0-alpha2 v5.0.0-alpha1 v4.6.2 v4.6.1 v4.6.0 v4.5.3 v4.5.2 v4.5.1 v4.5.0 v4.4.1 v4.4.0 v4.3.1 v4.3.0 v4.2.1 v4.2.0 v4.1.3 v4.1.2 v4.1.1 v4.1.0 v4.0.0 v4.0.0-beta.3 v4.0.0-beta.2 v4.0.0-beta v4.0.0-alpha.6 v4.0.0-alpha.5 v4.0.0-alpha.4 v4.0.0-alpha.3 v4.0.0-alpha.2 v4.0.0-alpha v3.4.1 v3.4.0 v3.3.7 v3.3.6 v3.3.5 v3.3.4 v3.3.2 v3.3.1 v3.3.0 v3.2.0 v3.1.1 v3.1.0 v3.0.3 v3.0.2 v3.0.1 v3.0.0
No related merge requests found
Showing with 22 additions and 12 deletions
+22 -12
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,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 +46,17 @@ ...@@ -46,17 +46,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>
......
...@@ -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 */
...@@ -29,7 +28,7 @@ body { ...@@ -29,7 +28,7 @@ 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; max-height: 52px;
background-color: #eee; background-color: #eee;
border-radius: 5px; border-radius: 5px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -52,7 +51,9 @@ body { ...@@ -52,7 +51,9 @@ 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);
......
examples/screenshots/justified-nav.jpg

138 KB

...@@ -207,10 +207,17 @@ bootstrap/ ...@@ -207,10 +207,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="">
...@@ -218,6 +225,8 @@ bootstrap/ ...@@ -218,6 +225,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="">
......
Supports Markdown
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