demos :
// links :
Tweetm a d e w i t h l o v e b y B e n o î t W i m a r t h t t p s : / / t w i t t e r . c o m / B e n o i t W i m a r t
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta massa non neque malesuada eu congue risus aliquam. Phasellus eleifend dui eget libero vulputate at bibendum dui sollicitudin. Duis feugiat dapibus semper. Nulla porta, ligula dapibus pellentesque congue, leo lorem viverra ligula, at iaculis eros nisl sed augue. Vestibulum tristique hendrerit odio, nec adipiscing ipsum auctor ac. Duis volutpat odio nec nisl placerat ut convallis ante rhoncus. In lobortis, quam non malesuada viverra, magna nibh iaculis felis, vel cursus dolor nisl quis libero. Sed accumsan lacus quis massa suscipit aliquam. Sed eget est vitae felis venenatis vulputate. Ut pulvinar, ipsum in dignissim adipiscing, ante elit semper magna, fringilla varius mi lacus vitae orci. Quisque mollis, diam sodales adipiscing blandit, quam risus pellentesque urna, non tincidunt leo sapien eu sapien. Praesent imperdiet auctor felis, vel consectetur ipsum sagittis at.
// // Typography // -------------------------------------------------- // Body text // ------------------------- p { margin: 0 0 @baseLineHeight / 2; } .lead { margin-bottom: @baseLineHeight; font-size: @baseFontSize * 1.5; font-weight: 200; line-height: @baseLineHeight * 1.5; } // Emphasis & misc // ------------------------- // Ex: 14px base font * 85% = about 12px small { font-size: 85%; } strong { font-weight: bold; } em { font-style: italic; } cite { font-style: normal; } // Utility classes .muted { color: @grayLight; } a.muted:hover, a.muted:focus { color: darken(@grayLight, 10%); } .text-warning { color: @warningText; } a.text-warning:hover, a.text-warning:focus { color: darken(@warningText, 10%); } .text-error { color: @errorText; } a.text-error:hover, a.text-error:focus { color: darken(@errorText, 10%); } .text-info { color: @infoText; } a.text-info:hover, a.text-info:focus { color: darken(@infoText, 10%); } .text-success { color: @successText; } a.text-success:hover, a.text-success:focus { color: darken(@successText, 10%); } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } // Headings // ------------------------- h1, h2, h3, h4, h5, h6 { margin: (@baseLineHeight / 2) 0; font-family: @headingsFontFamily; font-weight: @headingsFontWeight; line-height: @baseLineHeight; color: @headingsColor; text-rendering: optimizelegibility; // Fix the character spacing for headings small { font-weight: normal; line-height: 1; color: @grayLight; } } h1, h2, h3 { line-height: @baseLineHeight * 2; } h1 { font-size: @baseFontSize * 2.75; } // ~38px h2 { font-size: @baseFontSize * 2.25; } // ~32px h3 { font-size: @baseFontSize * 1.75; } // ~24px h4 { font-size: @baseFontSize * 1.25; } // ~18px h5 { font-size: @baseFontSize; } h6 { font-size: @baseFontSize * 0.85; } // ~12px h1 small { font-size: @baseFontSize * 1.75; } // ~24px h2 small { font-size: @baseFontSize * 1.25; } // ~18px h3 small { font-size: @baseFontSize; } h4 small { font-size: @baseFontSize; } // Page header // ------------------------- .page-header { padding-bottom: (@baseLineHeight / 2) - 1; margin: @baseLineHeight 0 (@baseLineHeight * 1.5); border-bottom: 1px solid @grayLighter; } // Lists // -------------------------------------------------- // Unordered and Ordered lists ul, ol { padding: 0; margin: 0 0 @baseLineHeight / 2 25px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } li { line-height: @baseLineHeight; } // Remove default list styles ul.unstyled, ol.unstyled { margin-left: 0; list-style: none; } // Single-line list items ul.inline, ol.inline { margin-left: 0; list-style: none; > li { display: inline-block; .ie7-inline-block(); padding-left: 5px; padding-right: 5px; } } // Description Lists dl { margin-bottom: @baseLineHeight; } dt, dd { line-height: @baseLineHeight; } dt { font-weight: bold; } dd { margin-left: @baseLineHeight / 2; } // Horizontal layout (like forms) .dl-horizontal { .clearfix(); // Ensure dl clears floats if empty dd elements present dt { float: left; width: @horizontalComponentOffset - 20; clear: left; text-align: right; .text-overflow(); } dd { margin-left: @horizontalComponentOffset; } } // MISC // ---- // Horizontal rules hr { margin: @baseLineHeight 0; border: 0; border-top: 1px solid @hrBorder; border-bottom: 1px solid @white; } // Abbreviations and acronyms abbr[title], // Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 abbr[data-original-title] { cursor: help; border-bottom: 1px dotted @grayLight; } abbr.initialism { font-size: 90%; text-transform: uppercase; } // Blockquotes blockquote { padding: 0 0 0 15px; margin: 0 0 @baseLineHeight; border-left: 5px solid @grayLighter; p { margin-bottom: 0; font-size: @baseFontSize * 1.25; font-weight: 300; line-height: 1.25; } small { display: block; line-height: @baseLineHeight; color: @grayLight; &:before { content: '\2014 \00A0'; } } // Float right with text-align: right &.pull-right { float: right; padding-right: 15px; padding-left: 0; border-right: 5px solid @grayLighter; border-left: 0; p, small { text-align: right; } small { &:before { content: ''; } &:after { content: '\00A0 \2014'; } } } } // Quotes q:before, q:after, blockquote:before, blockquote:after { content: ""; } // Addresses address { display: block; margin-bottom: @baseLineHeight; font-style: normal; line-height: @baseLineHeight; }