SuperPlan(10)TaoBao Winner - UI Base CSS Buttons and Icons

SuperPlan(10)TaoBao Winner - UI Base CSS Buttons and Icons

12. BootStrap with Version 2.3.2
12.8 Base CSS - Buttons
Begin to love the buttons. Haha. Some simple button class.
Default Button Styles
btn
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger
btn btn-inverse

<button type="button" class="btn">Default</button>
<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-info">Info</button>

Button Sizes
We can decide the size by using btn-large, btw-small, btw-mini.

<p>
    <button class="btn btn-large btn-primary" type="button">Large button</button>
    <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
    <button class="btn btn-primary" type="button">Default button</button>
    <button class="btn" type="button">Default button</button>
</p>
<p>
    <button class="btn btn-small btn-primary" type="button">Small button</button>
    <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
    <button class="btn btn-mini btn-primary" type="button">Mini button</button>
    <button class="btn btn-mini" type="button">Mini button</button>
</p>

btn-block also available, but I think I seldom use that.

Disabled State of Button

<p>
    <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
    <a href="#" class="btn btn-large disabled">Link</a>
</p>

One class, multiple Tags
That means class:btn can be used by many other tags.

<p>
    <a class="btn" href="">Link</a>
    <button class="btn" type="submit">Button</button>
    <input class="btn" type="button" value="Input">
    <input class="btn" type="submit" value="Submit">
</p>

12.9 Images
<p>
    <img src="..." class="img-rounded">
    <img src="..." class="img-circle">
    <img src="..." class="img-polaroid">
</p>

We can control the shape of the IMG element.

12.10 Icons by Glyphicons
Icons provided by Glyphicons
http://glyphicons.com/

Icon Examples
Button Group in a button toolbar
<div class="btn-toolbar">
    <div class="btn-group">
        <a class="btn" href="#"><i class="icon-align-left"></i></a>
        <a class="btn" href="#"><i class="icon-align-center"></i></a>
        <a class="btn" href="#"><i class="icon-align-right"></i></a>
        <a class="btn" href="#"><i class="icon-align-justify"></i></a>
    </div>
</div>

Dropdown in a Button Group
<div class="btn-group">
    <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
</div>

Navigation
I do not like this style.

Form Fields
<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputIcon">Email address</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="icon-envelope"></i></span>
                <input class="span2" id="inputIcon" type="text">
            </div>
        </div>
    </div>
</form>

When I use this, check the icon options here
http://twitter.github.io/bootstrap/base-css.html?#icons

I only got the Scaffold, Base CSS. There should be Components, JavaScript.

13. BackBone
come soon...


References:
http://twitter.github.io/bootstrap/base-css.html?#buttons

Previous
http://sillycat.iteye.com/blog/1873754
http://sillycat.iteye.com/blog/1873144
http://sillycat.iteye.com/blog/1874426