mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-02-09 00:00:41 +03:00
bs docs sync
This commit is contained in:
Kevin Ross
parent
2c5e945579
commit
6e03725f44
|
|
@ -1,5 +1,3 @@
|
|||
<div class="bd-sidebar">
|
||||
|
||||
<form class="bd-search hidden-sm-down">
|
||||
<input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
|
||||
<div class="dropdown-menu bd-search-results" id="search-results"></div>
|
||||
|
|
@ -64,4 +62,3 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,19 +24,38 @@
|
|||
</nav>
|
||||
{% endcomment %}
|
||||
|
||||
<div class="clearfix">
|
||||
<button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
|
||||
☰
|
||||
</button>
|
||||
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
|
||||
Material Design for Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
|
||||
<nav class="nav navbar-nav">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Bootstrap');">Material Design for Bootstrap</a>
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</nav>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="clearfix">
|
||||
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
|
||||
Material Design for Bootstrap
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-toggleable-xs" id="bd-main-nav">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Bootstrap');">Material Design for Bootstrap</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.layout == "docs" %}active{% endif %}" href="{{ site.baseurl }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link {% if page.title == "Examples" %}active{% endif %}" href="{{ site.baseurl }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<!--
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-item nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
padding: 1.25rem !important;
|
||||
margin: 2rem ($grid-gutter-width * -1) -2rem !important;
|
||||
overflow: hidden; // clearfix
|
||||
font-size: .8rem !important;
|
||||
font-family: inherit !important;
|
||||
font-size: .8rem !important;
|
||||
line-height: 1rem !important;
|
||||
color: $bd-purple-light !important;
|
||||
text-align: left;
|
||||
|
|
@ -51,10 +51,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.carbonad #azcarbon > img {
|
||||
display: none; // hide what I assume are tracking images
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.carbonad {
|
||||
width: 330px !important;
|
||||
|
|
|
|||
|
|
@ -12,9 +12,7 @@
|
|||
|
||||
*:hover > .anchorjs-link {
|
||||
opacity: .75;
|
||||
-webkit-transition: color .16s linear;
|
||||
-o-transition: color .16s linear;
|
||||
transition: color .16s linear;
|
||||
transition: color .16s linear;
|
||||
}
|
||||
|
||||
*:hover > .anchorjs-link:hover,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
color: #fff;
|
||||
background-color:$bd-purple-bright;
|
||||
background-color: $bd-purple-bright;
|
||||
border-color: $bd-purple-bright;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
.bd-example-container {
|
||||
min-width: 16rem;
|
||||
max-width: 25rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.bd-example-container-header {
|
||||
|
|
@ -69,10 +69,10 @@
|
|||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-left: 0;
|
||||
padding: 1.5rem;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 1.5rem;
|
||||
margin-left: 0;
|
||||
border-width: .2rem;
|
||||
}
|
||||
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
}
|
||||
|
||||
// Navbars
|
||||
.bd-example {
|
||||
.bd-example {
|
||||
.navbar-fixed-top {
|
||||
position: static;
|
||||
margin: -1rem -1rem 1rem;
|
||||
|
|
@ -336,15 +336,3 @@
|
|||
font-size: inherit;
|
||||
color: $gray-dark; // Effectively the base text color
|
||||
}
|
||||
|
||||
|
||||
// Pseudo focus
|
||||
//
|
||||
// Custom `:focus` state for showing how it looks in the docs.
|
||||
|
||||
#focusedInput {
|
||||
border-color: $input-border-focus;
|
||||
outline: 0;
|
||||
outline: thin dotted \9; // IE9
|
||||
box-shadow: 0 0 .5rem $input-box-shadow-focus;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable IdSelector
|
||||
|
||||
//
|
||||
// Automatically style Markdown-based tables like a Bootstrap `.table`.
|
||||
//
|
||||
|
|
@ -9,8 +11,8 @@
|
|||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-y: auto;
|
||||
margin-bottom: $spacer;
|
||||
overflow-y: auto;
|
||||
|
||||
// Cells
|
||||
> thead,
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@
|
|||
padding: 4rem 0;
|
||||
margin-top: 4rem;
|
||||
font-size: 85%;
|
||||
background-color: #f7f7f7;
|
||||
text-align: center;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@
|
|||
padding: 3rem ($grid-gutter-width / 2) 2rem;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
background-image: -webkit-linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(darken($bd-purple, 20%))}', endColorstr='#{ie-hex-str(lighten(saturate($bd-purple, 5%), 15%))}', gradientType='1'); /* For IE9 */
|
||||
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
|
||||
.bd-booticon {
|
||||
margin: 0 auto 2rem;
|
||||
|
|
@ -21,9 +19,9 @@
|
|||
}
|
||||
|
||||
.lead {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 2rem;
|
||||
margin-left: auto;
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@
|
|||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding-left: .75rem;
|
||||
padding-right: .75rem;
|
||||
padding-left: .75rem;
|
||||
|
||||
&:first-child { margin-top: .25rem; }
|
||||
&:last-child { margin-bottom: .25rem; }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
// scss-lint:disable IdSelector
|
||||
|
||||
#skippy {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -1,65 +1,65 @@
|
|||
// DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
.hll { background-color: #ffffcc }
|
||||
.hll { background-color: #ffc; }
|
||||
.c { color: #999; }
|
||||
.err { color: #AA0000; background-color: #FFAAAA }
|
||||
.k { color: #006699; }
|
||||
.o { color: #555555 }
|
||||
.err { color: #a00; background-color: #faa; }
|
||||
.k { color: #069; }
|
||||
.o { color: #555; }
|
||||
.cm { color: #999; }
|
||||
.cp { color: #009999 }
|
||||
.cp { color: #099; }
|
||||
.c1 { color: #999; }
|
||||
.cs { color: #999; }
|
||||
.gd { background-color: #FFCCCC; border: 1px solid #CC0000 }
|
||||
.ge { font-style: italic }
|
||||
.gr { color: #FF0000 }
|
||||
.gh { color: #003300; }
|
||||
.gi { background-color: #CCFFCC; border: 1px solid #00CC00 }
|
||||
.go { color: #AAAAAA }
|
||||
.gp { color: #000099; }
|
||||
.gu { color: #003300; }
|
||||
.gt { color: #99CC66 }
|
||||
.kc { color: #006699; }
|
||||
.kd { color: #006699; }
|
||||
.kn { color: #006699; }
|
||||
.kp { color: #006699 }
|
||||
.kr { color: #006699; }
|
||||
.kt { color: #007788; }
|
||||
.m { color: #FF6600 }
|
||||
.s { color: #d44950 }
|
||||
.na { color: #4f9fcf }
|
||||
.nb { color: #336666 }
|
||||
.nc { color: #00AA88; }
|
||||
.no { color: #336600 }
|
||||
.nd { color: #9999FF }
|
||||
.ni { color: #999999; }
|
||||
.ne { color: #CC0000; }
|
||||
.nf { color: #CC00FF }
|
||||
.nl { color: #9999FF }
|
||||
.nn { color: #00CCFF; }
|
||||
.gd { background-color: #fcc; border: 1px solid #c00; }
|
||||
.ge { font-style: italic; }
|
||||
.gr { color: #f00; }
|
||||
.gh { color: #030; }
|
||||
.gi { background-color: #cfc; border: 1px solid #0c0; }
|
||||
.go { color: #aaa; }
|
||||
.gp { color: #009; }
|
||||
.gu { color: #030; }
|
||||
.gt { color: #9c6; }
|
||||
.kc { color: #069; }
|
||||
.kd { color: #069; }
|
||||
.kn { color: #069; }
|
||||
.kp { color: #069; }
|
||||
.kr { color: #069; }
|
||||
.kt { color: #078; }
|
||||
.m { color: #f60; }
|
||||
.s { color: #d44950; }
|
||||
.na { color: #4f9fcf; }
|
||||
.nb { color: #366; }
|
||||
.nc { color: #0a8; }
|
||||
.no { color: #360; }
|
||||
.nd { color: #99f; }
|
||||
.ni { color: #999; }
|
||||
.ne { color: #c00; }
|
||||
.nf { color: #c0f; }
|
||||
.nl { color: #99f; }
|
||||
.nn { color: #0cf; }
|
||||
.nt { color: #2f6f9f; }
|
||||
.nv { color: #003333 }
|
||||
.ow { color: #000000; }
|
||||
.w { color: #bbbbbb }
|
||||
.mf { color: #FF6600 }
|
||||
.mh { color: #FF6600 }
|
||||
.mi { color: #FF6600 }
|
||||
.mo { color: #FF6600 }
|
||||
.sb { color: #CC3300 }
|
||||
.sc { color: #CC3300 }
|
||||
.sd { color: #CC3300; font-style: italic }
|
||||
.s2 { color: #CC3300 }
|
||||
.se { color: #CC3300; }
|
||||
.sh { color: #CC3300 }
|
||||
.si { color: #AA0000 }
|
||||
.sx { color: #CC3300 }
|
||||
.sr { color: #33AAAA }
|
||||
.s1 { color: #CC3300 }
|
||||
.ss { color: #FFCC33 }
|
||||
.bp { color: #336666 }
|
||||
.vc { color: #003333 }
|
||||
.vg { color: #003333 }
|
||||
.vi { color: #003333 }
|
||||
.il { color: #FF6600 }
|
||||
.nv { color: #033; }
|
||||
.ow { color: #000; }
|
||||
.w { color: #bbb; }
|
||||
.mf { color: #f60; }
|
||||
.mh { color: #f60; }
|
||||
.mi { color: #f60; }
|
||||
.mo { color: #f60; }
|
||||
.sb { color: #c30; }
|
||||
.sc { color: #c30; }
|
||||
.sd { font-style: italic; color: #c30; }
|
||||
.s2 { color: #c30; }
|
||||
.se { color: #c30; }
|
||||
.sh { color: #c30; }
|
||||
.si { color: #a00; }
|
||||
.sx { color: #c30; }
|
||||
.sr { color: #3aa; }
|
||||
.s1 { color: #c30; }
|
||||
.ss { color: #fc3; }
|
||||
.bp { color: #366; }
|
||||
.vc { color: #033; }
|
||||
.vg { color: #033; }
|
||||
.vi { color: #033; }
|
||||
.il { color: #f60; }
|
||||
|
||||
.css .o,
|
||||
.css .o + .nt,
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
}
|
||||
|
||||
.github-btn {
|
||||
border: none;
|
||||
float: right;
|
||||
width: 180px;
|
||||
height: 1.25rem;
|
||||
margin-top: .25rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -19,17 +19,26 @@ Indicate the current page's location within a navigational hierarchy.
|
|||
|
||||
Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
|
||||
|
||||
Works fine with or without the usage of list markup.
|
||||
|
||||
{% example html %}
|
||||
<ol class="breadcrumb">
|
||||
<li class="active">Home</li>
|
||||
<li class="breadcrumb-item active">Home</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li class="active">Library</li>
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active">Library</li>
|
||||
</ol>
|
||||
<ol class="breadcrumb" style="margin-bottom: 5px;">
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Library</a></li>
|
||||
<li class="active">Data</li>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active">Data</li>
|
||||
</ol>
|
||||
<!-- Or use a div instead of a list -->
|
||||
<div class="breadcrumb">
|
||||
<a class="breadcrumb-item" href="#">Home</a>
|
||||
<a class="breadcrumb-item" href="#">Library</a>
|
||||
<a class="breadcrumb-item" href="#">Data</a>
|
||||
<span class="breadcrumb-item active">Bootstrap</span>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -109,8 +109,8 @@ Create block level buttons—those that span the full width of a parent—by add
|
|||
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
## Disabled state
|
||||
|
|
@ -126,17 +126,17 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
|
|||
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
|
||||
{% endexample %}
|
||||
|
||||
As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it.
|
||||
As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it. In addition, include the `aria-disabled="true"` attribute, to indicate the state of the element to assistive technologies.
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
|
||||
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
|
||||
{% endexample %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Link functionality caveat
|
||||
|
||||
This class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11\. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.
|
||||
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
|
||||
{% endcallout %}
|
||||
|
||||
## Button plugin
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Cards require a small amount of markup and classes to provide you with as much c
|
|||
<div class="card-block">
|
||||
<h4 class="card-title">Card title</h4>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
@ -271,7 +271,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
|
|||
<div class="card-block">
|
||||
<h3 class="card-title">Special title treatment</h3>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Button</a>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
<form>
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
||||
<small class="text-muted">We'll never share your email with anyone else.</small>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||||
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
|
||||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
|
|
@ -65,8 +65,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
|||
</fieldset>
|
||||
<fieldset class="form-group">
|
||||
<label for="exampleInputFile">File input</label>
|
||||
<input type="file" class="form-control-file" id="exampleInputFile">
|
||||
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
||||
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
|
||||
<small id="fileHelp" class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
||||
</fieldset>
|
||||
<div class="radio">
|
||||
<label>
|
||||
|
|
@ -528,19 +528,33 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
|
|||
|
||||
No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it.
|
||||
|
||||
{% callout warning %}
|
||||
#### Associating help text with form controls
|
||||
|
||||
Help text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.
|
||||
{% endcallout %}
|
||||
|
||||
Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else).
|
||||
|
||||
{% example html %}
|
||||
<small class="text-muted">
|
||||
Some inline text with a small tag looks like this.
|
||||
</small>
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label for="inputPassword4">Password</label>
|
||||
<input type="password" id="inputPassword4" class="form-control" aria-describedby="passwordHelpInline">
|
||||
<small id="passwordHelpInline" class="text-muted">
|
||||
Must be 8-20 characters long.
|
||||
</small>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `<p>`.
|
||||
|
||||
{% example html %}
|
||||
<p class="text-muted">
|
||||
A block of help text that breaks onto a new line and may extend beyond one line.
|
||||
<label for="inputPassword5">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
|
||||
<p id="passwordHelpBlock" class="text-muted">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.
|
||||
</p>
|
||||
{% endexample %}
|
||||
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
|||
For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
|
||||
|
||||
{% highlight html %}
|
||||
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
|
||||
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
|
||||
...
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -251,16 +251,16 @@ Navbars can be statically placed (their default behavior), static without rounde
|
|||
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
|
||||
|
||||
{% example html %}
|
||||
<div class="collapse" id="exCollapsingNavbar">
|
||||
<div class="bg-inverse p-a-1">
|
||||
<h4>Collapsed content</h4>
|
||||
<span class="text-muted">Toggleable via the navbar brand.</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<div class="collapse" id="exCollapsingNavbar">
|
||||
<div class="bg-inverse p-a-1">
|
||||
<h4>Collapsed content</h4>
|
||||
<span class="text-muted">Toggleable via the navbar brand.</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -268,7 +268,7 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
|
|||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
|
||||
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
|
||||
☰
|
||||
</button>
|
||||
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
|
||||
|
|
|
|||
|
|
@ -54,11 +54,18 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
|||
|
||||
Links are customizable for different circumstances. Use `.disabled` for unclickable links and `.active` to indicate the current page.
|
||||
|
||||
{% callout warning %}
|
||||
#### Link functionality caveat
|
||||
|
||||
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="#" aria-label="Previous">
|
||||
<a class="page-link" href="#" tabindex="-1" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
|
|
@ -80,7 +87,7 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
|
|||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles.
|
||||
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
|
|
@ -178,12 +185,12 @@ Alternatively, you can align each link to the sides:
|
|||
|
||||
### Optional disabled state
|
||||
|
||||
Pager links also use the `.disabled` class.
|
||||
Pager links also support the `.disabled` class (though note that the same advice about keyboard focus as for the default pagination applies here as well).
|
||||
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="pager-prev disabled"><a href="#">Older</a></li>
|
||||
<li class="pager-prev disabled"><a href="#" tabindex="-1">Older</a></li>
|
||||
<li class="pager-next"><a href="#">Newer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -128,6 +128,12 @@ $('#example').tooltip(options)
|
|||
|
||||
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
|
||||
|
||||
{% callout warning %}
|
||||
#### Making tooltips work for keyboard and assistive technology users
|
||||
|
||||
You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.
|
||||
{% endcallout %}
|
||||
|
||||
{% highlight html %}
|
||||
<!-- HTML to write -->
|
||||
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
|
||||
|
|
|
|||
|
|
@ -24,18 +24,20 @@ Styles for inline code snippets and longer, multiline blocks of code.
|
|||
|
||||
## Inline code
|
||||
|
||||
Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets.
|
||||
Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
|
||||
|
||||
{% example html %}
|
||||
For example, <code><section></code> should be wrapped as inline.
|
||||
{% endexample %}
|
||||
|
||||
## Preformatted text
|
||||
## Code blocks
|
||||
|
||||
Or, code blocks. Use `<pre>`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 350px and provide a y-axis scrollbar.
|
||||
Use `<pre>`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 350px and provide a y-axis scrollbar.
|
||||
|
||||
{% example html %}
|
||||
<pre><p>Sample text here...</p></pre>
|
||||
<pre><code><p>Sample text here...</p>
|
||||
<p>And another line of sample text here...</p>
|
||||
</code></pre>
|
||||
{% endexample %}
|
||||
|
||||
## Variables
|
||||
|
|
@ -57,7 +59,7 @@ To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
|||
|
||||
## Sample output
|
||||
|
||||
For indicating blocks sample output from a program use the `<samp>` tag.
|
||||
For indicating sample output from a program use the `<samp>` tag.
|
||||
|
||||
{% example html %}
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
|
|
|
|||
|
|
@ -226,12 +226,12 @@ Place all list items on a single line with `display: inline-block;` and some bas
|
|||
</ul>
|
||||
{% endexample %}
|
||||
|
||||
### Horizontal description
|
||||
### Description list alignment
|
||||
|
||||
Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
|
||||
|
||||
{% example html %}
|
||||
<dl class="dl-horizontal">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
|
|
|
|||
|
|
@ -162,6 +162,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -176,6 +176,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -226,6 +226,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
||||
<script src="../../assets/js/vendor/holder.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
<hr>
|
||||
|
||||
<footer>
|
||||
<p>© Company 2015</p>
|
||||
<p>© Company 2016</p>
|
||||
</footer>
|
||||
</div> <!-- /container -->
|
||||
|
||||
|
|
@ -77,6 +77,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../assets/js/vendor/tether.min.js"></script>
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
|
|
|
|||
|
|
@ -4,13 +4,17 @@ title: Browsers and devices
|
|||
group: getting-started
|
||||
---
|
||||
|
||||
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||||
|
||||
{% callout info %}
|
||||
**Bootstrap Reference Documentation**
|
||||
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||||
It is included here to ensure this critical information about compatibility is conveyed.
|
||||
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||||
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||||
{% endcallout %}
|
||||
|
||||
|
||||
|
||||
Bootstrap supports a wide variety of modern browsers and devices, and some older ones. See which exact ones below, as well as detailed information on known quirks and bugs.
|
||||
|
||||
## Contents
|
||||
|
|
@ -20,11 +24,13 @@ Bootstrap supports a wide variety of modern browsers and devices, and some older
|
|||
|
||||
## Supported browsers
|
||||
|
||||
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11 / Microsoft Edge**. More specific support information is provided below.
|
||||
Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 9-11 / Microsoft Edge**.
|
||||
|
||||
Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
|
||||
|
||||
### Mobile devices
|
||||
|
||||
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers.
|
||||
Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
|
|
@ -33,9 +39,9 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
|
|||
<td></td>
|
||||
<th>Chrome</th>
|
||||
<th>Firefox</th>
|
||||
<th>Opera</th>
|
||||
<th>Safari</th>
|
||||
<th>Android Browser & WebView</th>
|
||||
<th>Microsoft Edge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -43,17 +49,25 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
|
|||
<th scope="row">Android</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Android v5.0+ supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">iOS</th>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Windows 10 Mobile</th>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-muted">N/A</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -105,42 +119,34 @@ Unofficially, Bootstrap should look and behave well enough in Chromium and Chrom
|
|||
|
||||
For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{ site.baseurl }}/browser-bugs/).
|
||||
|
||||
## Internet Explorer 9
|
||||
## Internet Explorer 9 & 10
|
||||
|
||||
Internet Explorer 9 is also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported.
|
||||
Internet Explorer 9 & 10 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Feature</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Internet Explorer 9</th>
|
||||
<th scope="col">Internet Explorer 10</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a></th>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code>box-shadow</code></a></th>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform"><code>transform</code></a></th>
|
||||
<td class="text-success">Supported, with <code>-ms</code> prefix</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition"><code>transition</code></a></th>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder"><code>placeholder</code></a></th>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-success">Supported</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a></th>
|
||||
<td class="text-danger">Not supported</td>
|
||||
<td class="text-warning">Partially supported, with <code>-ms</code> prefix<br><a href="http://caniuse.com/#feat=flexbox">See <em>Can I use</em> for details</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -225,7 +231,7 @@ Even in some modern browsers, printing can be quirky.
|
|||
|
||||
In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. [See #12078 for some details.](https://github.com/twbs/bootstrap/issues/12078) Suggested workarounds:
|
||||
|
||||
Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:</p>
|
||||
Also, as of Safari v8.0, fixed-width <code>.container</code>s can cause Safari to use an unusually small font size when printing. See <a href="https://github.com/twbs/bootstrap/issues/14868">#14868</a> for more details. One potential workaround for this is adding the following CSS:
|
||||
|
||||
{% highlight css %}
|
||||
@media print {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
/*!
|
||||
* Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com)
|
||||
* Copyright 2011-2015 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
// Core variables and mixins
|
||||
@import "../bower_components/bootstrap/scss/variables";
|
||||
@import "../bower_components/bootstrap/scss/mixins";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user