Skip to content

Latest commit

 

History

History
663 lines (429 loc) · 25.8 KB

bootstrap.md

File metadata and controls

663 lines (429 loc) · 25.8 KB
Raw

Bootstrap

Explain Bootstrap?

Explain what is Bootstrap?

Explain the two codes that are used for code display in Bootstrap?

What are the types of layout available in Bootstrap?

What will be the output of the following HTML code

Explain why you prefer Bootstrap for website development?

What are the key components of Bootstrap?

How many types of layout are available in Bootstrap?

Why do we use Jumbotron in Bootstrap?

What is Twitter Bootstrap?

Explain why to choose Bootstrap for building the websites?

What global styles are applied as a part of Bootstrap’s default typography?

What is the procedure to create Nav elements in Bootstrap?

What are Glyphicons?

When to use "lead" in Bootstrap?

Explain the typography and links in Bootstrap.

How do you make images responsive?

What is missing for a tooltip to show properly?

What do you mean by Bootstrap collapsing elements?

What is a list group in Bootstrap and where does it finds its application?

Explain Modal plugin in Bootstrap?

What is a Bootstrap Container?

Why do we use Bootstrap Carousel plugin?

What is the role of media object in Bootstrap and how many types are available?

What are the key components of Bootstrap?

What is the step-wise procedure for creating basic or vertical forms?

What do you mean by Bootstrap "well"?

What is the difference between the following two lines of code? Explain your answer.

What will be the default Bootstrap look of the alert created with this following code?

Explain what the following code does, and where they are useful

What is the role of pagination in bootstrap and what are their classifications?

What is Normalize in Bootstrap?

Consider the HTML code snippet below. What will the output be, and why?

Explain column ordering in Bootstrap?

What is screen reader in bootstrap documentation?

How can you differentiate between Bootstrap and Foundation?

How many different media queries are used by the Bootstrap grid system by default?

What is the class sr-only used for? Is it important or can I remove it?

Explain Bootstrap?

Bootstrap is a platform for web development that is based on front-end framework and creates exceptional responsive designs. It is fast, easy and has multiple templates designed using HTML, and CSS. These templates are used for forms, tables, buttons, typography, modals, tables, navigation, carousels and images. Bootstrap also has Javascript plugins, which are optional. Bootstrap is preferred for developing mobile web applications.

Source

[↑] Back to top

Explain what is Bootstrap?

Bootstrap is CSS/Javascript framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.

Source

[↑] Back to top

Explain the two codes that are used for code display in Bootstrap?

There are two simple ways to display a code in Bootstrap:

  • <code> tag: In case you wish to display an inline code
  • <pre> tag: In case you have a code with several lines or even a block element
Source

[↑] Back to top

What are the types of layout available in Bootstrap?

In Bootstrap there are two types of Layout available

  • Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen
  • Fixed Layout: For a standard screen you will use fixed layout (940 px) option
Source

[↑] Back to top

What will be the output of the following HTML code

Consider:

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
    <ul>
      <li>Nested item 2.1</li>
      <li>Nested item 2.2</li>
      <li>Nested item 2.3</li>
    </ul>     
  <li>Item 3</li>
</ul>

What will be the output of the following HTML code?

Answer:

If we apply .list-unstyled to a list, it will remove the default list-style and left margin on the list items. But only for the immediate children. Main list items will be without any style, and nested list items will still have default unordered nested list-style.

Source

[↑] Back to top

Explain why you prefer Bootstrap for website development?

Bootstrap has features that are way better than other web development platforms. It provides an extensive browser support for almost every known browser such as Opera, Chrome, Firefox, Safari etc. With adequate knowledge of CSS and HTML, web development becomes easy on Bootstrap. Also, it supports mobile applications with the help of responsive design. It can adjust CSS as per the device, screen size etc. Instead of creating multiple files, it creates only a single file, which reduces any extra effort by the developer.

Source

[↑] Back to top

What are the key components of Bootstrap?

In total, there are five key components of Bootstrap i.e. CSS (multiple CSS files), **Scaffolding (**essential for the basic system that consist of Grid system, background and link styles), Layout Components: (shares a list of all layouts), JavaScript Plugins (includes jQuery and JavaScript plugins) and **Customization **(Allows customization of all components for a desired framework)

Source

[↑] Back to top

How many types of layout are available in Bootstrap?

There are two major layouts for Bootstrap i.e. Fluid Layout and Fixed Layout. Fluid layout is necessary for creating an app that is 100 % wider and covers all the screen width. Fixed Layout is used only for a standard screen (940px). Both layouts can be used for creating a responsive design.

Source

[↑] Back to top

Why do we use Jumbotron in Bootstrap?

Jumbotron has a very basic function in bootstrap i.e. highlighting a content. It could either be a slogan/uvp (unique value proposition) or probably a headline. It increases the heading size and gives a margin for content of the landing page. In order to implement Jumbotron in a Bootstrap use:

 <div class=”jumbotron”>

Jumbotron can have any valid HTML along with other functions and classes.

Source

[↑] Back to top

What is Twitter Bootstrap?

Bootstrap is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.

Source

[↑] Back to top

Explain why to choose Bootstrap for building the websites?

There are few reason why we choose Bootstrap for building websites

  • Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers.
  • Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML
  • Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.
Source

[↑] Back to top

What global styles are applied as a part of Bootstrap’s default typography?

Bootstrap sets the global default font-size to 14px, with a line-height of 1.428. The default font is changed to Helvetica and Arial with sans serif fallback.

All these styles are applied to the <body> and all paragraphs, with the addition that <p> (paragraphs) receive a bottom margin of half their computed line-height, which is 10px by default.

Source

[↑] Back to top

What is the procedure to create Nav elements in Bootstrap?

There are several styling navigation elements available on bootstrap and every style uses the same function i.e. class .nav. In order to create tabs or a tabular navigation, you can begin with a simple or rather basic unordered list using the function class .nav. To add the tabs the function class .nav-tabs can be used.

Source

[↑] Back to top

What are Glyphicons?

Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost.

To use the icons, simply use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding.

<span class="glyphicon glyphicon-search"></span>
Source

[↑] Back to top

When to use "lead" in Bootstrap?

To add some emphasis to a paragraph, add class .lead. This will give you larger font size, lighter weight, and a taller line height.

Source

[↑] Back to top

Explain the typography and links in Bootstrap.

Bootstrap sets a basic global display (background), typography, and link styles:

  • Basic Global display − sets background-color: #fff; on the
  • Typography − uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base
  • Link styles − sets the global link color via attribute @link-color and apply link underlines only on :hover.
Source

[↑] Back to top

How do you make images responsive?

Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

Source

[↑] Back to top

What is missing for a tooltip to show properly?

Consider:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Example tooltip">Hover over me</button>

What is missing for a tooltip to show properly?

Answer

Bootstrap’s Tooltip plugin is not CSS-only, like other plugins are. For performance reasons, the Tooltip plugin is opt-in, and to use it you must initialize it using JavaScript with the following example code:

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
Source

[↑] Back to top

What do you mean by Bootstrap collapsing elements?

Bootstrap collapsing elements is a way in which you can collapse any specific element without developing any JavaScript code or even an accordion markup. In order to implement this element, you need to add data-toggle=”collapse” in controller element.

To automatically assign the control of the collapsible element, you can use data-target or href along with data-toggle=”collapse”. There are other options also available such as collapse (‘hide’), .collapse (‘show’).

Source

[↑] Back to top

What is a list group in Bootstrap and where does it finds its application?

When there is a need for displaying a simple element as well as a complex element along with a custom content, a list group can be used. You can use the function class .list-group to create a simple list that helps in addressing the entire list and class .list-group-item to refer only to an individual item in that list.

Source

[↑] Back to top

Explain Modal plugin in Bootstrap?

When there is a need to cover a parent window, a child window can be created using a modal.

Developers generally use a custom Jquery Plugin to create a Modal on Bootstrap. Modal windows are best when it comes to improving the experience of a user and also adding more functionality.

Source

[↑] Back to top

What is a Bootstrap Container?

Bootstrap .container is again a class that is used for creating an area in the center of the webpage to place the content. There are row elements which act as containers for columns thereby making a grid system. Rows are used for creating horizontal column groups.

Using the .container, you can get a responsive design, which will include all the other HTML code.

Source

[↑] Back to top

Why do we use Bootstrap Carousel plugin?

The Carousel plugin is responsible for adding a slider on the site. The developers usually use it when the web space is limited but the content is huge. Some of the common carousels includes:

  • .carousel (‘pause’)
  • .carousel (‘prev’)
  • .carousel (‘next’)
  • .carousel (‘number’)
  • .carousel (‘cycle’)
Source

[↑] Back to top

What is the role of media object in Bootstrap and how many types are available?

In Bootstrap, it is possible to add images, audio, and video using media object.It can either be placed on the left side or the right side of the content.

If the developer wishes to create a media element then they can use .media class where the source will be specified as .media-object class. There are usually two types of Media-objects:

  • .media
  • .media-list.
Source

[↑] Back to top

What are the key components of Bootstrap?

The key components of Bootstrap are:

  • CSS : It comes with plenty of CSS files
  • Scaffolding : It provides a basic structure with Grid system , link styles and background
  • Layout Components : List of layout components
  • JavaScript Plugins: It contains many jQuery and JavaScript plugins
  • Customize: To get your own version of framework you can customize your components
Source

[↑] Back to top

What is the step-wise procedure for creating basic or vertical forms?

There are few steps, which can be followed for creating vertical or basic.

  • Firstly, a role form can be added to the parent <form> element.
  • Secondly, add appropriate spacing by wrapping labels and control in <div> and using the function class .form-group.
  • Lastly, apply the function class .form-control to different elements such as <input> , <textarea> and <select>.
Source

[↑] Back to top

What do you mean by Bootstrap "well"?

A Bootstrap well is nothing but a container that makes the content appear sunken. Sometimes it may also give an inset effect on the webpage.

Thus, a developer can create a well and also wrap the content in the well with the help of <div> and class .well.

Source

[↑] Back to top

What is the difference between the following two lines of code? Explain your answer.

Consider:

$('#myModalPrompt').modal({ keyboard: false });
$.fn.modal.Constructor.DEFAULTS.keyboard = false;

What is the difference between the following two lines of code? Explain your answer.

Answer

The first line will initialize a modal dialog prompt with id #myModalPrompt, and set only it to ignore keyboard event. The second line will change the default settings for the modal plugin by modifying the plugin’s Constructor.DEFAULTS object, and will have an impact on all modal dialog prompts.

Source

[↑] Back to top

What will be the default Bootstrap look of the alert created with this following code?

Consider:

<div class="alert" role="alert">Warning! I'm missing something.</div>

What will be the default Bootstrap look of the alert created with this following code?

Answer

Alert messages are used to provide feedback message that usually require the attention of the user. Here it is important to note that Bootstrap Alerts don’t have default class. If a contextual class such as .alert-success, .alert-info, .alert-warning, or .alert-danger, is not provided, a default grey alert will be created.

Source

[↑] Back to top

Explain what the following code does, and where they are useful

Consider:

<a href="#">Home <span class="badge">36</span></a>

Explain what the following code does, and where they are useful?

Answer:

This code will generate a link with an inline badge that provides important notifications to the user, such as number received or unread messages or number of friend requests. Badges are most commonly used in message applications and social networking sites.

Source

[↑] Back to top

What is the role of pagination in bootstrap and what are their classifications?

When an unordered list has to be handled by bootstrap, it uses pagination. To handle the list, different classes are available such as:

  • .pagination,
  • .disabled,
  • .active,
  • .pagination-lg.
Source

[↑] Back to top

What is Normalize in Bootstrap?

Bootstrap uses Normalize to establish cross browser consistency.

Normalize.css is a modern, HTML5-ready alternative to CSS resets. It is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.

Source

[↑] Back to top

Consider the HTML code snippet below. What will the output be, and why?

Consider:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 65%">
    <span class="sr-only">65% sucesfuly completed</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% completed with warnings</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 15%">
    <span class="sr-only">15% did not complete</span>
  </div>
</div>

Consider the HTML code snippet below. What will the output be, and why?

Answer

By placing multiple bars under the same .progress parent element, Bootstrap will stack them into one single progress bar. Since the sum of the progress bar is 100%, the progress bar will be full width and fully populated.

Source

[↑] Back to top

Explain column ordering in Bootstrap?

Column ordering is one of the most interesting features that can be found in Bootstrap. By using appropriate functions, the columns can be written easily and also in a defined order. You can also show them in another column. In order to change or alter the order of the column easily, the functions .col-md-push-* and .col-md-pull-* can be used.

Source

[↑] Back to top

What is screen reader in bootstrap documentation?

A screen reader is a tool used by people who can't see well or for some reason can't read from a screen; it reads the text out loud to them, or presents it to them in a different format that they can use more easily. You should always consider screen readers for accessibility purposes.

Source

[↑] Back to top

How can you differentiate between Bootstrap and Foundation?

Bootstrap supports LESS preprocessor and allows the designing and development for both mobile and desktop. It uses only pixels and has a number of UI elements. Foundation, on the other hand, supports Sass preprocessor and allows mostly mobile designing. It uses REMs and has only a few options when it comes to UI elements.

Source

[↑] Back to top

How many different media queries are used by the Bootstrap grid system by default?

The Bootstrap grid system provides four tiers of classes:

  • xs for phones (<768px),
  • sm for tablets (≥768px),
  • md for desktops (≥992px),
  • lg for large desktops (≥1200px).

The hidden trick in this question is that there are only three media queries. Bootstrap is mobile first by design, so the default styles are for small devices, and media queries are then added on for larger screens, as follow in LESS code:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Source

[↑] Back to top

What is the class sr-only used for? Is it important or can I remove it?

According to bootstrap's documentation, the sr-only class is used to hide information intended only for screen readers from the layout of the rendered page.

For example you might consider to hide from sighted user an internal link "skip to main content" which is desirable for blind users if you have a complex navigation or adds in the page header before the content. You should always consider screen readers for accessibility purposes.

According to the World Health Organization, 285 million people have vision impairments. So making a website accessible is important.

Source

[↑] Back to top