Test: HTML Responsive - Primary 3 MCQ

Adjacent sibling selector is defined with a plus (+) notation. It selects the element that directly follows the previous element that was specified. E.g. if we have <div> element that is followed by <p> element.

sass_dir gives folder name for the sass or SCSS style sheet to be stored. The output_style property specifies compiled CSS output. The relative_assets property specifies the output path in the compiled CSS. If it is set to true, the http_path property will be ignored and the compass will generate a relative URL. line_comments specifies whether compass should generate line number where style sheets rule are defined.

Clearfix clears floats, .close indicates a close icon, .checkbox ia a container for checkboxes, .col-*-* is a responsive grid (span 1-12 column), extra small devices phones (<786px), tablets (>=786px), medium devices desktops (>=992px), large devices desktops (>=1200px).

.pagination creates a pagination which is useful when we have a website with lots of pages, used on <ul> elements, .pager creates previous or next buttons, it is used on <ul> elements, .pagination-lg creates large pagination, .pagination-sm creates small pagination.

.embed-responsive-item is used inside .embed-responsive, scales the video nicely to the parent element, .embed-responsive, .embed-responsive-16by9, .embed-responsive-4by3 are containers for embedded content. They creates given aspect ratio embedded content.

navbar-inverse creates a black navigation bar instead of light grey, .navbar-header added to container element that contains link or element that represent logo or header, .navbar-link styles an element to look like link inside the navbar. Adding form elements inside the navbar to vertically center them is done by .navbar-form.

.tooltip(“destroy”) hides and destroys the tooltip, .tooltip(“hide”) hides the tooltip, .tooltip(options) activates the tooltip with an option. .tooltip(“toggle”) toggles the tooltip.

We can change order of the grid columns with .col-md-push-* and .col-md-pull-* classes, we can move columns to right using .col-md-offset class. .clearfix class clears float. A column layout for small device is done by .col-sm-*.

 Skeleton sets Helvetica Neue and Helvetica as the default font in body document. If these fonts are not available, it will apply Ariel or default sans-serif fonts to the user’s machine.

The output path in compiled CSS is given by relative_assets. The output_style property specifies compiled CSS output. The accepted values for this property are :nested, :expanded, :compressed or :compact. line_comments specifies whether compass should generate line number where style sheets rule are defined. sass_dir gives folder name for the sass or SCSS style sheet to be stored.

.carousel-inner is a container for slide items, .carousel-caption creates a caption text for each slide in the carousel, .carousel-control is container for next and previous links, .carousel-indicators adds little dots at the bottom of each slide.

.panel-body is a container for content inside the panel, .panel-collapse is for the collapsible panel which toggles between hiding and showing panel, .panel-success shows green panel indicating success, .panel-footer creates a panel footer.

form-control-static adds plain text next to form label within a horizontal form, .form-group is a container for form input and label, .form-inline makes a <form> left-aligned with inline-block controls, .form-control is used on input, textarea, and select elements to span the entire width of the page and make them responsive.

.navbar creates navigation bar. .navbar-brand added to link or header element inside navbar to represent a logo or header, .navbar-btn vertically aligns button inside navbar, .nabar-default creates default navigation bar.

The default value of offset is 10, it specifies number of pixels to offset from top when calculating the position of scroll.