mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-25 22:41:20 +02:00
updated docs and type styles for blockquotes and a few fixes for type
This commit is contained in:
Mark Otto
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user