BOOTSTRAP
Alert message: Alerts can be created very easily through Bootstrap. Bootstrap alerts can be created using the .alert class and any of these classes. For example: .alert-success, alert-info, alert-warning or alert-danger :
Example:
<!DOCTYPE html>
<link rel="stylesheet"
<head>
<title> Bootstrap Alert 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.1.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> Alert Message </h2>
<div class="alert alert-success">
<strong> Success!</strong> Success or positive actions are predicted by this box.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This box indicates any changes or information that is informative
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Alerts or warnings by this box
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This box means dangerous messages or negative actions.
</div>
</div>
</body>
</html>
Close alert: To close the alert box add class="close" and data-dismiss="alert" attribute to the <a> element.
Animated Alert: Add .fade and .in classes to the .alert class to add a fading effect when the alert message is closed.
Use of collapse:
"Collapse" is used to hide and toggle large content. The following example shows a basic collapsible:
<! DOCTYPE html>
<html>
<head>
<title> Bootstrap Collapse 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.1.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">
<h3> Examples of basic collansibles </h3>
<button type="button" class="btn btn-info" data-toggle="collapse" data target="#collapse"> Basic collansibles </button>
<div id="collapse" class="collapse">
</div>
</div>
</body>
</html>
Example Explanation: A collapsible element is defined by the collapse class. Clicking the button shows the content and clicks it away.
To control (show/hide) collapsible content, add the data-toggle="collapse" attribute to the <a> or <button> element.
Then add the data-target="#idName" attribute to attach the collapsible content <div id="collapse"> to the button or link. By default, collapsible content is hidden. Add the .in class to keep the content displayed by default.
Carousel plugin :
A carousel plugin is a component for cycling between elements, such as a carousel (slideshow).
(Bootstrap can use a separate "carousel.js" file to use the Carousel plugin or bootstrap's full js file "bootstrap.js" or "bootstrap.min.js" file.
Bootstrap's complete js file contains all of Bootstrap's components together. (To use the carousel component, include any of the above files in the web page.)
Carousels are not well supported in Internet Explorer (IE) 9 and earlier versions (because Internet Explorer uses CSS (3) transitions and animations to support slide effects. The following example shows how to create a basic carousel:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel 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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img
.carousel-inner > .item > a > img
width i:80\% ; margin: auto;
</style>
</head>
<body>
<div class="container">
<div id="carouselld" class="carousel slide" data-ride="carousel">
<! Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselld" data-slide- to="0" class="active"> </li>
<li data-target="#carouselld" data-slide-to ="1"> </li>
<li data-target="#carouselld" data-slide-to ="2"> </li>
<li data-target="#carouselld" data-slide-to ="3"> </li>
</ol>
<! -- Slide Part -->
<div class="carousel-inner" role="listbox"> <div class="item active">
<img src ="nilgiri.ipg" alt="Nilgiri" width="460" height="345">
</div>
<div class="item">
<img src="paris.jpg" alt="Paris Tower" width="460" height="345">
</div>
<div class="item">
<img src="triangle.jpg" alt="Triangle" width="460" height="345">
</div>
<div class="item" >
<img 9 src=^ prime prime doI " alt="Doha Qatar "width="460"height="345">
</div>
<!- Controllers are designed to go before and after -->
<a class="left carousel-control" href="#carouselld" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselld" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="item">
</div> </div>
</body>
</html>
Explanation of examples
outermost <div>:
An ID is used in the carousel to control the carousel through the function (in this case class="carousel" is used to indicate that this <div> is carrying a carousel.
Added CSS transitions and animation effects via the slide class. Displays the new item as a slide when displayed.
If this effect is not needed, this class can be omitted if desired. The data-ride="carousel" attribute instructs Bootstrap to start the animation as soon as the page loads.
“Indicators” Part:
Indicators are the small circles below each slide (indicating how many slides are in the carousel and which slide the user is currently viewing).
Indicators are specified in an ordered list, using the carousel-indicators class. The ID of the carousel is specified by the data-target attribute. The data-slide-to attribute is used to specify which slide will be taken when the user clicks on the specified dot.
"Wrapper for slides" part
Slides must be placed inside a <div> element with the .carousel-=inner class. The contents of each slide must be placed inside a <div> element with the .item class. Content can be text or images. Any slide must have the .active class added. Otherwise the carousel will not be visible.
"Left and right control" part: These codes represent "previous" and "next", through which a user can manually view the previous and next slides if desired. The data-slide attribute accepts the "prev" or "next" keyword, which changes the slide from the relative position to the current position.
Modal plugin:
A modal plugin is a dialog box/pop-up window that appears on top of the current page.
Bootstrap's separate "modal.js" file can be used to use the modal plugin, or Bootstrap's full js file "bootstrap.js" or "bootstrap.min.js" can be used. Bootstrap's complete js file contains all of Bootstrap's components together. To use the modal component just include one of the above files in the web page. The following example shows how to create a basic modal:
Example:
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap Modal Example</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, rel="stylesheet" initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.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">
<h3>Examples of modals </h3>
<!--Modal trigger via button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data target="#modalld">
</button>
<!-- Modal -->
<div class="modal fade" id="modalld" role="dialog">
<div class="modal-dialog">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title"> Modal Header </h4>
</div>
<div class="modal-body">
<p> Model body. Here the model content is kept. </p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss='modal"> Close </button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Explanation of examples
</html>
Explanation of examples
“Trigger” part:
A button or link must be used to trigger the modal window. Then the button or link must include the following two data-* attributes:
• data-toggle="modal" This opens the modal window।
• data-target="#modal"It refers to the ID of the model.
“Modal” part:
The parent <div> of the modal must have an id
must exist and its value must be the same as the data-target attribute, which is used to trigger the modal ("myModal").
The modal class identifies the content of the <div> element as modal and creates focus within it. Added transition effect to modal via .fade class. This class can be omitted if desired. The role="dialog" attribute is used to improve accessibility for screen readers. The .modal-dialog class ensures proper width and margin for the modal।
“Modal Content” Part:
A <div> element with class="modal-content" styles the modal (border, background-colour, etc.). Within this <div> element, add the modal header, modal body and modal footer.
The .modal-header class is used to style the modal's header. The header <button> element contains the data dismiss="modal" attribute, which can be clicked to close the modal. The close class styles the close button and the .modal-title class styles the modal header with the appropriate line height. The .modal-body class is used to style the body of the modal. HTML markup as needed in headers
tags can be used. Eg: paragraphs, images, videos etc.
The .modal-footer class is used to style the modal footer. This section is right-aligned by default.
Comments
Post a Comment