Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Bootstrap > Fundamentals > Flashcards

Fundamentals Flashcards

1
Q

Why use Bootstrap?

A

Mobile Support
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the key components of Bootstrap?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are class loaders in Bootstrap?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are the types of layout available in Bootstrap?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is Bootstrap Grid System?

A

Creating page layout through a series of row sand columns that house your content Bootstrap Grid System.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are offset columns in Bootstrap?

A

For more spacing they can be used by pushing column over.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What function can you use to wrap a page content?

A

With .container you can also center the content.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are the two ways you can display code?

A

<code> and <pre> tag.</pre></code>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are the steps for creating basic or vertical forms?

A 
Add a role form to the parent  element.
Wrap labels and controls in a <div> with class .form-group.
Add a class of .form-control to all texturl  elements</div>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What Modal plugin used for in Bootstrap?

A

Create a child window that is layered over it’s parent window and is created by a jQuery plugin.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is a Bootstrap container?

A

A class that creates a centered area within a page where our site content can be put within.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is Bootstrap collapsing element?

A

Collapsing element enables you to collapse any particular element without Javascript. To apply collapsing element you add data-toggle=”collapse” to controller element along with data-targe or href to automatically assign control of a collapsible element. You can also use .collapse(options), .collapse(‘show’) or .collapse(‘hide’)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is list group in Bootstrap?

A

Components use to display simple and complex element with custom content. Uses class .list-group to address the list and class .list-group-itme to address individual item.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

How can you add badge to list group in Bootstrap?

A

Add <span> within the <li> element.</li></span>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is Bootstrap well?

A

A container <div> that makes the content to appear sunken or an inset effect on the page. Create a well by wrapping the content that you would like to appear in the well with a <div> containing the .well</div></div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How can you create Nav elements in Bootstrap?

A 
Start with basic unordered list with the base class of .nav
then add class .nav-tabs
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is use of Bootstrap carousel plugin?

A 
Add a slider to site.  Useful where you want to display huge amount of contents within a small space.
.carousel(option)
.carousel('cycle')
.carousel('pause')
.carousel('number')
.carousel('prev')
.carousel('next')
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is Lead Body Copy?

A

Use to add emphasis to a paragraph, add class=”lead”.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What type of lists supported by Bootstrap?

A 
Ordered lists
Unordered lists
Definition list - in this type of list, each list item can consist of both the <dt> and </dt><dd> elements.
</dd><dt> definition term
</dt><dd> definition of </dd><dt>
</dt>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do you use Glyphicons?

A

<span></span>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How do you use the Dropdown plugin?

A

Add data-toggle=”dropdown” to a link or button to toggle a dropdown

<div class="dropdown">
  <a href="#">Dropdown trigger</a>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href=”#” −

<div>
<a>
Dropdown <span></span>
</a>

<ul>
...
</ul>
</div>

To call the dropdown toggle via JavaScript, use the following method:

$(‘.dropdown-toggle’).dropdown()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is button group?

A

Button group allows multiple buttons to be stacked together on a single line.

23
Q

Which class is used for basic button group?

A

.btn-group is used for a basic button group. Wrap a series of button with class .btn in .btn-group.

24
Q

Which class is used to draw a toolbar of buttons?

A

.btn-toolbar helps to combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
</div></div>

25
Q

Which classes can be applied to button group instead of resizing each button?

A

.btn-group-lg, .btn-group-sm, .btn-group-xs classses can be applied to button group instead of resizing each button.

26
Q

Which class make a set of buttons appear vertically stacked rather than horizontally?

A

.btn-group-vertical class.

27
Q

What are input groups?

A

Extended Form Controls.

28
Q

How do you create a vertical pills navigation menu?

A

You can stack the pills vertically using the class .nav-stacked along with the classes: .nav, .nav-pills.

29
Q

How do you create a navbar in Bootstrap?

A

Add the classes .navbar, .navbar-default to the tag.

Add role=”navigation” to the above element, to help with accessibility.

Add a header class .navbar-header to the <div> element. Include an <a> element with class navbar-brand. This will give the text a slightly larger size.</a>

To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.</a></div>

30
Q

What is Bootstrap breadcrumb?

A

Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page’s location within a navigational hierarchy.

A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb

31
Q

What are Bootstrap labels?

A

Bootstrap labels are great for offering counts, tips, or other markup for pages. Use class .label to display labels.

32
Q

What are Bootstrap badges?

A

Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new or unread items. To use badges just add <span> to links, Bootstrap navs, and more.</span>

33
Q

What is Bootstrap page header?

A

Wrap your heading in a <div> with a class of .page-header.</div>

34
Q

How to create a thumbnail using Bootstrap?

A

Add an <a> tag with the class of .thumbnail around an image.</a>

35
Q

How do you create Bootstrap alert?

A

Use a wrapper <div> and adding a class of .alert on one of the four contextual classes (alert-success, .alert-info, .alert-warning, .alert-danger).</div>

36
Q

How will you create a Bootstrap Dismissal Alert?

A

Add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

Also add optional .alert-dismissable to the above <div> class.

Add a close button.

Use the element with the data-dismiss=”alert” data attribute.</div></div>

37
Q

How will you create a progress bar using Bootstrap?

A

Add a <div> with a class of .progress.

Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

Add a style attribute with the width expressed as a percentage. Say for example, style=”60%”; indicates that the progress bar was at 60%.</div></div></div>

38
Q

How will you create a alternate progress bar using Bootstrap?

A

Add a <div> with a class of .progress.

Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.

Add a style attribute with the width expressed as a percentage. Say for example, style=”60%”; indicates that the progress bar was at 60%.</div></div></div>

39
Q

How will you create a striped progress bar using Bootstrap?

A

Add a <div> with a class of .progress and .progress-striped.

Next, inside the above <div>, add an empty <div> with a class of .progress-bar and class progress-bar-* where * could be success, info, warning, danger.

Add a style attribute with the width expressed as a percentage. Say for example, style=”60%”; indicates that the progress bar was at 60%.</div></div></div>

40
Q

How will you create a animated progress bar using Bootstrap?

A

Add a <div> with a class of .progress and .progress-striped. Also add class .active to .progress-striped.

Next, inside the above <div>, add an empty <div> with a class of .progress-bar.

Add a style attribute with the width expressed as a percentage. Say for example, style=”60%”; indicates that the progress bar was at 60%.</div></div></div>

41
Q

How will you create a stacked progress bar using Bootstrap?

A

You can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them.

42
Q

What are Bootstrap panels?

A

Panel components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element.</div>

43
Q

How will you create a Bootstrap panel with heading?

A

Use .panel-heading class to easily add a heading container to your panel.

Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.</h6></h1>

44
Q

How will you create a Bootstrap panel with footer?

A

You can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.</div>

45
Q

Can you put a table within Bootstrap panel?

A

Yes! To get a non-bordered table within a panel, use the class .table within the panel. Suppose there is a <div> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, then the component moves from panel header to table without interruption.</div></div>

46
Q

Can you put a listgroup within Bootstrap panel?

A

Yes! You can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also add class .panel-default to this element. Now within this panel include your list groups.</div>

47
Q

What is Scrollspy plugin?

A

The Scrollspy (auto updating nav) plugin allows you to target sections of the page based on the scroll position. In its basic implementation, as you scroll, you can add .active classes to the navbar based on the scroll position.

48
Q

What is affix plugin?

A

The affix plugin allows a <div> to become affixed to a location on the page. You can also toggle it’s pinning on and off using this plugin. A common example of this are social icons. They will start in a location, but as the page hits a certain mark, the <div> will be locked in place and will stop scrolling with the rest of the page.</div></div>

49
Q

What html elements can you use button classes?

A

<a>, and but you should use to avoid browser issues.</a>

50
Q

How can you create dropdown functionality?

A

With a caret class. <span></span>

51
Q

How can you force an element to be show or hidden?

A

With .show and .hidden classes.

52
Q

How do you change the background color of your table row or individual cells?

A 
Use Contextual classes.
.active
.success
.warning
.danger

can be applied to

53
Q

How do you allow for table auto scrolling from big device to small devices?

A

Wrap table in <div> with class .table-responsive</div>

Bootstrap (1 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions