Bootstrap Framework

  1. bootstrap (def'n)
    A free and open-source front-end web framework for designing websites and web applications (used a lot with AngularJS & the ASP. NET Core)
  2. Sass or SCSS (def'n)
    This is a scripting language that is compiled into regular CSS, and was created to help writing CSS easier and more efficient.
  3. bootstrap consists of a collection of _?_ and _?_ files.
    css and javascript files
  4. What is the main goal of bootstrap?
    Abstracts some of the tedious and difficult aspects of css, media query and cross platform compatibility, so users can focus on making the site look they way they want.
  5. Explain why to choose Bootstrap for building the websites?
    • Mobile Support
    • Easy to learn
    • Browser Support
  6. What are the key components of Bootstrap?
    • CSS
    • Scaffolding
    • Layout Components
    • JavaScript Plugins
    • Customize
  7. Explain what are class loaders in Bootstrap?
    Class loader is a part of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also does the process of converting a named class into its equivalent binary form.
  8. What are the types of layout available in Bootstrap?
    • Fluid Layout
    • Fixed Layout
  9. Fluent Layout (def'n)
    This layout in Bootstrap is used when you want to create a app that is 100% wide and uses up all the width of the screen.
  10. Fixed Layout (def'n)
    This layout in Bootstrap is used when you want to create an app w/ a standard screen you will use a fixed (940 px) option.
  11. Bootstrap Grid System (def'n)
    For creating page layout through a series of rows and columns that house your content this is used
  12. offset columns (def'n)
    A useful feature for more specialized layouts. For more spacing they can be used by pushing column over.
  13. Example of an offset column.
    example .col-xs=* classes do not support offset but they are easily replicated using an empty cell
  14. column ordering (def'n)
    One of the feature available in bootstrap and you can easily write columns in an order and show them in another one. With .col-md-push-* and .col-md-pull-*  the order of the column can be easily changed.
  15. .container keyword (def'n)
    Used to wrap page content and also to center the content.
  16. pagination (def'n)
    This is the handling of an unordered list by bootstrap
  17. .pagination class (def'n)
    To get pagination on your page you have to add this class.
  18. .disabled:  pagination (def'n)
    used to customize links for un-clickable links for pagination.
  19. .active: pagination (def'n)
    the context of setting up pagination, this is added to indicate the current page.
  20. .active: pagination (def'n)
    Use these classes to get different size items.
  21. Jumbotron; use of (def'n)
    Generally used for content that you want to highlight like some slogan or marketing headline etc. in other words it is used to enlarge the size of the headings and to add a margin for landing page content
  22. jumbotron syntax (example)
    <div class="jumbotron">
  23. container; syntax (example)
    <div class="container">

      <p>This is some text.</p>

      <p>This is another text.</p>

  24. What are the two ways you can display the code? (list)
    • <code> tag
    • <pre> tag
  25. <code> tag (def'n)
    If you are going to display code inline use this tag.
  26. <pre> tag (def'n)
    To display the code as a standalone block element or it has multiple lines use this tag.
  27. Write an example of displaying code using the pre tag. (example)
    Image Upload 1
  28. The steps for creating basic or vertical forms (list)
    (1) Add a role form to the parent <form> element

    (2) Wrap labels and controls in a <div> with class .form-group. To achieve optimum spacing this is needed

    (3) Add a class of .form-control to all texturl <input> , <textarea> , and <select> elements
  29. Modal plugin (def'n)
    This is a child window that is layered over its parent window. This uses a custom Jquery Plugin to accomplish the effect.
  30. Modal plugin (example)
    • A full example of a modal window in bootstrap:
    • Image Upload 2
  31. container (def'n)
    This is a class which that creates a centered area within the page where our site content can be put within.
  32. collapsing elements (def'n)
    These elements enable you to collapse any particular element without writing any JavaScript code or the accordion markup.
  33. data-toggle= “collapse” (def'n)
    In Bootstrap to apply collapsing elements you have to add this attribute to the controller element along with a data-target or href to automatically assign control of a collapsible element.
  34. How you can add badge to list group in Bootstrap?
    To add badge to list group in Bootstrap you have to simply add <span class = “badge”> within the <li> element.
  35. media object (def'n)
    These objects in Bootstrap enables to put objects like image, video or audio to the left or right of the content blocks.
  36. What does a media object in bootstrap look like on a web page? (non-code example)
    Image Upload 3
  37. well; class (def'n)
    When setting the class attribute of a div to this keyword, the area inside the div makes the content to appear sunken or an inset effect on the page.
  38. Explain how you can create Nav elements in Bootstrap? (list)
    (1) Start with a basic unordered list with the base class of .nav

    (2) Then add class .nav-tabs
  39. spacing format: my-2 (def'n & example)
    • {property}{sides}-{size}
    •  my-2

    • property: m for margin, and p for padding.
    • sides: y for classes that set both *-top and *-bottom
    • size: 2 - (by default) for classes that set the margin or padding to $spacer-x * .5 or $spacer-y * .5
Card Set
Bootstrap Framework
Multiple choice and short answer questions regarding the bootstrap web framework