Bootstrap Flashcards
What’s bootstrap?
Make it easy to make beautiful websites.
Can themes of bootstrap be used to make a unique look and feel easy?
Yes. Themes are available and simply need to be applied in the css file.
Where to download bootstrap?
https://getbootstrap.com/
What is “minifed” file
means small as possible.
What’s bootstrap responsive?
To make the website responsive.
What is bootstrap composed of?
It is composed by css, img and js.
Why is it a good idea to load js in the end of the file?
Increases the website load performance.
How to load bootstrap in the page?
links href… at least bootstrap.css. optionally js and responsive css.
What are the core concepts of bootstrap?
Semantic class names, compositional classes and conventions.
What’s the grid layout?
It’s a layout that is based on a grid - columns and rows (12 columns)
How to define a four column line in bootstap?
div class=”span3”
4 columns x3 =12
What’s an offset in the span?
pushes the element for the right.
What happens if there is no space in the screen to show all the regular 12 pieces?
They go to the next line. when the bigger elements has no enough space, a scroll bar appears.
What is the difference between the fixed (default) and the fluid grid?
Fluid grid get % sizes and fixed get fixed sizes. The container also needs to be defined fluid.
What is a common design tradeoff around fixed sizes?
You have to choose between a responsive and fixed design.
What is a responsive design?
A design that reacts and adapts to the environment (PCs, tablet and smartphones)
What is a css media query?
Defines css for a minimum and maximum screen size. Bootstrap-responsive.css defines it handy.
How to add bootstrap responsive.css?
Just like bootstrap.. add after.
How to hide an element in a specific platform?
Bootstrap gives the hidden-phone, for example.
What is typography?
It’s how text, image and space is arranged in the screen. It’s the science that covers the nice look and feel of written things.
Does bootstrap take care of default “fonting” and space in text?
Yes. It means extra style needs to be defined manually.
What’s a lead class?
Class that brings the targeted element to evidence.
How to proper align the text of checkboxes and radio buttons?
Simply add the class checkbox and radio.
What are input prepend and append?
Are classes that allow adding spans to show symbols or any general extra text in the beginning and or end of an element.
What means inline and block bootstrap classes?
Classes that define the element will be shown next (right) to another or below
What is the i element used for?
For icons.
Where to find icons?
glyphicons.com
which class makes an icon white?
icon-white class
When to use font awesome?
When need to have more icons and different fonts.
How to add an icon to a button element?
Just add an i inside the element’s text.
How to make a dropdown out of bootstrap style, jquery and js?
First needs to import all three and then use the class “dropdown-togle” and data-toggle=”dropdown”
How to css do caret?
it is not an image, but a clever arranged borders that makes the arrow shape.
Is it possible to build shapes with html and css?
Yes. css-tricks.com and other sites have all sort of shapes.
How to do menus inside menus?
ul dropdown-menu and then an li as class dropdown-submenu
What does the btn-group class do?
Group buttons together with no margin.
Can button groups be vertical?
yes. just apply the class button-group-vertical.
What is a split button?
A button that can be clicked and also might have a caret.
how to pull an element to the right?
by using the class pull-right.
how to make a navbar to be fixed in the top even when scrolling down?
by using the class navbar-fixed-top.
How to make the navbar look nice even on smartphones?
By adding a nav-collapse collapse class and by creating a btn btn-navbar. This has a data-toggle and data-target properties
what is a breadcrumb?
is used to let the user know on which part of the site he is.
How to create a breadcrumb?
ul element with the class breadcrumb
how to create page navigaton with bootstrap?
by creating a div with the class pagination and e.g pagination-centered. inside the div there will be ul and li
How to make a teaser box in the website?
div with the class hero-unit. you can add inside h1, p buttons and etc.
how to make an element look the inverse background color and text?
by using the inverse class.
what are the differences between labels and badges?
although both are colorful, one is border rounded and the other is completely rounded.
how to create a dismissable alert in the website?
a div with the class alert then inside of that you need a button with the class close and with a property data-dismiss with the value alert.
How to tell if the bootstrap element depends on javascript?
Usually the element have to have some custom properties, e.g data-dismss=”alert”. Then the javascript bootstrap can pick this up.
What is the bootstrap way to show lazy loading text instead of the not-loaded element?
Bootstrap will always make available a data-loading-text and other data-loading classes to handle that. also exists data-complete-text etc
How to create a modal message/form in bootstrap and css?
Having a div with the class modal. additionally you can add hide and fade classes to give it some effects.
What is a navspy?
Is a bootstrap class that keeps track of users position in the page.
What is data-offset and what it has to do with the navspy?
Most of the times the actual page content will have margin and therefore you need to apply the same offset in the navbar for consistency.
What is typeahead?
Is a auto complete functionality.
What is a carousel?
It is a class that allows images to be displayed in a carousel format.
What is the navspy best used for?
For documentation and articles.
What does a col-md-9 do?
col-sm,md,lg are responsive attributes that means if the device is smaller than 9 columns (75%) the element will be positioned below.
What happens when you combine different types of col? (col-sm, col-md, col-lg)
Combine the classes to use change column widths on different grid sizes. This creates a responsive layout.
