CSS Framework Twitter Bootstrap

Masih sharing tentang css framework nih, setelah kemarin saya memberikan Foundation CSS Framework . Kali ini saya akan memberikan Twitter Bootstrap, yah sesuai namanya ini adalah framework buatan twitter . Dengan menggunakan framework ini kita dapat membuat website dengan tampilan seperti twitter, misalnya button berwarna biru khas twitter, header navigation, dan banyak lagi .

File Structure

Ini adalah structure file yang ada pada twitter bootstrap


 bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png
List Component


  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

Basic Html Template
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body> 
HTML Template

  • Starter template

    A barebones HTML document with all the Bootstrap CSS and JavaScript included.
  • Basic marketing site

    Featuring a hero unit for a primary message and three supporting elements.
  • Fluid layout

    Uses our new responsive, fluid grid system to create a seamless liquid layout.
  • Narrow marketing

    Slim, lightweight marketing template for small projects or teams.
  • Sign in

    Barebones sign in form with custom, larger form controls and a flexible layout.
  • Sticky footer

    Pin a fixed-height footer to the bottom of the user's viewport.





 
Share this article :

Posting Komentar

 
Support Me : Facebook | Twitter | YodzMagz
Copyright © 2013. . - All Rights Reserved
Template by MasKolis
Proudly powered by Blogger