68. Where you can learn more about Bootstrap
Tutorial Republic Bootstrap Tutorial (free) Udemy’s WordPress to Bootstrap on Udemy ($)
69. Where you can learn more about Bootstrap
Teamtreehouse has a few Bootstrap courses ($) Lynda.com ($)
70. TL;DR
- Bootstrap is great for prototyping & building fast
- Built-in components & CSS
- Grid system awesome for responsive sites
- Add custom styles to make your Bootstrap site unique
Hinweis der Redaktion
Super basic
Will be doing some live demos during
Also have lots of screenshots in the presentation so you can go back later and recall
Self-taught
Dabbling with code and WordPress for over 2 years, closer to 3
I have the site LTCWM, started about a 1.5 years ago - blog for self-taught coders
What is it really?
Reasons to use it, and not use it even.
How to get started using it.
Some key components or features of Bootstrap.
It is a “front-end framework” or “CSS Framework”
tool box with tools you can use
Gives you code for common things in web development - like nav bars, buttons, sticky side navigation, and more
it’s like a starting point for new projects
No need to reinvent the wheel every time
great for protoyping
You can use it easily with Less or Sass - or plain CSS
It’s easy to build responsive sites - it has a grid system that makes it simple to build for all device sizes
Ton of features.
My site, LTWM, also uses Bootstrap.
Created internally by Twitter as a style guide
Created by Mark Otto and Jacob Thornton in mid 2010
And the rest is history.
About to officially move over to version 4 in the next few months.
Fun fact: Most starred repository on Github
No need to start from scratch every time
free to use
Relatively easy to learn - like riding a bike, once you know it won’t forget it
Has wide range of themes/templates available - like on WordPress, for instance - include photo of google results for “bootstrap themes”
Also easily integrates with Ruby on Rails projects, anything with fullstack JS, etc
Over 16.6 million results!
Because of its popularity, lots of online resources on it
A lot of code (code bloat, or heavy)
So if building a small site, it’s like using a cast when you cut your finger
Lots of sites use it...meaning less unique (sometimes very easy to tell if a site is using it or not)
Relies on extensive classes (like, <div class=__ __ __> </div>
You can hardly see above, but the default navbar code has….53 lines.
I think Bootstrap is good for:
Prototyping (fast, bootstrap out of the box looks decent)
IMO: it’s more dev friendly. Designers want more freedom and flexibility to create ;)
guidelines
not total creative freedom
it’s like a house blueprint---can a paint a diff color, but will still look liek rest in neighborhood
I use it all the time because I know it, and it is a lot faster than building something custom
Going to just being using it with a static site
keep in mind you CAN add it to any site online (RoR app, WP site)
And it will be different there.
But...classes and features will be the same
Also a CDN…
good for code pen
I prefer to download actual files though
This is what’s included when you download it. What it looks like in your text editor.
Show my site sample!!
To make things easier, I am going to use some of the templates they offer.
A bunch of examples here: http://getbootstrap.com/getting-started/#examples
CSS file, jQuery, and JS file.
Firefox: Inspect element. Go into console, go into style editor -- see bootstrap CSS? it works.
Chrome: Inspect element, sources, see the JS and CSS?
I am going to show a few bootstrap tricks and key components - things that I think it most useful
Has some limitations.
Super convenient though once you know it.
Only going to cover the basics of using it. Not enough time to dive into everything.
As you can see - it is a 12 column grid system.
All of the classes above (i.e. col-md-8 and col-md-4) add up to 12.
That is, within their given row. (8+4 = 12)
col classes rely on the row class as a parent - adds special CSS
Note the class prefixes:
xs, md, sm, md, lg
Note the class prefixes:
.col-xs will always be horizontal
.col-sm will collapse (stack) when it goes under the breakpoint (less than 768 px)
Great for RESPONSIVE sites.
Let me show you… use md-6
show breakpoints
then md-8 and md-4 to show how all stacks at 992px
<div class="container">
<div class="row">
<div class="col-sm-8">
<h2>main page</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati expedita sequi ipsum doloremque perferendis, odio, fugiat labore dolorum, incidunt animi porro aliquid nisi, commodi a voluptas quae reiciendis praesentium ea.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati expedita sequi ipsum doloremque perferendis, odio, fugiat labore dolorum, incidunt animi porro aliquid nisi, commodi a voluptas quae reiciendis praesentium ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati expedita sequi ipsum doloremque perferendis, odio, fugiat labore dolorum, incidunt animi porro aliquid nisi, commodi a voluptas quae reiciendis praesentium ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati expedita sequi ipsum doloremque perferendis, odio, fugiat labore dolorum, incidunt animi porro aliquid nisi, commodi a voluptas quae reiciendis praesentium ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati expedita sequi ipsum doloremque perferendis, odio, fugiat labore dolorum, incidunt animi porro aliquid nisi, commodi a voluptas quae reiciendis praesentium ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati expedita sequi ipsum doloremque perferendis, odio, fugiat labore dolorum, incidunt animi porro aliquid nisi, commodi a voluptas quae reiciendis praesentium ea.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati expedita sequi ipsum doloremque perferendis, odio, fugiat labore dolorum, incidunt animi porro aliquid nisi, commodi a voluptas quae reiciendis praesentium ea.</p>
</div>
<div class="col-sm-4">
<h2>sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, accusamus, architecto! Sint asperiores corporis repudiandae, odit repellendus laudantium, cumque, accusantium eveniet provident voluptates porro, numquam cum officiis inventore blanditiis assumenda.</p>
</div>
</div>
</div>
http://getbootstrap.com/css/#images
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Thumbnail just adds like a border to it
**IN NORMAL CIRCUMSTANCES, DO NOT DO THIS**
<img src="https://pbs.twimg.com/profile_images/610125616680173568/tcL_HiSc.jpg" alt="lb" class="">
<img src="https://static.pexels.com/photos/9718/wood-nature-walking-dark.jpg" alt="outside">
Add the img-responsive class...which adds this CSS to the image automatically, thus making it responsive
display: block;
max-width: 100%;
height: auto;
<img src="https://static.pexels.com/photos/9718/wood-nature-walking-dark.jpg" alt="outside" class="img-responsive">
Remember to normally resize images before bringing them to your site b/c large images take awhile to load, and slow down your site
Different navbar options:
default
fixed to top
fixed to bottom
Inverted (black in color)
Again default navbar code you can copy and paste with ease: http://getbootstrap.com/components/#navbar-default
Remember I said code heavy???
But it is responsive.
tweak it…
add my name to brand
change button
various ways you can add buttons…
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
In the navbar, using this way: <button class="btn btn-default" type="submit">Button</button>
primary, success, info, warning, and danger also appear throughout bootstrap code base - relates to the color
other examples: labels
Show with navbar button.
Lemme diverge for a sec…
primary, success, etc. appear in other places…
primary, success, etc. appear in other places…
primary, success, etc. appear in other places…
primary, success, etc. appear in other places…
Again, see how lg, sm xs appear again?
There are trends like this throughout Bootstrap.
Show in the navbar.
These sizing class prefixes appear in multiple places, beyond buttons
Realize there are these patterns in the bootstrap code!!! This makes things easier.
Add a Custom Stylesheet...because we want our code to look original!!!
Create a new file in your Bootstrap CSS folder and call it custom.css.
Now in the <head> portion of your website, load your new custom CSS file after the default bootstrap stylesheet.
See in line 13.
