• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

Learning Bootstrap Reference Book

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
nsitedesigns
Asked:
nsitedesigns
2 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
 
nsitedesignsAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now