BootStrap Advanced #2

DropDowns:

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list

The .dropdown class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.

Add the .dropdown-menu class to a <div> element to actually build the dropdown menu. Then add the .dropdown-item class to each element (links or buttons) inside the dropdown menu.

Example :

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border

Example:

<div class="dropdown-divider"></div>


Collapse:

Collapsibles are useful when you want to hide and show large amount of content

Example:

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button.

To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">)

By default, the collapsible content is hidden. However, you can add the .show class to show the content by default.

Example:

<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>

Navigation Menu:

If you want to create a simple horizontal menu, add the .nav class to a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links

Example:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Add the .justify-content-center class to center the nav, and the .justify-content-end class to right-align the nav.

Example:

<!-- Centered nav -->
<ul class="nav justify-content-center">

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">

Add the .flex-column class to create a vertical nav.

NavBar:

A navigation bar is a navigation header that is placed at the top of the page.

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens)

Example:

<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav>

Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar.




Comments

Post a Comment

Popular posts from this blog

CSS Advanced #2

  CSS  The object-fit Property: The CSS   object-fit   property is used to specify how an <img> or <video> should be resized to fit its container. Example :  img  {   width :  200px ;   height :  400px ;   object-fit :  cover ; } All Values of The CSS object-fit Property The  object-fit  property can have the following values: fill  - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit contain  - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box cover  - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit none  - The replaced content is not resized scale-down  - The content is sized as if none or contain were specified (would result in a smaller co...
Read more

Java Basics #4

  Java  Math The Java Math class has many methods that allows you to perform mathematical tasks on numbers. Math.max( x,y ) The  Math.max( x , y )  method can be used to find the highest value of  x  and  y. Example: Math.max(5, 10); Math.min( x,y ) The  Math.min( x , y )  method can be used to find the lowest value of  x  and  y. Example: Math.min(5, 10); Math.sqrt( x ) The  Math.sqrt( x )  method returns the square root of  x. Example: Math.sqrt(64); Math.abs( x ) The  Math.abs( x )  method returns the absolute (positive) value of  x. Example: Math.abs(-4.7); Random Numbers Math.random()  returns a random number between 0.0 (inclusive), and 1.0 (exclusive). Example: Math.random(); To get more control over the random number, e.g. you only want a random number between 0 and 100, you can use the following formula. Example: int randomNum = (int)(Math.random() * 101);  // 0 to 100 More Math ...
Read more

Java Basics #1

Simple Java program: public class Main {   public static void main(String[] args) {     System.out.println("Hello World");   } } Every line of code that runs in Java must be inside a  class . In our example, we named the class  Main . A class should always start with an uppercase first letter. The main Method The  main()  method is required and you will see it in every Java program. Any code inside the  main()  method will be executed. You don't have to understand the keywords before and after main. System.out.println() Inside the  main()  method, we can use the  println()  method to print a line of text to the screen. Java Comments Comments can be used to explain Java code, and to make it more readable. It can also be used to prevent execution when testing alternative code. Single-line comments start with two forward slashes ( // ). Java Variables Variables are containers for storing data values. In Java, there are d...
Read more