abc

Share This blog with your friends, so that we can improve more & more . our aim is to easy & simple way of learning.
Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

12/15/2020

What is scrollspy , menu according to scroll.

In this shows moving scroll of page from sticky menu , with simple use of bootstrap. less code use, header is stick and navigation detect if user move scroll , easily current block div of which menu item.


Example

<html lang="en">

<head>

  <title>Bootstrap scroll detect and menu change </title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <style>

  body {

      position: relative; 

  }

  </style>

</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">


<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#Fruit">Fruit</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#Vegitable">Vegitable</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#Electronic">Electronic item</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

Section 4

</a>

<div class="dropdown-menu">

<a class="dropdown-item" href="#section41">laptop</a>

<a class="dropdown-item" href="#section42">cooling items</a>

</div>

</li>

</ul>

</nav>


<div id="Fruit" class="container-fluid bg-success" style="padding-top:70px; padding-bottom:70px">

  <h1>Fruit</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>

<div id="Vegitable" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">

  <h1>Vegitable</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>

<div id="Electronic" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">

  <h1>Electronic item</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>

<div id="laptop" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">

  <h1>laptop</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>

<div id="mobile" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">

  <h1>cooling items</h1>

  <p>Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar Try to scroll or click on menu bar </p>

</div>


</body>

</html>


1) call bootstrap.min.js and css 

2) 'nav-item' & 'nav-item dropdown' using this class name add menubar

3) create div with same id as href link for menu item.


at No comments:
Labels:

Bootstrap Filter table - search into table

1)  Call bootstrap.min.js and CSS

2) make table & one input

3) jQuery keyup function which is useful when start typing it check in table, for each character check using keyup function.

4) filter function default in jQuery


<html lang="en">

<head>

  <title>Bootstrap filter table.</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container mt-3">

<input class="form-control" id="valuetosearch" type="text" placeholder="Search..">


<table class="table table-bordered">

<thead>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Email</th>

</tr>

</thead>

<tbody id="searchintotable">

<tr>

<td>kumar</td>

<td>sample</td>

<td>abc@example.com</td>

</tr>

<tr>

<td>check</td>

<td>hi</td>

<td>check@mail.com</td>

</tr>

<tr>

<td>learn</td>

<td>joy</td>

<td>lear@greatstuff.com</td>

</tr>

<tr>

<td>blog</td>

<td>where</td>

<td>blog@test.com</td>

</tr>

</tbody>

</table>

</div>


<script>

$(document).ready(function(){

  $("#valuetosearch").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#searchintotable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

  });

});

</script>


</body>

</html>

at No comments:
Labels:

12/13/2020

how to create Icons like social media, emoji, alert and other for website, app

 icon can be created,

i) using font family

ii) using js file

iii) using html entity

iv) using css



- using awesome js - in this js all types icon available like emoji, alert, animation, social icon, media & so on.


<head>

<title>Font Awesome Icons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<!--just go to above site and create own js file which is free-->

</head>

<body>


<p>Some Font Awesome icons:</p>

<i class="fas fa-band-aid"></i>

<i class="fas fa-cat"></i>

<i class="fas fa-dragon"></i>

<i class="far fa-clock"></i>


- using font family 


<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>


<i class="fa fa-cloud"></i>

<i class="fa fa-heart"></i>

<i class="fa fa-car"></i>

<i class="fa fa-file"></i>

<i class="fa fa-bars"></i>


</body>

</html>


https://fonts.googleapis.com/icon?family=Material+Icons  this is google icon


- using bootstrap - just use class name glyphicon, glyphicon-trash


<p>Trash icon on a button:

        <button type="button" class="btn btn-default btn-sm">

          <span class="glyphicon glyphicon-trash"></span> Trash 

        </button>

      </p>


all above fonts works on all devices, browser, responsive, easy to load , lightweight.


at No comments:
Labels: ,

How to create Navigation menu using bootstrap

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with navbar navbar-default. 


  1. Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
  2. Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  3. Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
  4. Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. 

navigation item add using nav-item

    <li class="nav-item">

      <a class="nav-link" href="#">Home</a>

    </li>


for dropdown use


 <li class="nav-item dropdown">

      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

        product

      </a>

      <div class="dropdown-menu">

        <a class="dropdown-item" href="#">sample 1</a>

        <a class="dropdown-item" href="#">sample 2</a>

        <a class="dropdown-item" href="#">sample 3</a>

      </div>

    </li>

above all final code,


<!DOCTYPE html>

<html lang="en">

<head>

  <title>Navingation menu with dropdown</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


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

  <!-- Brand -->

  <a class="navbar-brand" href="#">Logo</a>


  <!-- Links -->

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" href="#">Home</a>

    </li>

    <li class="nav-item">

      <a class="nav-link" href="#">about us</a>

    </li>


    <!-- Dropdown -->

    <li class="nav-item dropdown">

      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">

        product

      </a>

      <div class="dropdown-menu">

        <a class="dropdown-item" href="#">sample 1</a>

        <a class="dropdown-item" href="#">sample 2</a>

        <a class="dropdown-item" href="#">sample 3</a>

      </div>

    </li>

  </ul>

</nav>

<br>

<div class="container">

  <h3>Navbar With Dropdown</h3>

  <p>This example adds a dropdown menu in the navbar.</p>

</div>


</body>

</html>

at No comments:
Labels:

how to create alert, toast, tooltip

 in this tutorial give details of how to create alert OR toast OR tooltip on time basis, i.e. auto hide.



$(document).ready(function(){

  $('#myBtn').click(function(){

    $('.toast').toast({delay: 3000});

    $('.toast').toast('show');

  });

});


& call bootstrap supported files


finally, the code like below,

<!DOCTYPE html>

<html lang="en">

<head>

  <title>alert style </title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container mt-3">

  <h1>create toast or alert</h1>

   

  <p>In this example, it will take 3 seconds to hide the toast(alert box), once it is shown. </p>

  <button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>


  <div class="toast mt-3">

    <div class="toast-header">

      Toast Header

    </div>

    <div class="toast-body">

      Some text inside the toast body

    </div>

  </div>

</div>


<script>

$(document).ready(function(){

  $('#myBtn').click(function(){

    $('.toast').toast({delay: 3000});

    $('.toast').toast('show');

  });

});

</script>


</body>

</html>


in above use jquery set delay in alert box and autohide.


useful to show messages or warning, success, error messages .

for example data is saved message for this also good to use toast.

at No comments:
Labels: ,

how to create carousel or slider

 carousel terms defined as multiple images with text or without text show after one by one within same block.

in below example shows slider which is fully responsive and auto timer just use css


 .carousel-inner img {

    width: 100%;

    height: 100%;

  }


add images and text 


<div class="carousel-item active">

  <img src="la.jpg" alt="India" width="1100" height="500">

  <div class="carousel-caption">

<h3>India</h3>

<p>sample text here</p>

  </div>   

</div>



finally , makes complete code as below


<!DOCTYPE html>

<html lang="en">

<head>

  <title>carousel or slider Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <style>

  /* Make the image fully responsive */

  .carousel-inner img {

    width: 100%;

    height: 100%;

  }

  </style>

</head>

<body>


<div id="demo" class="carousel slide" data-ride="carousel">

  <ul class="carousel-indicators">

    <li data-target="#demo" data-slide-to="0" class="active"></li>

    <li data-target="#demo" data-slide-to="1"></li>

    <li data-target="#demo" data-slide-to="2"></li>

  </ul>

  <div class="carousel-inner">

    <div class="carousel-item active">

      <img src="india.jpg" alt="India" width="1100" height="500">

      <div class="carousel-caption">

        <h3>India</h3>

        <p>Sample text here</p>

      </div>   

    </div>

    <div class="carousel-item">

      <img src="asia.jpg" alt="asia" width="1100" height="500">

      <div class="carousel-caption">

        <h3>asia</h3>

        <p>Thank you, asia!</p>

      </div>   

    </div>

    <div class="carousel-item">

      <img src="africa.jpg" alt="africa" width="1100" height="500">

      <div class="carousel-caption">

        <h3>africa</h3>

        <p>Sample Text here</p>

      </div>   

    </div>

  </div>

  <a class="carousel-control-prev" href="#demo" data-slide="prev">

    <span class="carousel-control-prev-icon"></span>

  </a>

  <a class="carousel-control-next" href="#demo" data-slide="next">

    <span class="carousel-control-next-icon"></span>

  </a>

</div>


</body>

</html>


above code is very simple to use, fast load, responsive.

we can also create slider using other programming lanuage also like jquery slider, css slider


at No comments:
Labels:

how to create pagination in html, bootstrap


1) create multiple page on single webpage

2) manage product or content or record from database using pagination method

3) large mysql data content want to fetch but it should easy to view in that case use pagination method.

4) Pagination is a method of dividing web content into discrete pages, thus presenting content in a limited and digestible manner. This method is usually employed to display resulting items on a website.  



<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Pagination</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container">

  <h2>Pagination</h2>

  <p>this use to manage large content in pagination style like book content maintain over multiple pages because not possible on same page, control page size</p>                  

  <ul class="pagination">

    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>

  </ul>

  <ul class="pagination justify-content-center">

    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>

    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>

  </ul>

   

</div>


</body>

</html>


just call page-item class , in bootstrap all style are predefined with some class name , just find that class name and use it. for example page-link is default class in bootstrap


Thank you for viewing blog, please comment if any query.


at No comments:
Labels: ,

how to create loading spinner or loading symbol

creating spinner or loader when loads webpage or any div or block , saving data state.

let us see small example,

 <!DOCTYPE html>

<html>

<head>

  <title>Bootstrap Example</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>


<div class="container">

  <h2>Colored Spinners</h2>

  <p>Use any color utilites to add a color to the spinner:</p>

                                        

  <div class="spinner-border text-muted"></div>

  <div class="spinner-border text-primary"></div>

  <div class="spinner-border text-success"></div>

  <div class="spinner-border text-info"></div>

  <div class="spinner-border text-warning"></div>

   

</div>

</body>

</html>

in above example first call bootstrap.min.js and bootstrap.min.css, then use spinner-border class as above declare

Application  - this is useful when loading page, loading div, or button when submit

Notes - above files bootstrap.min.js and bootstrap.min.css are free to use.

at No comments:
Labels: , ,
Subscribe to: Posts (Atom)

An Introduction to the Laravel Framework: What It Is and Why You Should Use It

  If you're a PHP developer looking for a modern, efficient, and powerful framework to build web applications, look no further than Lara...