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

SuperPlan(8)TaoBaoWinner-UIBootStrap-BaseCSS

12.BootStrapwithVersion2.3.2

12.4BaseCSS-Typography

h1~h6,theyarejustnormalHTMLelements.

<p>,ifwewanttomakeitoutstanding,wecanaddCSS<pclass="lead">

SomeEmphasis

<small>Thislineoftextismeanttobetreatedasfineprint.</small>

<strong>renderedasboldtext</strong>

<em>renderedasitalicizedtext</em>

AlignmentClasses

<pclass="text-left">Leftalignedtext.</p>

<pclass="text-center">Centeralignedtext.</p>

<pclass="text-right">Rightalignedtext.</p>

<pclass="muted">Fuscedapibus,tellusaccursuscommodo,tortormaurisnibh.</p><pclass="text-warning">Etiamportasemmalesuadamagnamolliseuismod.</p><pclass="text-error">Donecullamcorpernullanonmetusauctorfringilla.</p><pclass="text-info">Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatis.</p>

<pclass="text-success">Duismollis,estnoncommodoluctus,nisieratporttitorligula.</p>

Abbreviations

<abbrtitle="HyperTextMarkupLanguage"class="initialism">HTML</abbr>

<address><strong>Twitter,Inc.</strong><br>795FolsomAve,Suite600<br>SanFrancisco,CA94107<br><abbrtitle="Phone">P:</abbr>(123)456-7890</address><address><strong>FullName</strong><br><ahref="mailto:#">[email protected]</a>

</address>

BlockQuote

<blockquote><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.</p></blockquote><blockquoteclass="pull-right"><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.</p><small>Someonefamous<citetitle="SourceTitle"]]>SourceTitle</cite></small>

</blockquote>

Lists

Justuse<ul><li>or<ol><li>,theyarejustHTMLelements.

inline-blockwillmakeitasoneline.

<ul><li>Task1</li><li>Task2</li></ul>

<ol><li>Task1</li><li>Task2</li></ol>

<ulclass="inline"><li>Task1</li><li>Task2</li>

</ul>

Description

<dl><dt>DescriptionTitle</dt><dd>DescriptionDescription,hereitis,mostly,frommyunderstanding,IPONE5isagooddevice.</dd><dt>DescriptionTitle</dt><dd>DescriptionDescription,hereitis,mostly,frommyunderstanding,IPONE5isagooddevice.</dd>

</dl>

class="dl-horizontal"willmakethedescriptionhorizontal.

12.5BaseCSS-Code

CodeforsinglelineofSourceCodes

<p>Forexample,<code>&lt;section&gt;</code>shouldbewrappedasinline.</p>

<p>Forexample,<code>System.out.println("testforfun")</code>shouldbewrappedasinline.</p>

IchangemyprojecttouseintelliJ,Ijustwanttotrysomethingnow.

Formultiplelinesofcodes,Iamgoingtouse<pre>

<pre>

try{

System.out.println("testforfun.");

}catch(Exceptione){

e.printStack();

}

</pre>

12.6BaseCSS-Tables

HereisthenormalTableStructure.

<tableclass="table">

<caption>HereisTableCaption</caption>

<thead>

<tr>

<th>FirstName</th>

<th>LastName</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>

Ionlyaddclass="table"forthenormalsituation,andthead,tbody,th,caption,theretagsareseldomusedbyme.

Sometime,classwouldbe.table-striped,notwouldbe.Butaddtable-striped.

<tableclass="tabletable-striped">

Andbordered

<tableclass="tabletable-stripedtable-bordered">

<tableclass="tabletable-stripedtable-borderedtable-hovertable-condensed">

table-hovertomakeahoverwhenyoumouseoverthetr,table-condensedjustmakeittight.

Optionalrowclasses

Wecanputsuccess,error,warning,infoin<tr>element.

12.7BaseCSS-Forms

<form>

<fieldset>

<legend>Legend</legend>

<label>Labelname</label>

<inputtype="text"placeholder="Typesomething...">

<spanclass="help-block">Exampleblock-levelhelptexthere.</span>

<labelclass="checkbox">

<inputtype="checkbox">Checkmeout

</label>

<buttontype="submit"class="btn">Submit</button>

</fieldset>

</form>

Theimportantpartorrathersaythenewthingsformearethe<fieldset>,<legend><label>placeholder

IdonotseeanybenefitinSearchFormCSS.

<formclass="form-search">

<inputtype="text"class="input-largesearch-query">

<buttontype="submit"class="btn">Search</button>

</form>

Thereareinput-large,input-medium,input-small

InlineForm

<formclass="form-inline">

<inputtype="text"class="input-small"placeholder="Email">

<inputtype="password"class="input-small"placeholder="Password">

<labelclass="checkbox">

<inputtype="checkbox">Rememberme

</label>

<buttontype="submit"class="btn">Signin</button>

</form>

HorizontalForm

<formclass="form-horizontal">

<divclass="control-group">

<labelclass="control-label"for="inputEmail">Email</label>

<divclass="controls">

<inputtype="text"id="inputEmail"placeholder="Email">

</div>

</div>

<divclass="control-group">

<labelclass="control-label"for="inputPassword">Password</label>

<divclass="controls">

<inputtype="password"id="inputPassword"placeholder="Password">

</div>

</div>

<divclass="control-group">

<divclass="controls">

<labelclass="checkbox">

<inputtype="checkbox">Rememberme

</label>

<buttontype="submit"class="btn">Signin</button>

</div>

</div>

</form>

Someelements,justusethemasbefore.

Inputs,Texarea,checkbox,radio

<labelclass="checkbox">

<inputtype="checkbox"value="">

Optiononeisthisandthat—besuretoincludewhyit'sgreat

</label>

<labelclass="radio">

<inputtype="radio"name="optionsRadios"id="optionsRadios1"value="option1"checked>

Optiononeisthisandthat—besuretoincludewhyit'sgreat

</label>

<labelclass="radio">

<inputtype="radio"name="optionsRadios"id="optionsRadios2"value="option2">

Optiontwocanbesomethingelseandselectingitwilldeselectoptionone

</label>

Inlinecheckboxes

<labelclass="checkboxinline">

<inputtype="checkbox"id="inlineCheckbox1"value="option1">1

</label>

<labelclass="checkboxinline">

<inputtype="checkbox"id="inlineCheckbox2"value="option2">2

</label>

<labelclass="checkboxinline">

<inputtype="checkbox"id="inlineCheckbox3"value="option3">3

</label>

somesoon...

13.BackBone

comesoon...

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