14 |
15 | {{ member.name }} @{{ member.user }}
16 |
17 |
18 | {% endfor %}
19 | This paragraph will be entirely selected when clicked by the user.
14 |This paragraph has the default select behavior.
15 |This paragraph will not be selectable when clicked by the user.
16 | {% endcapture %} 17 | {% include example.html content=example %} 18 | 19 | Customize the available classes by changing the `$user-selects` Sass list in `_variables.scss`. 20 | -------------------------------------------------------------------------------- /scss/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | @mixin transition($transition...) { 3 | @if length($transition) == 0 { 4 | $transition: $transition-base; 5 | } 6 | 7 | @if length($transition) > 1 { 8 | @each $value in $transition { 9 | @if $value == null or $value == none { 10 | @warn "The keyword 'none' or 'null' must be used as a single argument."; 11 | } 12 | } 13 | } 14 | 15 | @if $enable-transitions { 16 | @if nth($transition, 1) != null { 17 | transition: $transition; 18 | } 19 | 20 | @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none { 21 | @media (prefers-reduced-motion: reduce) { 22 | transition: none; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /site/docs/4.5/examples/checkout/form-validation.js: -------------------------------------------------------------------------------- 1 | // Example starter JavaScript for disabling form submissions if there are invalid fields 2 | (function () { 3 | 'use strict' 4 | 5 | window.addEventListener('load', function () { 6 | // Fetch all the forms we want to apply custom Bootstrap validation styles to 7 | var forms = document.getElementsByClassName('needs-validation') 8 | 9 | // Loop over them and prevent submission 10 | Array.prototype.filter.call(forms, function (form) { 11 | form.addEventListener('submit', function (event) { 12 | if (form.checkValidity() === false) { 13 | event.preventDefault() 14 | event.stopPropagation() 15 | } 16 | 17 | form.classList.add('was-validated') 18 | }, false) 19 | }) 20 | }, false) 21 | })() 22 | -------------------------------------------------------------------------------- /scss/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Contextual backgrounds 4 | 5 | @mixin bg-variant($parent, $color, $ignore-warning: false) { 6 | #{$parent} { 7 | background-color: $color !important; 8 | } 9 | a#{$parent}, 10 | button#{$parent} { 11 | @include hover-focus() { 12 | background-color: darken($color, 10%) !important; 13 | } 14 | } 15 | @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning); 16 | } 17 | 18 | @mixin bg-gradient-variant($parent, $color, $ignore-warning: false) { 19 | #{$parent} { 20 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; 21 | } 22 | @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning); 23 | } 24 | -------------------------------------------------------------------------------- /site/_data/translations.yml: -------------------------------------------------------------------------------- 1 | - name: 中文(繁體) 2 | code: zh-tw 3 | description: Bootstrap 4 繁體中文手冊 4 | url: https://bootstrap.hexschool.com/ 5 | 6 | - name: Chinese 7 | code: zh 8 | description: Bootstrap 4 · 全球最流行的 HTML、CSS 和 JS 工具库。 9 | url: https://code.z01.com/v4/ 10 | 11 | - name: Chinese Simplified 12 | code: zh-CN 13 | description: Bootstrap · 全球最受欢迎的 HTML、CSS 和 JS 库。 14 | url: https://bootstrap-zh-cn.github.io/ 15 | 16 | - name: Brazilian Portuguese 17 | code: pt-BR 18 | description: Bootstrap 4 Português do Brasil 19 | url: https://getbootstrap.com.br/v4/ 20 | 21 | - name: Japanese 22 | code: ja 23 | description: Bootstrap 4 日本語リファレンス 24 | url: https://getbootstrap.jp/ 25 | 26 | - name: Korean 27 | code: ko 28 | description: Bootstrap 4 한국어 문서 29 | url: https://getbootstrap.kr/ 30 | -------------------------------------------------------------------------------- /site/docs/4.5/assets/brand/bootstrap-solid.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /site/docs/4.5/assets/brand/bootstrap-punchout.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /site/docs/4.5/assets/scss/_ads.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important, selector-max-id 2 | 3 | // 4 | // Carbon ads 5 | // 6 | 7 | #carbonads { 8 | position: static; 9 | display: block; 10 | max-width: 400px; 11 | padding: 15px 15px 15px 160px; 12 | margin: 2rem 0; 13 | overflow: hidden; 14 | @include font-size(.8125rem); 15 | line-height: 1.4; 16 | text-align: left; 17 | background-color: rgba(0, 0, 0, .05); 18 | 19 | a { 20 | color: #333; 21 | text-decoration: none; 22 | } 23 | 24 | @include media-breakpoint-up(sm) { 25 | max-width: 330px; 26 | @include border-radius(4px); 27 | } 28 | } 29 | 30 | .carbon-img { 31 | float: left; 32 | margin-left: -145px; 33 | } 34 | 35 | .carbon-poweredby { 36 | display: block; 37 | margin-top: .75rem; 38 | color: #777 !important; 39 | } 40 | -------------------------------------------------------------------------------- /site/docs/4.5/assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Local docs variables 2 | $bd-purple: #563d7c; 3 | $bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); 4 | $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); 5 | $bd-dark: #2a2730; 6 | $bd-download: #ffe484; 7 | $bd-info: #5bc0de; 8 | $bd-warning: #f0ad4e; 9 | $bd-danger: #d9534f; 10 | $dropdown-active-icon: url("data:image/svg+xml,"); 11 | 12 | // Enable responsive font sizes for font sizes defined in the docs 13 | // The weird if test is made as a workaround to prevent a false fusv error. 14 | // 15 | $enable-responsive-font-sizes: if($enable-responsive-font-sizes, true, true); 16 | -------------------------------------------------------------------------------- /site/_includes/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /site/docs/4.5/examples/sticky-footer/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: examples 3 | title: Sticky Footer Template 4 | extra_css: "sticky-footer.rtl.css" 5 | html_class: "h-100" 6 | body_class: "d-flex flex-column h-100" 7 | include_js: false 8 | --- 9 | 10 | 11 |Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.
15 |Use the sticky footer with a fixed navbar if need be, too.
16 |{{ page.description | smartify }}
9 | {%- if page.title == "Examples" -%} 10 |
14 |
15 | {{ member.name }} @{{ member.user }}
16 |
17 |
18 | {% endfor %}
19 | .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
13 | .overflow-hidden on an element with set width and height dimensions.
16 | {{ release.description }}
13 | {% assign versions = release.versions | reverse %} 14 | {% for version in versions %} 15 | {% if forloop.first %}Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.
24 |25 | Learn more 26 |
27 |{{ page.description | smartify }}
29 | {% include ads.html %} 30 | {{ content }} 31 |This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
14 |It uses utility classes for typography and spacing to space content out within the larger container.
16 | Learn more 17 |This is a modified jumbotron that occupies the entire horizontal space of its parent.
28 || baseline | 31 |top | 32 |middle | 33 |bottom | 34 |text-top | 35 |text-bottom | 36 |
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.
35 | View navbar docs » 36 |This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.
35 | View navbar docs » 36 |This example is a quick exercise to illustrate how the bottom navbar works.
10 | View navbar docs » 11 |`. Be sure to escape HTML angle brackets.
12 |
13 | {% capture example %}
14 | For example, <section> should be wrapped as inline.
15 | {% endcapture %}
16 | {% include example.html content=example %}
17 |
18 | ## Code blocks
19 |
20 | Use ``s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar.
21 |
22 | {% capture example %}
23 | <p>Sample text here...</p>
24 | <p>And another line of sample text here...</p>
25 |
26 | {% endcapture %}
27 | {% include example.html content=example %}
28 |
29 | ## Variables
30 |
31 | For indicating variables use the `` tag.
32 |
33 | {% capture example %}
34 | y = mx + b
35 | {% endcapture %}
36 | {% include example.html content=example %}
37 |
38 | ## User input
39 |
40 | Use the `` to indicate input that is typically entered via keyboard.
41 |
42 | {% capture example %}
43 | To switch directories, type cd followed by the name of the directory.
44 | To edit settings, press ctrl + ,
45 | {% endcapture %}
46 | {% include example.html content=example %}
47 |
48 | ## Sample output
49 |
50 | For indicating sample output from a program use the `` tag.
51 |
52 | {% capture example %}
53 | This text is meant to be treated as sample output from a computer program.
54 | {% endcapture %}
55 | {% include example.html content=example %}
56 |
--------------------------------------------------------------------------------
/js/tests/browsers.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | /* eslint-disable camelcase */
3 |
4 | const browsers = {
5 | safariMac: {
6 | base: 'BrowserStack',
7 | os: 'OS X',
8 | os_version: 'High Sierra',
9 | browser: 'Safari',
10 | browser_version: 'latest'
11 | },
12 | chromeMac: {
13 | base: 'BrowserStack',
14 | os: 'OS X',
15 | os_version: 'High Sierra',
16 | browser: 'Chrome',
17 | browser_version: 'latest'
18 | },
19 | firefoxMac: {
20 | base: 'BrowserStack',
21 | os: 'OS X',
22 | os_version: 'High Sierra',
23 | browser: 'Firefox',
24 | browser_version: 'latest'
25 | },
26 | edgeWin10: {
27 | base: 'BrowserStack',
28 | os: 'Windows',
29 | os_version: '10',
30 | browser: 'Edge',
31 | browser_version: '15'
32 | },
33 | ie11Win10: {
34 | base: 'BrowserStack',
35 | os: 'Windows',
36 | os_version: '10',
37 | browser: 'IE',
38 | browser_version: '11.0'
39 | },
40 | chromeWin10: {
41 | base: 'BrowserStack',
42 | os: 'Windows',
43 | os_version: '10',
44 | browser: 'Chrome',
45 | browser_version: 'latest'
46 | },
47 | firefoxWin10: {
48 | base: 'BrowserStack',
49 | os: 'Windows',
50 | os_version: '10',
51 | browser: 'Firefox',
52 | browser_version: 'latest'
53 | },
54 | ie10Win8: {
55 | base: 'BrowserStack',
56 | os: 'Windows',
57 | os_version: '8',
58 | browser: 'IE',
59 | browser_version: '10.0'
60 | },
61 | iphoneX: {
62 | base: 'BrowserStack',
63 | os: 'ios',
64 | os_version: '11.0',
65 | device: 'iPhone X',
66 | real_mobile: true
67 | },
68 | pixel2: {
69 | base: 'BrowserStack',
70 | os: 'android',
71 | os_version: '8.0',
72 | device: 'Google Pixel 2',
73 | real_mobile: true
74 | }
75 | }
76 |
77 | const browsersKeys = Object.keys(browsers)
78 |
79 | module.exports = {
80 | browsers,
81 | browsersKeys
82 | }
83 |
--------------------------------------------------------------------------------
/nuget/bootstrap.sass.nuspec:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | bootstrap.sass
5 |
6 | 4
7 | Bootstrap Sass
8 | The Bootstrap Authors, Twitter Inc.
9 | bootstrap
10 | The most popular front-end framework for developing responsive, mobile first projects on the web.
11 | https://blog.getbootstrap.com/
12 | Bootstrap framework in Sass. Includes JavaScript
13 | en-us
14 | https://getbootstrap.com/
15 | bootstrap.png
16 | LICENSE.txt
17 | Copyright 2017-2020
18 | false
19 |
20 |
23 | css sass mobile-first responsive front-end framework web
24 |
25 |
27 |
28 |
29 |
40 |
41 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/offcanvas/offcanvas.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | overflow-x: hidden; /* Prevent scroll on narrow devices */
4 | }
5 |
6 | body {
7 | padding-top: 56px;
8 | }
9 |
10 | @media (max-width: 991.98px) {
11 | .offcanvas-collapse {
12 | position: fixed;
13 | top: 56px; /* Height of navbar */
14 | bottom: 0;
15 | left: 100%;
16 | width: 100%;
17 | padding-right: 1rem;
18 | padding-left: 1rem;
19 | overflow-y: auto;
20 | visibility: hidden;
21 | background-color: #343a40;
22 | transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
23 | transition: transform .3s ease-in-out, visibility .3s ease-in-out;
24 | transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
25 | }
26 | .offcanvas-collapse.open {
27 | visibility: visible;
28 | -webkit-transform: translateX(-100%);
29 | transform: translateX(-100%);
30 | }
31 | }
32 |
33 | .nav-scroller {
34 | position: relative;
35 | z-index: 2;
36 | height: 2.75rem;
37 | overflow-y: hidden;
38 | }
39 |
40 | .nav-scroller .nav {
41 | display: -ms-flexbox;
42 | display: flex;
43 | -ms-flex-wrap: nowrap;
44 | flex-wrap: nowrap;
45 | padding-bottom: 1rem;
46 | margin-top: -1px;
47 | overflow-x: auto;
48 | color: rgba(255, 255, 255, .75);
49 | text-align: center;
50 | white-space: nowrap;
51 | -webkit-overflow-scrolling: touch;
52 | }
53 |
54 | .nav-underline .nav-link {
55 | padding-top: .75rem;
56 | padding-bottom: .75rem;
57 | font-size: .875rem;
58 | color: #6c757d;
59 | }
60 |
61 | .nav-underline .nav-link:hover {
62 | color: #007bff;
63 | }
64 |
65 | .nav-underline .active {
66 | font-weight: 500;
67 | color: #343a40;
68 | }
69 |
70 | .text-white-50 { color: rgba(255, 255, 255, .5); }
71 |
72 | .bg-purple { background-color: #6f42c1; }
73 |
74 | .lh-100 { line-height: 1; }
75 | .lh-125 { line-height: 1.25; }
76 | .lh-150 { line-height: 1.5; }
77 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/offcanvas/offcanvas.rtl.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | overflow-x: hidden; /* Prevent scroll on narrow devices */
4 | }
5 |
6 | body {
7 | padding-top: 56px;
8 | }
9 |
10 | @media (max-width: 991.98px) {
11 | .offcanvas-collapse {
12 | position: fixed;
13 | top: 56px; /* Height of navbar */
14 | bottom: 0;
15 | right: 100%;
16 | width: 100%;
17 | padding-left: 1rem;
18 | padding-right: 1rem;
19 | overflow-y: auto;
20 | visibility: hidden;
21 | background-color: #343a40;
22 | transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
23 | transition: transform .3s ease-in-out, visibility .3s ease-in-out;
24 | transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
25 | }
26 | .offcanvas-collapse.open {
27 | visibility: visible;
28 | -webkit-transform: translateX(100%);
29 | transform: translateX(100%);
30 | }
31 | }
32 |
33 | .nav-scroller {
34 | position: relative;
35 | z-index: 2;
36 | height: 2.75rem;
37 | overflow-y: hidden;
38 | }
39 |
40 | .nav-scroller .nav {
41 | display: -ms-flexbox;
42 | display: flex;
43 | -ms-flex-wrap: nowrap;
44 | flex-wrap: nowrap;
45 | padding-bottom: 1rem;
46 | margin-top: -1px;
47 | overflow-x: auto;
48 | color: rgba(255, 255, 255, .75);
49 | text-align: center;
50 | white-space: nowrap;
51 | -webkit-overflow-scrolling: touch;
52 | }
53 |
54 | .nav-underline .nav-link {
55 | padding-top: .75rem;
56 | padding-bottom: .75rem;
57 | font-size: .875rem;
58 | color: #6c757d;
59 | }
60 |
61 | .nav-underline .nav-link:hover {
62 | color: #007bff;
63 | }
64 |
65 | .nav-underline .active {
66 | font-weight: 500;
67 | color: #343a40;
68 | }
69 |
70 | .text-white-50 { color: rgba(255, 255, 255, .5); }
71 |
72 | .bg-purple { background-color: #6f42c1; }
73 |
74 | .lh-100 { line-height: 1; }
75 | .lh-125 { line-height: 1.25; }
76 | .lh-150 { line-height: 1.5; }
77 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/cover/cover.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Globals
3 | */
4 |
5 | /* Links */
6 | a,
7 | a:focus,
8 | a:hover {
9 | color: #fff;
10 | }
11 |
12 | /* Custom default button */
13 | .btn-secondary,
14 | .btn-secondary:hover,
15 | .btn-secondary:focus {
16 | color: #333;
17 | text-shadow: none; /* Prevent inheritance from `body` */
18 | background-color: #fff;
19 | border: .05rem solid #fff;
20 | }
21 |
22 |
23 | /*
24 | * Base structure
25 | */
26 |
27 | html,
28 | body {
29 | height: 100%;
30 | background-color: #333;
31 | }
32 |
33 | body {
34 | display: -ms-flexbox;
35 | display: flex;
36 | color: #fff;
37 | text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
38 | box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
39 | }
40 |
41 | .cover-container {
42 | max-width: 42em;
43 | }
44 |
45 |
46 | /*
47 | * Header
48 | */
49 | .masthead {
50 | margin-bottom: 2rem;
51 | }
52 |
53 | .masthead-brand {
54 | margin-bottom: 0;
55 | }
56 |
57 | .nav-masthead .nav-link {
58 | padding: .25rem 0;
59 | font-weight: 700;
60 | color: rgba(255, 255, 255, .5);
61 | background-color: transparent;
62 | border-bottom: .25rem solid transparent;
63 | }
64 |
65 | .nav-masthead .nav-link:hover,
66 | .nav-masthead .nav-link:focus {
67 | border-bottom-color: rgba(255, 255, 255, .25);
68 | }
69 |
70 | .nav-masthead .nav-link + .nav-link {
71 | margin-left: 1rem;
72 | }
73 |
74 | .nav-masthead .active {
75 | color: #fff;
76 | border-bottom-color: #fff;
77 | }
78 |
79 | @media (min-width: 48em) {
80 | .masthead-brand {
81 | float: left;
82 | }
83 | .nav-masthead {
84 | float: right;
85 | }
86 | }
87 |
88 |
89 | /*
90 | * Cover
91 | */
92 | .cover {
93 | padding: 0 1.5rem;
94 | }
95 | .cover .btn-lg {
96 | padding: .75rem 1.25rem;
97 | font-weight: 700;
98 | }
99 |
100 |
101 | /*
102 | * Footer
103 | */
104 | .mastfoot {
105 | color: rgba(255, 255, 255, .5);
106 | }
107 |
--------------------------------------------------------------------------------
/site/docs/4.5/examples/cover/cover.rtl.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Globals
3 | */
4 |
5 | /* Links */
6 | a,
7 | a:focus,
8 | a:hover {
9 | color: #fff;
10 | }
11 |
12 | /* Custom default button */
13 | .btn-secondary,
14 | .btn-secondary:hover,
15 | .btn-secondary:focus {
16 | color: #333;
17 | text-shadow: none; /* Prevent inheritance from `body` */
18 | background-color: #fff;
19 | border: .05rem solid #fff;
20 | }
21 |
22 |
23 | /*
24 | * Base structure
25 | */
26 |
27 | html,
28 | body {
29 | height: 100%;
30 | background-color: #333;
31 | }
32 |
33 | body {
34 | display: -ms-flexbox;
35 | display: flex;
36 | color: #fff;
37 | text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
38 | box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
39 | }
40 |
41 | .cover-container {
42 | max-width: 42em;
43 | }
44 |
45 |
46 | /*
47 | * Header
48 | */
49 | .masthead {
50 | margin-bottom: 2rem;
51 | }
52 |
53 | .masthead-brand {
54 | margin-bottom: 0;
55 | }
56 |
57 | .nav-masthead .nav-link {
58 | padding: .25rem 0;
59 | font-weight: 700;
60 | color: rgba(255, 255, 255, .5);
61 | background-color: transparent;
62 | border-bottom: .25rem solid transparent;
63 | }
64 |
65 | .nav-masthead .nav-link:hover,
66 | .nav-masthead .nav-link:focus {
67 | border-bottom-color: rgba(255, 255, 255, .25);
68 | }
69 |
70 | .nav-masthead .nav-link + .nav-link {
71 | margin-right: 1rem;
72 | }
73 |
74 | .nav-masthead .active {
75 | color: #fff;
76 | border-bottom-color: #fff;
77 | }
78 |
79 | @media (min-width: 48em) {
80 | .masthead-brand {
81 | float: right;
82 | }
83 | .nav-masthead {
84 | float: left;
85 | }
86 | }
87 |
88 |
89 | /*
90 | * Cover
91 | */
92 | .cover {
93 | padding: 0 1.5rem;
94 | }
95 | .cover .btn-lg {
96 | padding: .75rem 1.25rem;
97 | font-weight: 700;
98 | }
99 |
100 |
101 | /*
102 | * Footer
103 | */
104 | .mastfoot {
105 | color: rgba(255, 255, 255, .5);
106 | }
107 |
--------------------------------------------------------------------------------
/site/docs/4.5/utilities/float.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: docs
3 | title: Float
4 | description: Toggle floats on any element, across any breakpoint, using our responsive float utilities.
5 | group: utilities
6 | toc: true
7 | ---
8 |
9 | ## Overview
10 |
11 | These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.
12 |
13 | ## Classes
14 |
15 | Toggle a float with a class:
16 |
17 | {% capture example %}
18 | Float left on all viewport sizes
19 | Float right on all viewport sizes
20 | Don't float on all viewport sizes
21 | {% endcapture %}
22 | {% include example.html content=example %}
23 |
24 | ## Mixins
25 |
26 | Or by Sass mixin:
27 |
28 | {% highlight scss %}
29 | .element {
30 | @include float-left;
31 | }
32 | .another-element {
33 | @include float-right;
34 | }
35 | .one-more {
36 | @include float-none;
37 | }
38 | {% endhighlight %}
39 |
40 | ## Responsive
41 |
42 | Responsive variations also exist for each `float` value.
43 |
44 | {% capture example %}
45 | Float left on viewports sized SM (small) or wider
46 | Float left on viewports sized MD (medium) or wider
47 | Float left on viewports sized LG (large) or wider
48 | Float left on viewports sized XL (extra-large) or wider
49 | {% endcapture %}
50 | {% include example.html content=example %}
51 |
52 | Here are all the support classes;
53 |
54 | {% for bp in site.data.breakpoints %}
55 | - `.float{{ bp.abbr }}-left`
56 | - `.float{{ bp.abbr }}-right`
57 | - `.float{{ bp.abbr }}-none`{% endfor %}
58 |
--------------------------------------------------------------------------------
/site/_includes/example.html:
--------------------------------------------------------------------------------
1 | {%- comment -%}
2 | Usage: include example.html content=markup [args],
3 | where content is a capture with the HTML content
4 |
5 | args can be one of the following:
6 | id - null (default)
7 | class - "bd-example" (default)
8 | optional: hide_preview - disabled (default)
9 | optional: hide_markup - disabled (default)
10 | {%- endcomment -%}
11 |
12 | {%- assign id = include.id -%}
13 | {%- assign class = include.class -%}
14 |
15 | {%- if include.hide_preview == null -%}
16 |
17 | {{- include.content -}}
18 |
19 | {%- endif -%}
20 |
21 | {%- if include.hide_markup == null -%}
22 | {%- highlight html -%}
23 | {%- if include.content contains '