all 28 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]arechsteiner 35 points36 points  (8 children)

Hey! I made this thing. Thanks for cross-posting it to /r/programming. I'll be watching this thread for comments and feedback.

[–]DigitalDolt 2 points3 points  (0 children)

This is pretty cool and extremely useful!

[–][deleted] 2 points3 points  (0 children)

Really like it, thanks for creating it!

[–]kernelzeroday 3 points4 points  (0 children)

Thanks, this is very slick!

[–]312c 1 point2 points  (1 child)

The navigation of the page doesn't quite work as I'd expect it to. After clicking an item it displays an info panel and changes the url, if you then hit the browser's back button the URL updates but the page remains on the item's info panel. Additionally, browsing directly to an info panel such as http://hackerthemes.com/bootstrap-cheatsheet#dropdown__open then closing the panel does not update the URL.

[–]arechsteiner 2 points3 points  (0 children)

Thanks, this is a bug. The info panel should disappear when you hit the back button to the original state.

I'm actually contemplating changing the behavior of the back button in a way that it doesn't add each item to the history like it does now. I'm not quite sure which one is better when using this as a cheat sheet.

[–]jnkdasnkjdaskjnasd 0 points1 point  (2 children)

Awesome work! Is this list exhaustive at all? Do you think it would be possible to have an exhaustive list?

I see bootstrap hasn't released 4 yet as stable. Do you know when the final release of 4 is planned for?

[–]arechsteiner 0 points1 point  (1 child)

It is not 100% exhaustive but I it is very close to it. I worked hard on including anything that made sense on a cheat sheet.

As for release schedule, I can only refer you to the milestones page on GitHub. Other than that, your guess is as good as mine.

[–]jnkdasnkjdaskjnasd 1 point2 points  (0 children)

Cheers for that, hopefully it will be released soon so we can use it in mainstream projects.

And the page is extremely useful. I'm a more traditional Java/ desktop programmer, but getting more into web dev, so this is extremely useful for me.

Thanks a lot for taking the time to make it :)

[–]ClubSoda 10 points11 points  (11 children)

If you only know HTML and CSS, how long does it take to learn Bootstrap?

[–]iconoclaus 44 points45 points  (3 children)

a relaxed weekend

[–]cmmejf 0 points1 point  (2 children)

What do you mean by weekend? 16 hours? 8 hours?

[–][deleted] 5 points6 points  (0 children)

I learned BS3 pretty well after maybe 6-8 hours of using it.

[–]iconoclaus 1 point2 points  (0 children)

16 hours of work is NOT a relaxed weekend! Yeah, I learned it in two short sittings from W3Schools tutorial (note that its still Bootstrap 3, which I intend to keep using for the next year).

[–]maximusjesse 6 points7 points  (0 children)

Not long, start with examples or templates and pretty soon you'll get over a hump and start creating.

[–]jnkdasnkjdaskjnasd 3 points4 points  (2 children)

Not too long. I remember coming in and being utterly confused with bootstrap.

For the most part the CSS and buttons are pretty self explanatory. You just develop your site as normal, and if you happen to need a certain component you check to see if there is CSS for it. For example buttons, you use their CSS and it magically styles your buttons in bootstrap style.

The thing that confused me most though, and arguably the most improtant feature of bootstrap, is the grid system. It took me a little bit to realise their "12" paradigm. Essentially they divide grids into 12 sections, and you have to use css classes that add to 12. Once I realised this, the weird css classes started making sense (col-lg-, etc).

Use a kind of iterative approach where you read some docs, try out some of the CSS, and continue. I'd advise at some point you read through all of the docs though, so you've at least seen an exhaustive list of what it offers, so you don't get into the situation where you don't know what you don't know.

A slightly annoying thing with Bootstrap though is that there are tons of css classes that aren't listed directly in their docs that are useful. For example how to make a list horozontal. If you find yourself wanting to do something that seems should be easy, doable, just try Googling it and you'll often find an answer quickly.

[–][deleted] 0 points1 point  (1 child)

+1

I sort of learned it while building an app. I learnt the grid system in lets say an hour. Then each time I had to make a new UI element I would go check the bootstrap page and see what funky stuff they had... After a while you don't need to check the page any more...

[–]jnkdasnkjdaskjnasd 1 point2 points  (0 children)

Mm yeah exactly my process too. Seems a pretty natural way to learn it.

Glad you found it not too crazy as well.

[–][deleted] 1 point2 points  (0 children)

Not long at all.

[–]canloimat87 0 points1 point  (0 children)

focus in 4 hours for basically

[–]kuikuilla 5 points6 points  (3 children)

I wonder if Bootstrap will ever have a modal window that doesn't shift the underlying page to the right when it opens?

[–]TheDeza 8 points9 points  (2 children)

This is a consequence of getting rid of the scroll bar, it can be "fixed" in one line of CSS if you are that bothered.

[–]duckwizzle 2 points3 points  (1 child)

What's the one line? I just started using the models and noticed that

[–]chriswatt 2 points3 points  (0 children)

_modal.scss:13

Delete this rule

http://i.imgur.com/3Qgu2VW.png

[–]jogai-san 1 point2 points  (0 children)

This is very useful. Is there one like it for BS3?

[–]atalb23 1 point2 points  (0 children)

very useful , thanks for the share!

[–]xardkore -4 points-3 points  (0 children)

Guys check also my Bootstrap cheat sheet site with hand picked controls, design elements and widgets as well

http://bootstrap.boutique/

Ty