Solved

Learning Bootstrap Reference Book

Posted on 2014-01-31
3
355 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 53

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 33

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

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…

717 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