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:#">[email protected]</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>&lt;section&gt;</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