root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

This commit is contained in:
Mark Otto 2016-11-26 16:49:07 -08:00
parent 36bf06f520 dc52029bea
commit f7f5547dab
3 changed files with 42 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/assets/scss/_component-examples.scss
View File

@ -318,6 +318,16 @@
} }
} }
.bd-example-border-utils {
[class^="border-"] {
display: inline-block;
width: 6rem;
height: 6rem;
margin: .25rem;
background-color: #f5f5f5;
border: 1px solid;
}
}
// //
// Code snippets // Code snippets

28
docs/utilities/borders.md
View File

@ -6,17 +6,32 @@ group: utilities
Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element. Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element.
## Border
Add classes to an element to remove all borders or some borders.
<div class="bd-example-border-utils">
{% example html %}
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
{% endexample %}
</div>
## Border-radius ## Border-radius
Add classes to an element to easily round its corners. Add classes to an element to easily round its corners.
<div class="bd-example bd-example-images"> <div class="bd-example bd-example-images">
<img data-src="holder.js/100x100" class="rounded" alt="Example rounded image"> <img data-src="holder.js/75x75" class="rounded" alt="Example rounded image">
<img data-src="holder.js/100x100" class="rounded-top" alt="Example top rounded image"> <img data-src="holder.js/75x75" class="rounded-top" alt="Example top rounded image">
<img data-src="holder.js/100x100" class="rounded-right" alt="Example right rounded image"> <img data-src="holder.js/75x75" class="rounded-right" alt="Example right rounded image">
<img data-src="holder.js/100x100" class="rounded-bottom" alt="Example bottom rounded image"> <img data-src="holder.js/75x75" class="rounded-bottom" alt="Example bottom rounded image">
<img data-src="holder.js/100x100" class="rounded-left" alt="Example left rounded image"> <img data-src="holder.js/75x75" class="rounded-left" alt="Example left rounded image">
<img data-src="holder.js/100x100" class="rounded-circle" alt="Completely round image"> <img data-src="holder.js/75x75" class="rounded-circle" alt="Completely round image">
<img data-src="holder.js/75x75" class="rounded-0" alt="Example non-rounded image (overrides rounding applied elsewhere)">
</div> </div>
{% highlight html %} {% highlight html %}
@ -26,4 +41,5 @@ Add classes to an element to easily round its corners.
<img src="..." alt="..." class="rounded-bottom"> <img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left"> <img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle"> <img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">
{% endhighlight %} {% endhighlight %}

13
scss/utilities/_borders.scss
View File

@ -1,9 +1,12 @@
// //
// Border-width // Border
// //
// TBD...? .border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
// //
// Border-radius // Border-radius
@ -28,3 +31,7 @@
.rounded-circle { .rounded-circle {
border-radius: 50%; border-radius: 50%;
} }
.rounded-0 {
border-radius: 0;
}