Twitter bootstrap is HUGE, but I’ll mention some of the things I did and that I enjoyed doing, in no particular order. (So, this isn’t a top 10, just features that I enjoyed)
Let’s admit it, we all need to present data in a table sometimes. Yes, abusing them is bad, but using them properly.. That should be fine.
Bootstrap will style tables as long as you give them class=”table”. Personally, I like giving them a rounded border, and a hover state, so that when user mouses over a row the row changes colour, which is very handy for knowing which part you’re reading. You can do that with also giving your table table-bordered and table-hover class.
<table class="table table-bordered table-hover"> <tr> <th>Student Name</th> <th>UserName</th> <th>Mark</th> </tr> <tr> <td>Errietta Kostala</td> <td>U1250207</td> <td>A++</td> </tr> </table>
And there you go, pretty table!
Not only does bootstrap give readymade buttons in all shapes and sizes, but did you know you can do THIS?
I loved it when I saw that. Doing that is pretty easy:
<div class="btn-group"> <button class='btn'> <i title='Next page' class='icon-forward'></i> </button> <button class="btn btn-dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu "> <li > Page 1 </li> <li> Page 2 </li> </ul> </div>
You can even change
<div class="btn-group dropup">
And get a drop-up menu instead!
Note:: I spent 1 hour wondering why this wasn’t working properly – turns out I forgot the
. Don’t be like me.
A lot of JS libraries can do modals and dialogs, but I’ve found twitter bootstrap to be the most headache-free way. These are things I want to do quickly and efficiently, and move on to more important things. So having it the easy way isn’t so bad.
Creating your modal box requires specific HTML syntax:
<div id="login" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Log In</h3> </div> <div class="modal-body"> <p>Please enter your information to log in to your account.</p> <form action="/login" method="post"> Username: <input type="text" name="username" /><br/> Password: <input type="password" name="password" /><br/> <input type="submit" value="Log in!" /> </form> </div> </div>
That is the easiest way to do it:
<a href="#login" role="button" class="btn" data-toggle="modal">Log In</a>
That’ll toggle your modal!
To sum up, bootstrap is awesome. It makes front-end development a piece of cake and I recommend it to anyone whose had trouble in the past (I know I’ve had) designing a UI to go with their personal project with that awesome backend.
We <3 bootstrap!