Podcast Beta
Questions and Answers
Adding the class attribute with the btn class attribute value is required for buttons.
True
You can add multiple class prefixes to the HTML class attribute.
True
To create a navigation toolbar, you should use the ul element instead of ol element.
False
You can create a drop-down menu by nesting a list inside another list.
Signup and view all the answers
You can only add icons to buttons, not to toolbars.
Signup and view all the answers
Bootstrap supports over 100 glyphs.
Signup and view all the answers
You should use the span tag to add icons to buttons.
Signup and view all the answers
You can link to other web pages using the a tag.
Signup and view all the answers
Icons are optional for buttons and toolbars.
Signup and view all the answers
What is the purpose of adding icons to buttons and toolbars?
Signup and view all the answers
How do you create a pill or solid button navigation toolbar?
Signup and view all the answers
What is the purpose of adding class='active' to one of the li tags?
Signup and view all the answers
How do you create a drop-down menu?
Signup and view all the answers
How many glyphs does Bootstrap support?
Signup and view all the answers
Study Notes
Bootstrap Basics
- Bootstrap is a collection of prewritten HTML, CSS, and JavaScript code that can be referenced using class names.
- Bootstrap allows for:
- Layouts: Define web page content and elements in a grid pattern.
- Components: Use existing buttons, menus, and icons that have been tested on hundreds of millions of users.
- Responsiveness: Ensures that the website appears properly on different screen sizes (phones, tablets, desktops, and large desktops).
- Cross-browser compatibility: Ensures consistent rendering across different browsers (Chrome, Firefox, Safari, Internet Explorer, etc.).
Grid System
- Bootstrap divides the screen into a grid system of 12 equally sized columns.
- Columns follow these rules:
- Columns must sum to a width of 12 columns.
- Columns can contain content or spaces.
Creating Layouts
- Three options for creating layouts:
- Code yourself: Write code to create a custom layout.
- Use a Bootstrap editor: Drag and drop components to generate Bootstrap code.
- Use a prebuilt theme: Download a free or paid theme and add your own content.
Bootstrap Editors
- Layoutit.com: Free online Bootstrap editor that allows drag-and-drop component generation.
- Jetstrap.com: Paid online drag-and-drop Bootstrap editor.
- Pingendo.com: Free downloadable drag-and-drop Bootstrap editor.
- Bootply.com: Free online Bootstrap editor with built-in templates to modify.
Predefined Templates
- Websites that offer free Bootstrap themes:
- Websites that offer paid Bootstrap templates:
Adapting Layout for Mobile, Tablet, and Desktop
- Bootstrap automatically stacks columns on smaller screens.
- Four device screen sizes to target:
- Phones
- Tablets
- Desktops
- Large desktops
- Use class prefixes to target each device:
- col-sm- for tablets and desktops
- col-md- for desktops
- col-lg- for large desktops
Coding Basic Web Page Elements
- Designing buttons:
- Use the button HTML element.
- Include the class attribute with the btn class attribute value.
- Add additional class prefixes based on the desired effect.
- Creating navigation toolbars:
- Begin with an unordered list using the ul element.
- Include class="nav nav-pills" in the opening ul tag.
- Create buttons using the li tag.
- Adding icons:
- Use the span tag to add icons to buttons or toolbars.
- Bootstrap supports over 200 glyphs.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Description
Test your knowledge about including jQuery and Bootstrap Javascript plugin files in a website. Learn about the layout options and licensing requirements of Bootstrap.
