Skip to main content

Posts

Showing posts from 2018

Jquery Form Validation Example

<html> <head> <script src="jquery.min.js"> </script> <script> $(document).ready(function() {   $('#first_form').submit(function(e) {     e.preventDefault();     var first_name = $('#first_name').val();     var last_name = $('#last_name').val();     var email = $('#email').val();     var password = $('#password').val();     $(".error").remove();     if (first_name.length < 1) {       $('#first_name').after('<span class="error">This field is required</span>');     }     if (last_name.length < 1) {       $('#last_name').after('<span class="error">This field is required</span>');     }     if (email.length < 1) {       $('#email').after('<span class="error">This field is required</span>');     } else {       var regEx = /^[A-Z0-9][A-Z0-9._%+-]{0,63}@(?:[
9 comments
Read more

Bootstrap Tables

Bootstrap table examples <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap 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/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>Bordered Table</h2>   <p>The .table-bordered class adds borders to a table:</p>              <table class="table table-bordered">     <thead>       <tr>         <th>Firstname</th>         <th>Lastname
3 comments
Read more

Bootstrap Nav Bar

Bootstrap Nav Bar <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap 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/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">WebSiteName</a>     </div>     <ul class="nav navbar-nav">       <li class=&quo
1 comment
Read more

Bootstrap slider

Bootstrap slider <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap 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/3.3.7/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <h2>Carousel Example</h2>   <div id="myCarousel" class="carousel slide" data-ride="carousel">     <!-- Indicators -->     <ol class="carousel-indicators">       <li data-target="#myCarousel" data-sl
6 comments
Read more

how to import another css file inside another css file.

(1)crete  a css file by name ok.css: .myclass{ background-color:yellow; } (2)create  a file name  file name ok1.css: @import url("ok.css"); /* Using a url */ .second{ color:red; } (3)now write html code  importcss.html: <html> <head> <link rel="stylesheet"  href="ok1.css"> </head> <body class="myclass second"> jjjjj </body> </html>
3 comments
Read more

CSS Styling Tables

Css  styling in tables example:- <!DOCTYPE html> <html> <head> <style> #customers {     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;     border-collapse: collapse;     width: 100%; } #customers td, #customers th {     border: 1px solid #ddd;     padding: 8px; } #customers tr:nth-child(even){background-color: #f2f2f2;} #customers tr:hover {background-color: #ddd;} #customers th {     padding-top: 12px;     padding-bottom: 12px;     text-align: left;     background-color: #4CAF50;     color: white; } </style> </head> <body> <table id="customers">   <tr>     <th>Company</th>     <th>Contact</th>     <th>Country</th>   </tr>   <tr>     <td>Alfreds Futterkiste</td>     <td>Maria Anders</td>     <td>Germany</td>   </tr>   <tr>     <td>Berglunds snabbköp</td&
2 comments
Read more

css form

<!DOCTYPE html> <html> <head> <style> input[type=text] {     width: 100%;     padding: 12px 20px;     margin: 8px 0;     box-sizing: border-box;     border: 2px solid red;     border-radius: 4px; } input[type=text]:focus {     background-color: lightblue; } textarea {     width: 100%;     height: 150px;     padding: 12px 20px;     box-sizing: border-box;     border: 2px solid #ccc;     border-radius: 4px;     background-color: #f8f8f8;     font-size: 16px;     resize: none; } select {     width: 100%;     padding: 16px 20px;     border: none;     border-radius: 4px;     background-color: #f1f1f1; } input[type=submit] {     background-color: #4CAF50;     border: none;     color: white;     padding: 16px 32px;     text-decoration: none;     margin: 4px 2px;     cursor: pointer; } </style> </head> <body> <p>Form with CSS</p> <form>   <label for="fname">First Nam
1 comment
Read more

Bootstrap Grid System guidance

Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1  span 4  span 4  span 4 span 4 span 8 span 6 span 6 span 12 Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size. Grid Classes The Bootstrap grid system has four classes: xs  (for phones - screens less than 768px wide) sm  (for tablets - screens equal to or greater than 768px wide) md  (for small laptops - screens equal to or greater than 992px wide) lg  (for laptops and desktops - screens equal to or greater than 1200px wide) The classes above can be combined to create more dynamic and flexible layouts. Grid System Rules Some Bootstrap grid system rules: Rows must be placed within a  .container  (
4 comments
Read more