rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

add image styles, for now to scaffolding (soon to own file)

Browse Source
This commit is contained in:
Mark Otto 2012-07-27 00:06:43 -07:00
parent 6474190746
commit 1e9b450619
5 changed files with 100 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/assets/css/bootstrap.css vendored
View File

@ -175,6 +175,28 @@ a:hover {
text-decoration: underline;
}
.img-rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.img-circle {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
.row {
margin-left: -20px;
*zoom: 1;

6
docs/assets/css/docs.css
View File

@ -632,6 +632,12 @@ form.bs-docs-example {
line-height: 24px;
}
/* Images */
.bs-docs-example-images img {
margin: 10px;
display: inline-block;
}
/* Tooltips */
.bs-docs-tooltip-examples {
text-align: center;

25
docs/base-css.html
View File

@ -92,6 +92,7 @@
<li><a href="#tables">Tables <i class="icon-chevron-right"></i></a></li>
<li><a href="#forms">Forms <i class="icon-chevron-right"></i></a></li>
<li><a href="#buttons">Buttons <i class="icon-chevron-right"></i></a></li>
<li><a href="#images">Images <i class="icon-chevron-right"></i></a></li>
<li><a href="#icons">Icons by Glyphicons <i class="icon-chevron-right"></i></a></li>
</ul>
</div>
@ -1517,6 +1518,30 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<!-- Images
================================================== -->
<section id="images">
<div class="page-header">
<h1>Images</h1>
</div>
<p>Simple classes to easily style images in any project.</p>
<div class="bs-docs-example bs-docs-example-images">
<img src="http://placehold.it/140x140" class="img-rounded">
<img src="http://placehold.it/140x140" class="img-circle">
<img src="http://placehold.it/140x140" class="img-polaroid">
</div>
<pre class="prettyprint linenums">
&lt;img src="..." class="img-rounded"&gt;
&lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt;
</pre>
</section>
<!-- Icons
================================================== -->
<section id="icons">

25
docs/templates/pages/base-css.mustache vendored
View File

@ -21,6 +21,7 @@
<li><a href="#tables">{{_i}}Tables{{/i}} <i class="icon-chevron-right"></i></a></li>
<li><a href="#forms">{{_i}}Forms{{/i}} <i class="icon-chevron-right"></i></a></li>
<li><a href="#buttons">{{_i}}Buttons{{/i}} <i class="icon-chevron-right"></i></a></li>
<li><a href="#images">{{_i}}Images{{/i}} <i class="icon-chevron-right"></i></a></li>
<li><a href="#icons">{{_i}}Icons by Glyphicons{{/i}} <i class="icon-chevron-right"></i></a></li>
</ul>
</div>
@ -1454,6 +1455,30 @@
<!-- Images
================================================== -->
<section id="images">
<div class="page-header">
<h1>{{_i}}Images{{/i}}</h1>
</div>
<p>Simple classes to easily style images in any project.</p>
<div class="bs-docs-example bs-docs-example-images">
<img src="http://placehold.it/140x140" class="img-rounded">
<img src="http://placehold.it/140x140" class="img-circle">
<img src="http://placehold.it/140x140" class="img-polaroid">
</div>
<pre class="prettyprint linenums">
&lt;img src="..." class="img-rounded"&gt;
&lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt;
</pre>
</section>
<!-- Icons
================================================== -->
<section id="icons">

22
less/scaffolding.less
View File

@ -27,3 +27,25 @@ a:hover {
color: @linkColorHover;
text-decoration: underline;
}
// Images
// -------------------------
.img-rounded {
.border-radius(6px);
}
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.img-circle {
.border-radius(500px);
}