Skip to main content

BOOTSTRAP Modal, plugins

 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">

The modal should be opened

</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.







Labels:

Comments

Post a Comment

Popular posts from this blog

What are the things to consider when buying a WiFi or broadband router for home, office, park and restaurant ?

Today we talk about What are the things to consider when buying a WiFi or broadband router for home, office, park and restaurant .I never like huge introduction about any topic . I always like very shortly introduce any-things to my viewers without any-type boring .So let's began the leanrning :- 1. Decide in advance how many devices you will use. 2. Decide how much space you need coverage. 3. Understand the structure of your home. WiFi signals become weak to penetrate the walls. That is why good coverage is not available. If you have a lot of walls in your house and you want to get coverage in the whole house, then you need a router with high power and wall penetration feature. 4. Decide what features you need in addition to the internet connection. Such as: - 4.1 3G 4G Modem Support- There are many routers that can use the modem. Those routers have a USB port and a one port so that broadband lines can be used. But remember that the modem must have the ability to auto-connect. Not...
Post a Comment
Read more

What should the processor look at?

The things that we all should keep an eye on are the processor or not; 1. Clock speed 2. Number of course 3. cache memory 4. FBS 1. Clock Speed: It is also called GH2. All processors are written on. Clock speed means how fast your computer can work. That's what this signal means. The speed of the processor is known through this clock speed, how fast the calculation can be done. 2. Number of Cores: The more cores the processor has, the faster the processor can work. If I give an example to explain the matter, I hope you can understand it very easily. Suppose if a person had many hands, then he could do many things at the same time. That is, if we go to the market and buy a smartphone, then we will see what the configurations of the phone are. If we look closely at the configuration of the smartphone, we will see that Dual Core Processor, Quad Core Processor, Octa core processor, Hexa core processor, Deca core processor. This means that the dual core processor has two arms or cores, ...
Post a Comment
Read more

What is transmission media? Introduction to different types of data transmission cables

Transmission media: When a PC communicates or wants to communicate with another PC, it has to take the help of some transmission media. The most commonly used media in the network are twisted pair cable, coaxial cable, fiber optic cable. Nowadays, the use of optical fiber is increasing greatly. Radio wave, microwave and infrared technologies are prominent among wireless media. Among these mediums, optical fiber has the highest data transfer speed. The type of medium used in a network depends on the type and location of that network. The connection system for exchanging information between the sender and the remote receiving end is called a channel. The means or methods used to implement the channel are called media. such as-- (i) Cable or wire. (ii) Common telephone lines. (ii) Radio waves. (iv) Microwave. (v) Geo-satellite systems etc. Cable or Wire: Cable is an important medium in data communication. Cables are generally used for data transfer over short range networking such as LAN...
Post a Comment
Read more