<!DOCTYPE html>
2. CSS, Javacript and jquery online classes or Offline classes
Online CSS, Javacript and jquery Classes :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jQuery-2.1.3.min.js"></script>
Offline CSS, Javacript and jquery Classes :
- If you want offline CSS,Javacript and jquery Classes, you can click this link and download. Website - https://getbootstrap.com/
- After download the .zip file, extract and copy your appropriate html documents file path .
- And You have to mention that what are the file location in the class files ( File location you have to specify )
Example: Resourse file (Download Link)
3. HTML <head> tag international stantards
<head>
<title>PHP CRUD</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jQuery-2.1.3.min.js"></script>
</head>
4. Buttons css Classes
I .Buttons
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
II. Combined Buttons
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Left</button>
<button type="button" class="btn btn-success">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-info">Middle</button>
<button type="button" class="btn btn-info">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-warning">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-danger">Middle</button>
<button type="button" class="btn btn-danger">Right</button>
</div>
<hr />
<div class="btn-group">
<button class="btn btn-default" type="button">1</button>
<button class="btn btn-default" type="button">2</button>
<button class="btn btn-default" type="button">3</button>
<button class="btn btn-default" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-primary" type="button">1</button>
<button class="btn btn-primary" type="button">2</button>
<button class="btn btn-primary" type="button">3</button>
<button class="btn btn-primary" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-success" type="button">1</button>
<button class="btn btn-success" type="button">2</button>
<button class="btn btn-success" type="button">3</button>
<button class="btn btn-success" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-info" type="button">1</button>
<button class="btn btn-info" type="button">2</button>
<button class="btn btn-info" type="button">3</button>
<button class="btn btn-info" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-warning" type="button">1</button>
<button class="btn btn-warning" type="button">2</button>
<button class="btn btn-warning" type="button">3</button>
<button class="btn btn-warning" type="button">4</button>
</div>
<div class="btn-group">
<button class="btn btn-danger" type="button">1</button>
<button class="btn btn-danger" type="button">2</button>
<button class="btn btn-danger" type="button">3</button>
<button class="btn btn-danger" type="button">4</button>
</div>
5. <Form> Tag css classes
<div class="row justify-content-center">
<form action="process.php" method="POST">
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" class="form-control" placeholder="Enter your name"/>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" name="location" class="form-control" placeholder="Entet your location"/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" name="save">Save</button>
</div>
</form>
</div>
6.<table> tag css classes
<div class="row justify-content-center">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th clospan="2">Action</th>
</tr>
<tbody>
<tr>
<td>Name</td>
<td>Address</td>
</tr>
</tbody>
</thead>
</table>
</div>
7.How to align the whole webpage info in center
<div class="container">chyontent...</div>
8. Alert css classes
<div class="contents boxpadding">
<a class="togglethis">Toggle</a>
<div class="alert alert-success">
<strong>Well done!</strong>
You successfully read this important alert message.
</div>
<div class="alert alert-info">
<strong>Heads up!</strong>
This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong>
Best check yo self, you're not looking too good.
</div>
<div class="alert alert-danger">
<strong>Oh snap!</strong>
Change a few things up and try submitting again.
</div>
</div>
No comments:
Post a Comment