0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00

updated list html, tweaks to patterns

This commit is contained in:
Mark Otto 2011-08-21 20:03:12 -07:00
parent 2aeed35f24
commit 80e0e9c413
2 changed files with 45 additions and 56 deletions

View File

@ -359,64 +359,54 @@
<div class="span4 columns"> <div class="span4 columns">
<h4>Unordered <code>&lt;ul&gt;</code></h4> <h4>Unordered <code>&lt;ul&gt;</code></h4>
<ul> <ul>
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit
<ul> <ul>
<li>George Castanza</li> <li>Phasellus iaculis neque</li>
<li>Jerry Seinfeld</li> <li>Purus sodales ultricies</li>
<li>Cosmo Kramer</li> <li>Vestibulum laoreet porttitor sem</li>
<li>Elaine Bennis</li> <li>Ac tristique libero volutpat at</li>
<li>Newman</li>
</ul> </ul>
</li> </li>
<li>John Jacob</li> <li>Faucibus porta lacus fringilla vel</li>
<li>Paul Pierce</li> <li>Aenean sit amet erat nunc</li>
<li>Kevin Garnett</li> <li>Eget porttitor lorem</li>
</ul> </ul>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
<h4>Unstyled <code>&lt;ul.unstyled&gt;</code></h4> <h4>Unstyled <code>&lt;ul.unstyled&gt;</code></h4>
<ul class="unstyled"> <ul class="unstyled">
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit
<ul> <ul>
<li>George Castanza</li> <li>Phasellus iaculis neque</li>
<li>Jerry Seinfeld</li> <li>Purus sodales ultricies</li>
<li>Cosmo Kramer</li> <li>Vestibulum laoreet porttitor sem</li>
<li>Elaine Bennis</li> <li>Ac tristique libero volutpat at</li>
<li>Newman</li>
</ul> </ul>
</li> </li>
<li>John Jacob</li> <li>Faucibus porta lacus fringilla vel</li>
<li>Paul Pierce</li> <li>Aenean sit amet erat nunc</li>
<li>Kevin Garnett</li> <li>Eget porttitor lorem</li>
</ul> </ul>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
<h4>Ordered <code>&lt;ol&gt;</code></h4> <h4>Ordered <code>&lt;ol&gt;</code></h4>
<ol> <ol>
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit</li>
<ol> <li>Faucibus porta lacus fringilla vel</li>
<li>George Castanza</li> <li>Aenean sit amet erat nunc</li>
<li>Jerry Seinfeld</li> <li>Eget porttitor lorem</li>
<li>Cosmo Kramer</li>
<li>Elaine Bennis</li>
<li>Newman</li>
</ol>
</li>
<li>John Jacob</li>
<li>Paul Pierce</li>
<li>Kevin Garnett</li>
</ol> </ol>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
@ -1172,8 +1162,6 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div> </div>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
</section> </section>

View File

@ -261,7 +261,7 @@ div.topbar {
// PAGE HEADERS // PAGE HEADERS
// ------------ // ------------
div.page-header { .page-header {
margin-bottom: @baseline - 1; margin-bottom: @baseline - 1;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
.box-shadow(0 1px 0 rgba(255,255,255,.5)); .box-shadow(0 1px 0 rgba(255,255,255,.5));
@ -275,8 +275,7 @@ div.page-header {
// ------------ // ------------
// One-liner alert bars // One-liner alert bars
div.alert-message { .alert-message {
// #gradient > .vertical(rgba(0,0,0,.01), rgba(0,0,0,0.15));
background-color: @grayLighter; background-color: @grayLighter;
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 8px 15px; padding: 8px 15px;
@ -323,7 +322,7 @@ div.alert-message {
} }
// Block-level Alerts // Block-level Alerts
div.block-message { .block-message {
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 14px; padding: 14px;
color: @grayDark; color: @grayDark;
@ -365,8 +364,8 @@ div.block-message {
// ---------- // ----------
// Common tab and pill styles // Common tab and pill styles
ul.tabs, .tabs,
ul.pills { .pills {
margin: 0 0 20px; margin: 0 0 20px;
padding: 0; padding: 0;
.clearfix(); .clearfix();
@ -380,7 +379,7 @@ ul.pills {
} }
// Basic Tabs // Basic Tabs
ul.tabs { .tabs {
width: 100%; width: 100%;
border-bottom: 1px solid @grayLight; border-bottom: 1px solid @grayLight;
li { li {
@ -406,7 +405,7 @@ ul.tabs {
} }
// Basic pill nav // Basic pill nav
ul.pills { .pills {
li { li {
a { a {
margin: 5px 3px 5px 0; margin: 5px 3px 5px 0;
@ -433,12 +432,13 @@ ul.pills {
// PAGINATION // PAGINATION
// ---------- // ----------
div.pagination { .pagination {
height: @baseline * 2; height: @baseline * 2;
margin: @baseline 0; margin: @baseline 0;
ul { ul {
float: left; float: left;
margin: 0; margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15);
.border-radius(3px); .border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.075); .box-shadow(0 1px 2px rgba(0,0,0,.075);
@ -448,6 +448,7 @@ div.pagination {
float: left; float: left;
padding: 0 14px; padding: 0 14px;
line-height: (@baseline * 2) - 2; line-height: (@baseline * 2) - 2;
border-right: 1px solid #ddd;
border-right: 1px solid rgba(0,0,0,.15); border-right: 1px solid rgba(0,0,0,.15);
text-decoration: none; text-decoration: none;
} }
@ -487,7 +488,7 @@ div.pagination {
// MODALS // MODALS
// ------ // ------
div.modal-backdrop { .modal-backdrop {
background-color: rgba(0,0,0,.5); background-color: rgba(0,0,0,.5);
position: fixed; position: fixed;
top: 0; top: 0;
@ -496,7 +497,7 @@ div.modal-backdrop {
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
} }
div.modal { .modal {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -579,7 +580,7 @@ div.modal {
// TWIPSY // TWIPSY
// ------ // ------
div.twipsy { .twipsy {
display: block; display: block;
position: absolute; position: absolute;
visibility: visible; visibility: visible;