Bootstrap- Unit 7
Overall Bootstrap provide 3 very helpful things:
- Base CSS styling that looks professional - Several useful components like buttons and navigation bars - A grid system that lets us easily create responsive page layouts
Bootstrap Components: Buttons-
- Button colors - Button sizes - Active/Disabled buttons - Block-Level buttons
.container
- Fixed width - Width updates occasionally as window is resized - Nice margins on the left and right
.container-fluid
- Full width - Width constantly updated to be the full width of the window
Text Styling Classes:
- text-left - text-center - text-right - text-muted - text success
Bootstrap provides premade CSS classes that style any <a> tag or <button> tag as professional looking buttons.
.btn .btn-default .btn-primary .btn-lg .btn-s
What is the difference between .container and .container-fluid?
.container-fluid constantly updates to fit the width of the window, while .container will update occasionally as the window is resized.
Dropdown classes:
.dropdown .dropdown-menu .dropdown-toggle .caret
Nav bar classes:
.navbar .navbar-default .navbar-inverse .navbar-nav .navbar-right .navbar-left
Bootstrap has several CSS classes that make tables look very nice:
.table .table-striped .table-bordered .table-hovered .table-responsive
We might want the phone layout to be this instead (so its not too packed):
1 2 3 4 5 6 7 8 9 10 11 12 Banner (12 columns) Left Panel (12 columns) Right Panel (12 columns) Aside Site content (2 columns) (10 columns)
What is the correct way to add a default-styled button to an <a> tag?
<a href="#" class="btn btn-default">Button</a>
Button example:
<a href="#" class="btn"> Learn More </a>
Bootstrap Thumbnail Skeleton: (all you do is add .thumbnail class to the tag)
<a href="..." class="thumbnail"> <img src="..." alt="..."> </a>
Which of the following correctly creates a thumbnail of the CodeHS logo that links to https://codehs.com?
<a href="https://codehs.com/" class="thumbnail"> <img src="codehs_logo.jpg" alt="CodeHS Logo"> </a>
Which of the following creates a responsive jumbotron on your website?
<div class="container"> <div class="jumbotron"> <h1>This text will be in a jumbotron</h1> </div> </div>
Page header examples:
<div class="page-header"> <h1> Page Header <small> Subtext for header </small></h1> </div>
Which of the following will correctly display a page header with subtext?
<div class="page-header"> <h1> This is the header <small> This is the subtext </small> </h1> </div>
Column Overflow Example:
<div class="row"> <div class="col-xs-12 bg-primary"> 12 </div> <div class="col-xs-5 bg-success"> 5 </div> <div class ="col-xs-5 bg-info"> 5 </div> <div class="col-xs-4 bg-danger"> 4 </div> </div>
We can add multiple-column classes to the same div to specify how it should behave on different screen sizes.
<div class="row"> <div class="col-xs-12" "col-md-8"> 1 </div> <div class="col-xs-6" "col-md-4"> 2 </div> </div>
Which of the following creates a table that is responsive to screens of different sizes?
<div class="table-responsive"> <table class="table"> ... </table> </div>
Glyphicon Example:
<span class="glyphicon glyphicon-print"></span>
Zebra striped table:
<table class="table table-striped"> ... </table>
To add additional CSS styles, make sure your CSS file comes ____________ the Bootstrap CSS file!
AFTER
a framework for developing beautiful, responsive, mobile-friendly websites.
Bootstrap
are prepackaged user-interface elements, such as buttons, icons, and tables, that we can use on our pages.
Bootstrap Components
are a great way to pack more options into a Navbar while keeping the interface simple.
Dropdowns
True or False: If you use Bootstrap's framework for your site, you can't add your own CSS rules.
False
True or False: It is impossible to have more than one jumbotron on a given page.
False
True or False: It is plagiarism to copy code from Bootstrap examples to your own website.
False
True or False: Only people who are new to Bootstrap need to look at documentation.
False
Bootstrap is the most popular font-end web development framework. It was originally created by developers at twitter.
Millions of websites use Bootstrap, including Twitter, NASA and CodeHS!
<div class="row"> <div class="col-sm-6">1</div> <div class="col-sm-6">2</div> </div> What is the smallest device that will display these columns side by side?
Tablet
<div class="row"> <div class="col-xs-6"> 1 </div> <div class="col-xs-6"> 2 </div> </div>
The columns will be side by side on extra small devices and above.
<div class="row"> <div class="col-lg-6"> 1 </div> <div class="col-lg-6"> 2 </div> </div>
The columns will be side by side on large devices, and stacked on anything smaller.
<div class="row"> <div class="col-md-6"> 1 </div> <div class="col-md-6"> 2 </div> </div>
The columns will be side by side on medium devices and above, and stacked on anything smaller.
<div class="row"> <div class="col-sm-6"> 1 </div> <div class="col-sm-6"> 2 </div> </div>
The columns will be side by side on medium devices and above, and stacked on anything smaller.
are great for styling linked images (images that link to other pages).
Tumbnails
Bootstrap provides several pre-made HTML components and CSS classes that you can use to make your pages look clean and professional on...
al devices!
A Jumbotron is...
automatically responsive.
A Jumbotron is great for...
calling extra attention to something on a page.
To create a Jumbotron you need to...
create a div with the class jumbotron and everything inside that div will be inside of the jumbotron!
Using the container-fluid class...
makes a full width container, rather than a fixed width responsive container
Glyphicons are made by...
making a span and setting the span's class to the proper Glyphicon. - There should be no text inside of the span
Write your website code once and have the same code work on all devices. Rather than...
mobile compatibility being an add-on, it works right off the bat.
Bootstrap gives us access to really helpful CSS classes that help with layout and styling. We also have access to...
prepackaged components like buttons and navigation bars! (Great starting place!)
Which page should the following nav-tabs be added to? <ul class="nav nav-tabs"> <li><a href="home.html">Home</a></li> <li class="active"><a href="profile.html">Profile</a></li> <li> <a href="messages.html">Messages</a></li> </ul>
profile.html
The .page-header class helps appropriately...
space out sections of the page by adding a horizontal line and some padding.
Bootstrap provides several extra (very helpful) features on top of...
the base level HTML/CSS features we've been using.
Bootstrap is like a _____________ for web developers.
toolbox
No matter the device, no matter the screen width, always 12 columns. (There can be as many ROWS as we want)
The Grid System
<div class="table-responsive"> <table class="table"> ... </table> </div>
Adds a horizontal scroll bar for tables on xs screen (<768px)
True or False: Using Bootstrap documentation is a critical part of of using Bootstrap.
True
If more than 12 columns are placed within a signle row...
each group of extra columns will wrap onto a new line.
Bootstrap is just one of many ____________, but it is a very popular one.
frameworks
Bootstrap is a _________ framework for creating professional, responsive, mobile web pages.
free
All site content needs to be inside of a...
"container" div to make the content responsive.
How many columns fit in a single row in the Bootstrap grid system?
12
Bootstrap Breakpoints:
Extra Small Devices: .col-xs Small Devices: .col-sm Medium Devices: .col-md Large Devices: .col-lg
Different Layout for Different Screen Sizes:
Extra Small Devices: <768 px Small Devices: > or equal to 768 px Medium Devices: > or equal to 992 px Large Devices: > or equal to 1200 px
<div class="row"> <div class="col-xs-12" "col-md-8"> 1 </div> <div class="col-xs-6" "col-md-4"> 2 </div> </div>
Here, the divs will stack on top of each other on mobile, but will be side by side on desktop.
The active class should be added to the current page. So...
Home.html should add active to the first <li> profile.html should add active to the second <li> and so on.
Contents of a nav bar need to go...
Inside of a .container div.
allows us to layout our site content into rows and columns, and define how the rows and columns change as the screen size changes. (Responsive layouts)
The Bootstrap Grid System
Navigation bars are an important part of most websites.
They make navigating from page to page much easier for the user.
Bootstrap provides icons from the Glyphicon Halflings set.
They normally cost money, but their creator has made them available for Bootstrap free of cost.
Your content =
Title and link to CSS stylesheet (Comes after <meta charset=)
Where do you add the bootsrap code?
To the <head> of your webpage.
Very few websites are made with plain HTML/CSS. Most websites use at least _______ framework.
one