Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
webtools:   Followers: 10 ; Following: 2

Explore webtools's photo albums:
Photos from posts (2)
Photos from posts (2)

Bootstrap Framework



What is Bootstrap?

Bootstrap is a ".css" file plus an optional ".js" file that improves the layout of your html page.

Bootstrap download and bootstrap documentation: http://twitter.github.com/bootstrap/

This blog (Postbit) is created with Bootstrap layout.

Files included in bootstrap.zip:

bootstrap/css/bootstrap-responsive.css
bootstrap/css/bootstrap-responsive.min.css (minified css)
bootstrap/css/bootstrap.css
bootstrap/css/bootstrap.min.css (minified css)
bootstrap/img/glyphicons-halflings-white.png
bootstrap/img/glyphicons-halflings.png
bootstrap/js/bootstrap.js
bootstrap/js/bootstrap.min.js (minified javascript)
 

Bootstrap secrets:

There is an optional file in bootstrap (docs.css) that is not part of bootstrap's distribution and contains some precious design gems.

1) The faded out <hr>:

Syntax: <hr class="soften">
Sample:

This thin hr line is similar to the one found in the Safari default error page, that is ErrorPageDividerLine.png, done without CSS, it's an image line as a png file (686 x 1 pixels):

 

 

CSS code to create this <hr> line (faded horizontal rule):

/* Faded out hr */
hr.soften {
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  border: 0;
}
2) Footer css class

Syntax:
<footer class="footer">
  <div class="container">
    <p>Footer info, copyright, nav links, etc..</p>
  </div>
</footer>
 
Result - footer with separator line, light gray background and gray text:
 

 

Bootstrap's docs.css can be downloaded from Twitter Bootstrap git repository:
https://github.com/twitter/bootstrap/tree/master/docs/assets/css


If you upgrade from Bootstrap 2 to Bootstrap 3, some changes need to be made:

Bootstrap 2 syntax: <input type=text class="input-xlarge">

Bootstrap 3 syntax: <input type=text class="input-lg"> (large height beautiful input button)

Post by webtools (2012-11-01 11:38)

From: Jared
Thankyou - very helpful 2013-08-06 22:15

Post your comment:

Name: Email: Site:




| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2018 - postbit.com