Solved

Learning Bootstrap Reference Book

Posted on 2014-01-31
3
338 Views
Last Modified: 2014-02-04
Can anyone recommend a really good reference book for learning bootstrap.  I am a very visual person.  Not really interested in a book that doesn't include any graphics or illustrations to demonstrate techniques.
0
Comment
Question by:nsitedesigns
3 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 450 total points
ID: 39824393
I am not good at learning code from a book. I have to play with it.  With bootstrap/foundation/960gs et el, once you dive in and code, it will click.

The first thing is to wrap your head around the grid.  http://getbootstrap.com/css/#grid  and even try and duplicate the samples on your own http://getbootstrap.com/getting-started/#examples

Try and rebuild one of your old sites in using bootstrap's css.  Before you code a page, plan what each object will be in each screen size. In the example below it is 2 stacked rows for an extra small screen and 2 equal columns for anything  larger.  

<div class="row">
  <div class="col-xs-12 col-sm-6">left/top</div>
  <div class="col-xs-12 col-sm-6">right/bottom</div>
  </div>

Open in new window

If you are used to tables, the above replaces
<table>
   <tr>
      <td>left</td>
      <td>right</td>
  </tr>
</table>

Open in new window


Get to know how the grid works first, then go on to the js stuff.  To play, I like to use jsbin.com.  If you click on the top left, "add library" you can choose bootstrap latest and it will load the files.  Now as you code, you can see live what is taking place.

I don't know of any books though.  It does look like it changed again slightly and that will be an issue with any book.  when I first started using v3, they kept changing the code almost every other day and it was throwing me off.  

Maybe I missed it in the past, but I now see where they talk about using .container or .container-fluid to wrap the code in and I don't remember that seeing that in v3 but they did have something similar in v2
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 50 total points
ID: 39830029
I've always had good luck with the O'Reilly books:

http://shop.oreilly.com/product/0636920027867.do

If you're looking for something to just teach you the basics, this is it. If you want something more advanced, Scott's advice is spot on, dive into the online documentation and play around with the different features until you're comfortable with those features, then move on.
0
 

Author Closing Comment

by:nsitedesigns
ID: 39833514
I checked out the O'Reilly book link.  The reviews aren't very good.  While I prefer learning from books, I will try some online training.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now