Ad

Friday, April 3, 2020

Bootstrap Basics


  • Bootstrap is a front end framework used to quickly design, organize and beautify a modern website. It generates css fast for common front end patterns and UI elements
  • Each UI element or group of elements is called a component
  • Horizontal containers are called row s
  • Vertical containers are called col s , short for column, can be used in designing grid system
  • Bootstrap allows you to focus more on the html file rather than CSS file, write a bit less CSS
  • And no need to reinvent the wheel : writing common UIs and interactions from scratch
  • Concept : bootstrap requires using specific class names to generate desired design 
  • Pro tip: use margin to organize layout, example: can do margin left auto to push things all the way to the right  mt-3 margin top 3
  • Pro tip : use chrome inspector on Bootstrap sample and tutorial page to see what class, and configurations are used.

Grid system

Bootstrap organizes html contents into grids. Each row of the grid is called a row, each column a column. Each row has 12 columns. 

Make the website responsive

Use media query to query screen size and type. Specify the content parameter to change html content. 

Viewport is the visible area. Be sure to utilize the actual size of the phone, prevent rendering websites as desktop version on mobile device, not pretending it s desktop load. 

<meta name="viewport" content="width=Device-width, initial-scale=1.0">

Bootstrap can detect screen size and label it as lg for large, sm for small. If we use the lg and sm parameter in the class of the html element, we can specify how much space a grid column will take if the screen is small versus large (based on screen size).

<div class="row">
<div class="col-lg-3 col-sm-6"> This is a section.
</div>

<div class="col-lg-3 col-sm-6"> This is another section.
<div>
<div class="col-lg-3 col-sm-6"> This is a third section.
</div>
<div class="col-19-3 col-sm-6"> This is a fourth section.
</div>
</div>

CSS review

Pseudo class : 

selector:pseudo-class {
  property: value;
}

w3schools

example 
a:link {
  color: #FF0000;
}

but more importantly in modern css
::after
::before
are two important pseudo class

p::after { 
  content: " - add a foot note";
}


1 comment:

  1. I was looking for this kind of valuable information. Your article is really helpful for me. Thanks a lot.
    Reliable trustworthy Packers and Movers Bangalore Provide safe and great home transfer Services firm in Bangalore with Sensible Packers and Movers priced Quotation. We Offer homes Shipping, Office valuables sent, Regional and Domestic movement Services, Economical and expert switching Service companies fees

    Nice Packers And Movers Bangalore Local post, we loved each and every thing according to published in your post. Thank you because of this informative article since it's really assistance, I like site. Wonderful!
    Thank you for sharing an informative information@@@@@@@@
    Professional Packers and Movers Bangalore

    ReplyDelete

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid