updated docs and type styles for blockquotes and a few fixes for type
This commit is contained in:
Mark Otto
parent
0218d079ad
commit
3f512adf95
|
|
@ -6,7 +6,7 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Designed and built with all the love in the world @twitter by @mdo and @fat.
|
||||
* Date: Fri Oct 28 18:37:59 PDT 2011
|
||||
* Date: Sun Oct 30 20:12:53 PDT 2011
|
||||
*/
|
||||
/* Reset.less
|
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
||||
|
|
@ -490,6 +490,12 @@ blockquote small {
|
|||
blockquote small:before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
blockquote.pull-right {
|
||||
float: right;
|
||||
}
|
||||
blockquote.pull-right p, blockquote.pull-right small {
|
||||
text-align: right;
|
||||
}
|
||||
address {
|
||||
display: block;
|
||||
line-height: 18px;
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@ em{font-style:italic;font-weight:inherit;line-height:inherit;}
|
|||
abbr{font-size:90%;text-transform:uppercase;border-bottom:1px dotted #ddd;cursor:help;}
|
||||
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}blockquote p{font-size:16px;font-weight:300;line-height:22.5px;margin-bottom:0;}
|
||||
blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
|
||||
blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
|
||||
address{display:block;line-height:18px;margin-bottom:18px;}
|
||||
code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
|
||||
|
|
|
|||
|
|
@ -164,7 +164,6 @@ body > .navbar-fixed .brand:hover {
|
|||
.marketing h2,
|
||||
.marketing h3 {
|
||||
font-weight: 300;
|
||||
color: #000;
|
||||
}
|
||||
.marketing h2 {
|
||||
margin-bottom: 9px;
|
||||
|
|
@ -175,6 +174,7 @@ body > .navbar-fixed .brand:hover {
|
|||
.marketing .icon {
|
||||
float: left;
|
||||
margin: 7px 10px 0 0;
|
||||
opacity: .8;
|
||||
}
|
||||
.marketing .small-icon {
|
||||
float: left;
|
||||
|
|
@ -300,7 +300,6 @@ pre.prettyprint {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.browser-support {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,8 +92,8 @@
|
|||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Description</th>
|
||||
<th>Usage</th>
|
||||
<th>Optional</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -175,24 +175,72 @@
|
|||
|
||||
<!-- Blockquotes -->
|
||||
<h2>Blockquotes</h2>
|
||||
<table class="bordered-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Usage</th>
|
||||
<th>Optional</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code><blockquote></code>
|
||||
</td>
|
||||
<td>
|
||||
Block-level element for quoting content from another source
|
||||
</td>
|
||||
<td>
|
||||
<p>Add <code>cite</code> attribute for source URL</p>
|
||||
Use <code>.pull-left</code> and <code>.pull-right</code> classes for floated options
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><small></code>
|
||||
</td>
|
||||
<td>
|
||||
Optional element for adding a user-facing citation, typically an author with title of work
|
||||
</td>
|
||||
<td>
|
||||
Place the <code><cite></code> around the title or name of source
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="span5">
|
||||
<p>To include a blockquote, wrap <code><blockquote></code> around <code><p></code> and <code><small></code> tags. Use the <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it.</p>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<small>Someone famous</small>
|
||||
</blockquote>
|
||||
<div class="span4">
|
||||
<p>To include a blockquote, wrap <code><blockquote></code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code><p></code>.</p>
|
||||
<p>Include an optional <code><small></code> element to cite your source and you'll get an em dash <code>&mdash;</code> before it for styling purposes.</p>
|
||||
</div>
|
||||
<div class="span7">
|
||||
<div class="span8">
|
||||
<pre class="prettyprint linenums">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||||
<small>Dr. Julius Hibbert</small>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
|
||||
<small>Someone famous</small>
|
||||
</blockquote>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
|
||||
<h3>Example blockquotes</h3>
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
|
||||
<small>Someone famous</small>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<blockquote class="pull-right">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
|
||||
<small>Someone famous</small>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Lists -->
|
||||
<h2>Lists</h2>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -38,41 +38,6 @@
|
|||
<li><a href="./components.html">Components</a></li>
|
||||
<li><a href="./javascript.html">Javascript plugins</a></li>
|
||||
<li><a href="./less.html">Using LESS</a></li>
|
||||
|
||||
<!--
|
||||
<li class="active"><a href="#overview">Overview</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">Scaffolding</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#grid-system">Grid</a></li>
|
||||
<li><a href="#layouts">Layouts</a></li>
|
||||
<li><a href="#responsive">Resposive</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">CSS</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#typography">Type</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-dropdown="true">Patterns</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#media">Media</a></li>
|
||||
<li><a href="#navigation">Navigation</a></li>
|
||||
<li><a href="#alerts">Alerts</a></li>
|
||||
<li><a href="#popovers">Popovers</a></li>
|
||||
<li><a href="#autocomplete">Autocomplete</a></li>
|
||||
<li><a href="#accordion">Accordion</a></li>
|
||||
<li><a href="#datepicker">Datepicker</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#javascript">Javascript</a></li>
|
||||
<li><a href="#less">Using Less</a></li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -204,40 +169,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<!-- About Bootstrap
|
||||
================================================== -->
|
||||
<section id="about" style="display: none;">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Built for and by nerds</h2>
|
||||
<p>Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.</p>
|
||||
<p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com ›</a></p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h2>Cross-everything</h2>
|
||||
<p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
|
||||
<img class="browser-support" src="assets/img/browsers.png" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
|
||||
<ul>
|
||||
<li>Latest Safari</li>
|
||||
<li>Latest Google Chrome</li>
|
||||
<li>Firefox 4+</li>
|
||||
<li>Internet Explorer 7+</li>
|
||||
<li>Opera 11</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h2>What's included</h2>
|
||||
<p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
|
||||
<ul>
|
||||
<li><span class="label">New in 1.3</span> <a href="./javascript.html">Javascript plugins</a></li>
|
||||
<li>All original .less files</li>
|
||||
<li>Fully <a href="../bootstrap.css">compiled</a> and <a href="../bootstrap.min.css">minified</a> CSS</li>
|
||||
<li>Complete styleguide documentation</li>
|
||||
<li>Three example pages with different layouts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
|
||||
<!-- <h3>Quick-start examples</h3>
|
||||
<p>Need some quick templates? Check out these basic examples we've put together:</p>
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@
|
|||
<div class="row">
|
||||
<div class="span6">
|
||||
<h2>Fixed layout</h2>
|
||||
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div.container></code>.</p>
|
||||
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code><div class="container"></code>.</p>
|
||||
<div class="mini-layout">
|
||||
<div class="mini-layout-body"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -160,6 +160,15 @@ blockquote {
|
|||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
|
||||
// Float right with text-align: right
|
||||
&.pull-right {
|
||||
float: right;
|
||||
p,
|
||||
small {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Addresses
|
||||
|
|
|
|||
Loading…
Reference in New Issue