Bootstrap Тест Upwork

How can you add a footer to a panel?
By adding .panel-footer class to <div> tag
By adding <footer> tag
By adding <footer> tag with .panel class
By adding div tag with .footer class

Which options below will  make font weight bolder than in the parent element?
Note: There may be more than one right answer.
Add class `bold`
Use HTML `bold` tag
Use HTML `strong` tag
Use HTML `b` tag
Add class `strong`
None of these

Which class can be used to create a responsive table?
.table-responsive
.responsive
.active
.table

Which of the following is not contextual class?
.active
.danger
.success
.failure

Responsive utilities are currently only available for block and table toggling include the following Classes?
Note: There may be more than one right answer.
.visible-xs : Extra small (less than 768px) visible
.visible-sm : Small (up to 768 px) visible
.visible-md : Medium (768 px to 980 px) visible
.visible-lg :Larger (992 px and above) visible

Bootstrap provides following classes that can be used to apply some simple styles to images?
Note: There may be more than one right answer.
.img-thumbnail: adds a bit of padding and a gray border
.img-rounded: adds border-radius:6px to give the image rounded corners
.img-circle: makes the entire image round by adding border-radius:500px
.img-rounded: adds border-recat:6px to give the image react corners
.img-circle: makes the entire image radius by adding border-rounded

The following event is fired when the carousel has completed its slide transition:

     $('#identifier').collapse({
  toggle: false
})

     $('#identifier').on('hidden.bs.collapse', function () {
// do something...
})

     $('#identifier').on('slide.bs.carousel',
function () {
  // do something...
})

     $('#identifier').on('slid.bs.carousel',
function () {
  // do something...
})

Following event is fired when the carousel has completed its slide transition?
     bs
     slide
     slid
     None of the above

Which of the following code shows a collapsible panel with a list group inside?

     $(document).ready(function(){
  $("#demo").on("hide.bs.collapse", function(){
    $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
  });

     <div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

     div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>

     $(document).ready(function(){
 $("#demo").on("show.bs.collapse", function(){
    $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});

How to pass data to a modal in Bootstrap ?

     $('#modal_example').on('show.bs.modal', function(e) {
    var myId = $(e.target.relatedTarget).data('my-id');
    $(e.currentTarget).join('input[name="myId"]').val[myId];
});
     $('#modal_example').on('show.bs.modal', function(e) {
    var myId = $(e.relatedTarget).data('my-id');
    $(e.currentTarget).('input["myId"]').val(myId);
});
     $('#modal_example').on('show.bs.modal', function(e) {
    var myId = (e.relatedTarget).data('my-id');
    $(e.currentTarget).('input[name="myId"]').val(myId);
});
     $('#modal_example').on('show.bs.modal', function(e) {
    var myId = $(e.relatedTarget).data('my-id');
    $(e.currentTarget).find('input[name="myId"]').val(myId);
});

In Bootstrap, collapsing elements enables you to _____ any particular element without writing any JavaScript code or the accordion markup?
     Modals
     Popovers
     Collapse
     Carousel
     Tabs

When you are using Active tabs which of the following codes is correct to Select tab by name?
     $('#myTab li:eq(2) a').tab('show');
     $('#myTab a:first').tab('show');
     $('#myTab a[href="#profile"]').tab('show');
     $('#myTab a:last').tab('show');

What are the correct ways to activate tab?  (choose all that apply)
Note: There may be more than one right answer.
     $('#myTab li:eq(2) a').tab('show');)
     $('#myTab a:first').tab('show');
     $('#myTab a:last').tab('show');
     $('#myTab a[href="#profile"]').tab('show');
     $('#myTab li:eq[#], a').tab('show');)

Which of the following code is correct of the previous active tab?

     $('.nav-tabs a').on('shown.bs.tab', function(event){
    var xy = $(event.relatedTarget).previous();  
});

     $('.nav-tabs a').on('shown.bs.tab', function(event){
    var xy = $(event.relatedTarget).back();  
});

     $('.nav-tabs a').on('shown.bs.tab', function(event){
    var xy = $(event.relatedTarget).prev();  
});

     $('.nav-tabs a').on('shown.bs.tab', function(event){
    var xy = $(event.relatedTarget).text();  
});

Following event is fired when the alert has been closed (will wait for CSS transitions to complete)?

     $('#alertexample').bind('hide.bs.alert',
function () {
  // do something...
})

     $('#alertexample').bind('hidden.bs.alert',
function () {
  // do something...
})

     $('#alertexample').bind('close.bs.alert',
function () {
  // do something...
})

     $('alertexample').bind('closed.bs.alert',
function () {
  // do something...
})

You can Enable Carousel Controls using the following code snippet?

     $(".item").click(function(){
    $("#idCarousel").carousel(0);
});
     $("#idCarousel").carousel();
     $(".item").click(function(){
    $("#idCarousel").carousel(1);
});
     $(".left").click(function(){
    $("#idCarousel").carousel("prev");
})

The affix plugin toggles among the following classes? (choose all that apply)
Note: There may be more than one right answer.
     .affix
     affix-bottom
      .affix-top
     None of the above

In Bootstrap, collapsing elements enables you to collapse any element without using external __?
     LESS
     CSS
     JavaScript
     Modal

Following event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete)?

     $('#Tooltipexample').on('shown.bs.tooltip',
function () {
  // do something...
})

     $('#Tooltipexample').on('hide.bs.tooltip',
function () {
  // do something...
})

     $('#Tooltipexample').on('activate.bs.scrollspy',
function () {
  // do something...
})

     $('#Tooltipexample').on('hidden.bs.tooltip',
function () {
  // do something...
})

     $('#Tooltipexample').on('show.bs.tooltip',
function () {
})

The following event is fired immediately when the hide instance method has been called?

       $('#popoverExample').on('show.bs.popover',
function () {
  // do something...
})
       $('#popoverExample').on('shown.bs.popover',
function () {
  // do something...
})
       $('#popoverExample').on('hidden.bs.popover',
function () {
  // do something...
})
       $('#popoverExample').on('hide.bs.popover',
function () {
  // do something...
})

What are the Tab Plugin Classes as follows?
Note: There may be more than one right answer.
     .tab-pane
     .tab-data
     .nav nav-tabs
     .nav-justified
     .nav nav-menu

Following event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab respectively?

     $('a[data-
toggle="tab"]').on('opened.bs.tab',
function (e) {
 e.target
 e.relatedTarget
})

     $('a[data-
toggle="tab"]').on('open.bs.tab',
function (e) {
e.target
  e.relatedTarget
})

     $('a[data-
toggle="tab"]').on('show.bs.tab',
function (e) {
e.target
  e.relatedTarget
})

     $('a[data-
toggle="tab"]').on('shown.bs.tab',
function (e) {
 e.target
 e.relatedTarget
})

The Contextual classes will allow you to change the background color of your table rows or individual cells?
Note: There may be more than one right answer.
     .active: Applies the hover color to a particular row or cell
     .success: Indicates a successful or positive action
     .warning: Indicates a warn or potentially negative action
     .danger: Indicates a alert that might need attention

Bootstrap provides you with following types of form layouts:   (choose all that apply)
Note: There may be more than one right answer.
     Horizontal form
     Inline form
     Outline form
     Vertical (default) form

How can you create disabled link in the Nav component?

     <ul class="nav nav-pils">
  <li class="active"><a href="#">Home Page</a></li>
  <li><a href="#">About Page</a></li>
  <li><a href="#">Service Page</a></li>
  <li class="disables"><a href="#">Contact Page</a></li>
</ul>

     <ul class="nav-pills">
  <li class="active"><a href="#">Home Page</a></li>
  <li><a href="#">About Page</a></li>
  <li><a href="#">Service Page</a></li>
  <li class="false"><a href="#">Contact Page</a></li>
</ul>

     <ul class="nav-pills">
  <li class="active"><a href="#">Home Page</a></li>
  <li><a href="#">About Page</a></li>
  <li><a href="#">Service Page</a></li>
  <li class="disable"><a href="#">Contact Page</a></li>
</ul>

     <ul class="nav nav-pills">
  <li class="active"><a href="#">Home Page</a></li>
  <li><a href="#">About Page</a></li>
  <li><a href="#">Service Page</a></li>
  <li class="disabled"><a href="#">Contact Page</a></li>
</ul>

Scaffolding, Bootstrap provides a basic structure with __ System, link styles, and background?
     Grid
     Navs
     Breadcrumbs
     Forms

The Bootstrap grid system has the following classes?
Note: There may be more than one right answer.
     lg
     sm
     em
     xs
     sx

Bootstrap, Navbars are responsive ‘meta’ ____ that serve as navigation headers for your application or site?
     Images
     Tables
     Images
     Grids
     Components

Is it possible to disable zooming on mobile devices while using Bootstrap?
     No, bootstrap is mobile-first and mobile sites must have ability to zoom in or out
     Yes, but you must have enabled JS and add `data-zoom="off"` on body tag
     Zoom will be disabled only if `width=device-width` is in meta tag with `name="viewport"`
     Zoom will be disabled only if `initial-scale=1, maximum-scale=1` is in meta tag with `name="viewport"`

What will happen if sr-only class is added to some div element?
     div will be visible only for small resolution devices
     div will be visible only for screen readers
     div will slide only to right side
     div will only stay on right side of screen

What media queries breakpoints are available as Less options to make better UI for mobile devices?
Note: There may be more than one right answer.
     width-medium
     media-query-mobile
     screen-xs
     screen-phone
     small-up
     None of these

What will happen if viewport with resolution of 500x800 will rotate to landscape of site which uses custom build of bootstrap?
     items with class `.visible-xs-*` will hide
     Result depends on Less configuration
     items with class `.visible-md-*` will stay hidden
     items with class `.visible-lg-*` will stay hidden

What CSS class is needed to display form inputs one after the other in single row?
     `form-inline-mobile` if viewport is smaller than 768px in width
     `form-inline` if viewport is at least 768px wide
     `form-inline-desktop` if viewport is at least 768px wide
     `form-as-row` if viewport is at least 768px wide
     `form-in-row` if viewport is at least 768px wide
     Can't be done because Bootstrap is mobile first and on mobile form elements are displayed in columns

Is it possible to create responsive image?
     Yes, using helper class: `responsive`
     Yes, using class: `img-responsive`
     Yes, using class `img-responsive` but it will require JavaScript plugins enabled
     Yes, using class `img-rounded` so it's width will be rounded to closest integer by width of viewport
     yes, using class `img-fluid`
     Yes, using class `image-responsive`
     None of these

Responsive utilities are currently only available for block and table toggling in the following classes:
     .visible-sm-block : Small devices (more than 767px and less than 992px in width) visible
     .visible-md-block : Medium devices (up to 768px in width) visible
     .visible-md-block : Medium devices (768px to 980px in width) visible
     .visible-lg : Larger devices (992px and above in width) visible

Is it possible to change table's outline color using provided Less variables?
     No, because it's not possible to change Less configuration. It's used only by core Bootstrap developers.
     Yes, using `table-border-color` variable
     Yes, using `table-outline-color` variable
     Not possible

What scaffolding variables are available to use in classic CSS to override default values?
     body-bg, gray-dark, brand-primary, link-hover-color, link-hover-decoration
     It's not possible to override Less variables in a classic CSS file.
     body-bg, text-color, link-color, link-hover-decoration, link-hover-color
     gray-dark and brand-primary

What preprocessor is used to build Bootstrap?
     LESS
     SASS
     TcSS
     TwitterCSS

Which of the following variables is not available for changing the default settings using LESS?
     @body-bg
     @text-color
     @base-color
     @link-color

What options are available during initialization of carousel?
Note: There may be more than one right answer.
     data-interval
     interval
     key
     active
     data-active
     cycle
     pause

Is it possible to hide something from print view just using Bootstrap CSS classes?
     No, JavaScript plugins are needed to hide elements before sending view to printer.
     Yes
     Yes, just add `visible-print` class to html element
     No

Bootstrap provides a basic page structure with __ System
     Grid
     Navs
     Breadcrumbs
     Forms

What is true about icons in Bootstrap?
     Bootstrap don't provide icons out of the box, but it's possible to use material design, font awesome or any other icons set together with bootstrap.
     If icon is needed after the text of div, icon can be added simply like this: `<div class="glyphicon glyphicon-search">Search</div>`
     Icon classes can be directly combined with any other elements.
     Icon classes should be used only with empty elements
     None of these

Which code will create bootstrap button?
     <button type="button" class="button success">Button</button>
     <button type="button" class="btn btn-success">Button</button>
     <btn class="success">Button</btn>
     <button type="button" class="btn-flat">Button</button>

How bootstrap grid works?
     It's done with flexbox, you just use props like `flex="1"` and `alignItems="center"`
     Bootstrap provides custom classes to make grid. `row` for rows and `span1, span2, span3 etc.` for columns.
     Bootstrap provides custom classes to make grid. `row` for rows and `col-md-3, col-lg-12 etc.` for columns.
     Bootstrap provides custom classes to make grid. `row` for rows and `col-mobile-3, col-tablet-12 etc.` for columns.

What code is used to create navigation?
Note: There may be more than one right answer.
     <ul class="nav nav-pills">...</ul>
     <ul class="dropdown-menus">...</ul>
     <ul class="navigation">...</ul>
     <ul class="nav nav-dropdowns">...</ul>
     <ul class="nav nav-tabs">...</ul>
     <ul class="nav nav-tabs-with-dropdown">...</ul>
     <ul class="menu"></ul>

The Bootstrap grid system has the following class prefixes? (choose all that apply)
Note: There may be more than one right answer.
     col-lg-
     col-sm-
     col-em-
     col-xs-
     col-sx-

What browsers are supported?
     All browsers are supported.
     All versions of Chrome, Firefox, Opera, IE and Safari.
     Chrome, Safari, Firefox that updates automatically are fully supported and IE 8 and 9 are partly supported.
     Chrome, Safari, Firefox that updates automatically are fully supported and IE 8 and 9 are supported only with old IE compatibility modes.

What is Jumbotron?
     Such thing does not exist in bootstrap, it's some word used to describe big TV sets
     It's element to showcase key content
     It's container element to hold grid layout
     It's container element to hold images in full-screen mode

What flexbox model css options can be used together with bootstrap?
     None. Bootstrap does not support flexbox yet.
     only class `row-flex` and `column-flex`
     Any
     flexbox is provided by 3rd party libraries and can not be used together with bootstrap

What is Twitter Bootstrap?
     It's CSS API to build user interfaces while prototyping
     It's HTML, CSS and JavaScript framework to build user interfaces
     It's JS and ECMAScript framework which allows quick CSS changes
     It's part of Twitter UI API
     It's new way to build interfaces

Is it possible to change shape of image file?
     Yes
     Only visual output can be changed
     Yes, but it works only with PNG and JPG images
     No

What is default way to have red button?
     <button type="button" class="btn btn-default">Default</button>
     <button type="button" class="btn btn-default-red">Default as red</button>
     <button type="button" class="btn" color="red">Red</button>
     <button type="button" class="btn btn-red">Red</button>
     <button type="button" class="btn btn-danger">Danger</button>
     <button type="button" class="btn btn-alert">Danger</button>

What is visual difference between <del>text A</del> and <s>text B</s> for end users?
     With `del` tag text looks like deleted text and with `s` tag is used to make strikethrough text
     No visual difference
     There is slight difference for Safari users on Mac, while no difference for any other
     `del` and `s` represent different things and `del` text is also red, while `s` text is just striked through

What is needed to create menu which changes active menu item while scrolling contents of div
     <ul class="nav" id="top_navigation"><li id="part-1">part 1</li><li id="part-2">part 2</li></ul> and contents must be wrapped with such div: <div data-menu="top_navigation"><div id="part-1">contents</div><div id="part-2">contents</div></div>
     Scroll spy can be used which is JS plugin
     You will need some 3rd party lib to make it happen. E.g. jQuery or ReactJS
     Just add navigation with e.g. `data-rel="navigation"` attribute and same div with `data-rel-bind="navigation"`

Bootstrap Тест Upwork 2019