Brainscape's Knowledge GenomeTM

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


See full index

CS/UX: Front-End Software Development > Bootstrap > Flashcards

Bootstrap Flashcards

1
Q

What’s bootstrap?

A

Make it easy to make beautiful websites.

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

Can themes of bootstrap be used to make a unique look and feel easy?

A

Yes. Themes are available and simply need to be applied in the css file.

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

Where to download bootstrap?

A

https://getbootstrap.com/

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

What is “minifed” file

A

means small as possible.

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

What’s bootstrap responsive?

A

To make the website responsive.

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

What is bootstrap composed of?

A

It is composed by css, img and js.

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

Why is it a good idea to load js in the end of the file?

A

Increases the website load performance.

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

How to load bootstrap in the page?

A

links href… at least bootstrap.css. optionally js and responsive css.

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

What are the core concepts of bootstrap?

A

Semantic class names, compositional classes and conventions.

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

What’s the grid layout?

A

It’s a layout that is based on a grid - columns and rows (12 columns)

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

How to define a four column line in bootstap?

A

div class=”span3”

4 columns x3 =12

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

What’s an offset in the span?

A

pushes the element for the right.

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

What happens if there is no space in the screen to show all the regular 12 pieces?

A

They go to the next line. when the bigger elements has no enough space, a scroll bar appears.

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

What is the difference between the fixed (default) and the fluid grid?

A

Fluid grid get % sizes and fixed get fixed sizes. The container also needs to be defined fluid.

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

What is a common design tradeoff around fixed sizes?

A

You have to choose between a responsive and fixed design.

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

What is a responsive design?

A

A design that reacts and adapts to the environment (PCs, tablet and smartphones)

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

What is a css media query?

A

Defines css for a minimum and maximum screen size. Bootstrap-responsive.css defines it handy.

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

How to add bootstrap responsive.css?

A

Just like bootstrap.. add after.

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

How to hide an element in a specific platform?

A

Bootstrap gives the hidden-phone, for example.

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

What is typography?

A

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.

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

Does bootstrap take care of default “fonting” and space in text?

A

Yes. It means extra style needs to be defined manually.

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

What’s a lead class?

A

Class that brings the targeted element to evidence.

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

How to proper align the text of checkboxes and radio buttons?

A

Simply add the class checkbox and radio.

24
Q

What are input prepend and append?

A

Are classes that allow adding spans to show symbols or any general extra text in the beginning and or end of an element.

25
Q

What means inline and block bootstrap classes?

A

Classes that define the element will be shown next (right) to another or below

26
Q

What is the i element used for?

A

For icons.

27
Q

Where to find icons?

A

glyphicons.com

28
Q

which class makes an icon white?

A

icon-white class

29
Q

When to use font awesome?

A

When need to have more icons and different fonts.

30
Q

How to add an icon to a button element?

A

Just add an i inside the element’s text.

31
Q

How to make a dropdown out of bootstrap style, jquery and js?

A

First needs to import all three and then use the class “dropdown-togle” and data-toggle=”dropdown”

32
Q

How to css do caret?

A

it is not an image, but a clever arranged borders that makes the arrow shape.

33
Q

Is it possible to build shapes with html and css?

A

Yes. css-tricks.com and other sites have all sort of shapes.

34
Q

How to do menus inside menus?

A

ul dropdown-menu and then an li as class dropdown-submenu

35
Q

What does the btn-group class do?

A

Group buttons together with no margin.

36
Q

Can button groups be vertical?

A

yes. just apply the class button-group-vertical.

37
Q

What is a split button?

A

A button that can be clicked and also might have a caret.

38
Q

how to pull an element to the right?

A

by using the class pull-right.

39
Q

how to make a navbar to be fixed in the top even when scrolling down?

A

by using the class navbar-fixed-top.

40
Q

How to make the navbar look nice even on smartphones?

A

By adding a nav-collapse collapse class and by creating a btn btn-navbar. This has a data-toggle and data-target properties

41
Q

what is a breadcrumb?

A

is used to let the user know on which part of the site he is.

42
Q

How to create a breadcrumb?

A

ul element with the class breadcrumb

43
Q

how to create page navigaton with bootstrap?

A

by creating a div with the class pagination and e.g pagination-centered. inside the div there will be ul and li

44
Q

How to make a teaser box in the website?

A

div with the class hero-unit. you can add inside h1, p buttons and etc.

45
Q

how to make an element look the inverse background color and text?

A

by using the inverse class.

46
Q

what are the differences between labels and badges?

A

although both are colorful, one is border rounded and the other is completely rounded.

47
Q

how to create a dismissable alert in the website?

A

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.

48
Q

How to tell if the bootstrap element depends on javascript?

A

Usually the element have to have some custom properties, e.g data-dismss=”alert”. Then the javascript bootstrap can pick this up.

49
Q

What is the bootstrap way to show lazy loading text instead of the not-loaded element?

A

Bootstrap will always make available a data-loading-text and other data-loading classes to handle that. also exists data-complete-text etc

50
Q

How to create a modal message/form in bootstrap and css?

A

Having a div with the class modal. additionally you can add hide and fade classes to give it some effects.

51
Q

What is a navspy?

A

Is a bootstrap class that keeps track of users position in the page.

52
Q

What is data-offset and what it has to do with the navspy?

A

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.

53
Q

What is typeahead?

A

Is a auto complete functionality.

54
Q

What is a carousel?

A

It is a class that allows images to be displayed in a carousel format.

55
Q

What is the navspy best used for?

A

For documentation and articles.

56
Q

What does a col-md-9 do?

A

col-sm,md,lg are responsive attributes that means if the device is smaller than 9 columns (75%) the element will be positioned below.

57
Q

What happens when you combine different types of col? (col-sm, col-md, col-lg)

A

Combine the classes to use change column widths on different grid sizes. This creates a responsive layout.

CS/UX: Front-End Software Development (8 decks)

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