SuperPlan(8)TaoBao Winner - UI BootStrap - Base CSS

SuperPlan(8)TaoBao Winner - UI BootStrap - Base CSS

12. BootStrap with Version 2.3.2
12.4 Base CSS - Typography
h1 ~ h6, they are just normal HTML elements.
<p>, if we want to make it outstanding, we can add CSS <p class="lead">

Some Emphasis
<small>This line of text is meant to be treated as fine print.</small>
<strong>rendered as bold text</strong>
<em>rendered as italicized text</em>

Alignment Classes
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="muted">Fuscedapibus, tellusaccursuscommodo, tortormaurisnibh.</p><p class="text-warning">Etiamportasemmalesuadamagnamolliseuismod.</p><p class="text-error">Donecullamcorpernulla non metusauctorfringilla.</p><p class="text-info">Aeneaneuleoquam. Pellentesqueornaresemlaciniaquamvenenatis.</p>

<p class="text-success">Duismollis, est non commodoluctus, nisieratporttitorligula.</p>

Abbreviations
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> SanFrancisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890</address><address> <strong>Full Name</strong><br> <ahref="mailto:#">first.last@example.com</a>

</address>

BlockQuote
<blockquote> <p>Loremipsumdolor sit amet, consecteturadipiscingelit. Integer posuereerat a ante.</p></blockquote><blockquote class="pull-right"> <p>Loremipsumdolor sit amet, consecteturadipiscingelit. Integer posuereerat a ante.</p> <small>Someone famous <citetitle="Source Title"]]>Source Title</cite></small>

</blockquote>

Lists
Just use <ul><li> or <ol><li>, they are just HTML elements.

inline-block will make it as one line.
<ul><li>Task 1</li><li>Task 2</li></ul>
<ol><li>Task 1</li><li>Task 2</li></ol>
<ul class="inline"><li>Task 1</li><li>Task 2</li>

</ul>

Description
<dl> <dt>Description Title</dt> <dd>Description Description, here it is, mostly, from my understanding, IPONE5 is a good device.</dd> <dt>Description Title</dt> <dd>Description Description, here it is, mostly, from my understanding, IPONE5 is a good device.</dd>

</dl>

class="dl-horizontal" will make the description horizontal.

12.5 Base CSS - Code
Code for single line of Source Codes
<p>For example, <code><section></code> should be wrapped as inline.</p>

<p>For example, <code>System.out.println("test for fun")</code> should be wrapped as inline.</p>

I change my project to use intelliJ, I just want to try something now.

For multiple lines of codes, I am going to use <pre>
<pre>
try{
System.out.println("test for fun.");
}catch(Exception e){
e.printStack();
}
</pre>

12.6 Base CSS - Tables
Here is the normal Table Structure.
<table class="table">
<caption>Here is Table Caption</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hua</td>
<td>Luo</td>
</tr>
<tr>
<td>Carl</td>
<td>Luo</td>
</tr>
<tr>
<td>Sillycat</td>
<td>Luo</td>
</tr>
</tbody>
</table>
</body>

I only add class="table" for the normal situation, and thead, tbody, th, caption, there tags are seldom used by me.

Sometime, class would be .table-striped, not would be. But add table-striped.

<table class="table table-striped">

And bordered
<table class="table table-striped table-bordered">

<table class="table table-striped table-bordered table-hover table-condensed">
table-hover to make a hover when you mouse over the tr, table-condensed just make it tight.

Optional row classes
We can put success, error, warning, info in <tr> element.

12.7 Base CSS - Forms
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something...">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>

The important part or rather say the new things for me are the <fieldset>, <legend> <label> placeholder

I do not see any benefit in Search Form CSS.
<form class="form-search">
<input type="text" class="input-large search-query">
<button type="submit" class="btn">Search</button>
</form>

There are input-large, input-medium, input-small

Inline Form
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>

Horizontal Form
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>

Some elements, just use them as before.
Inputs, Texarea, checkbox, radio

<label class="checkbox">
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>

Inline checkboxes
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

some soon...

13. BackBone
come soon...


References:
http://twitter.github.io/bootstrap/base-css.html#typography
http://twitter.github.io/bootstrap/base-css.html#tables
http://twitter.github.io/bootstrap/base-css.html#forms