BootStrap study notes

1. Main content

2. Installation and use of BootStrap

2.1 Introduction to BootStrap

Official website: http://getbootstrap.com/

Bootstrap is a set of ready-made CSS styles (still very friendly). It's from two Twitter employees.

Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile-first WEB projects.

In 2011, in order to improve their internal analysis and management capabilities, twitter's "a handful" of engineers built a set of easy-to-use, elegant, flexible, and extensible front-end tools for their products in their spare time. – BootStrap. Bootstrap was designed and built by MARK OTTO and Jacob Thornton. After opening source on github, it quickly became the most watch&fork of items on the site Engineers actively contribute code to the project. The community is surprisingly active. Code versions evolve rapidly. The quality of official documentation is extremely high (it can be said that it is elegant). At the same time, many of the bootstrap based stations have emerged: the interface is fresh and consult; the layout of elements is neat and generous.

Bootstrap is especially suitable for teams without designers (even teams without front-end), and can quickly create a web page.

2.2. BootStrap Features

Concise, intuitive and powerful front-end development framework, html, css, javascript toolsets, make web development faster and easier.
Based on html5, css3, bootstrap has a lot of attractive features: friendly learning curve, excellent compatibility, responsive design, 12-column grid, style guide documentation.
Custom JQuery plugin, complete class library, bootstrap3 is based on Less, bootstrap4 is based on Sass CSS preprocessing technology
Bootstrap's responsive layout design makes a website compatible with devices of different resolutions. Bootstrap's responsive layout design provides users with a better visual experience.
rich components

2.3. Download and use

download: http://v3.bootcss.com/getting-started/
After the download is complete

Copy bootstrap.min.css from dist/css to project css Copy bootstrap.min.js from dist/js to project js

download jquery.js

http://jquery.com/

In html the template is:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--use X-UA-Compatible to set IE Browser Compatibility Mode Latest Rendering Mode-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 
viewport Indicates whether the user can zoom the page; width Specifies the logical width of the viewport;
device-width Indicates that the viewport width should be the device's screen width; initial-scale Directives are used to set Web Initial scaling of the page initial-scale=1 will display the unscaled Web text gear
 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap of HTML Standard template</title>
<!-- load Bootstrap of css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
	<h1>Hello, world!</h1>
	<!-- If you want to use Bootstrap of js plugin, must be called first jQuery -->
	<script src="js/jquery-3.4.1.js"></script>
	<!-- include all bootstrap of js Plugins or can be used as needed js plugin call -->
	<script src="js/bootstrap.min.js"></script>
</body>
</html>

Notice:

Currently, plugins that do not use jquery can not import js files, this is to ensure the integrity of the template.

illustrate:

The viewport tag specifies whether the user can zoom the Web page
The width and height directives specify the logical width and height of the viewport, respectively. Their value is either a number in pixels or a special marker symbol.
The width directive uses the device-width flag to indicate that the viewport width should be the device's screen width. The height directive uses the device-height flag to indicate that the viewport height is the device's screen height.
The initial-scale directive is used to set the initial scale of the Web page. The default initial zoom ratio value varies by smartphone browser. Normally, the device will render the entire Web page in the browser. Setting it to 1.0 will display the Web document without scaling.

Reference API

http://v3.bootcss.com/css/

3. Layout container and grid grid system

3.1. Layout container

1. The .container class is used for containers with fixed width and supports responsive layout.

<div class="container">
	...
</div>

2. The .container-fluid class is used for containers that are 100% wide and occupy the entire viewport.

<div class="container-fluid">
	...
</div>

3.2. Grid grid system

Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases. The grid system is used to create page layouts through a series of row and column combinations into which your content can be placed.

The implementation principle of the grid system of is often simple. It is only by defining the container The grid system in the Bootstrap framework is to divide the container into 12 equal parts.

Note: The grid system must use css.

** container,row ,xs (xsmall phones)，sm (small tablets)，md (middle desktops)，lg (larger desktops)**

Namely: Ultra Small Screen (Auto), Small Screen (750px), Medium Screen (970px) and Large Screen (1170px)

Data rows (.row) must be contained in a container (.container) to give them proper alignment and padding.

Columns (.column) can be added to the row (.row), only the column (column) can be used as a direct child element of the row container (.row), but the sum of the number of columns cannot exceed the total number of columns divided equally, such as 12 . If it is greater than 12, it will automatically wrap to the next line.

The specific content should be placed in the column container (column)

<div class="container">
	<div class="row">
		<div class="col-md-4">4 List</div>
		<div class="col-md-8">8 List</div>
	</div>
</div>

3.2.1. Column Combinations

The simple understanding of column combination is to change the number to merge columns (principle: the total number of columns cannot exceed 12, and if it is greater than 12, it will automatically switch to the next row) similar to the colspan attribute of the table.

<div class="container">
	<div class="row">
		<div class="col-md-4">4 List</div>
		<div class="col-md-8">8 List</div>
	</div>
	<div class="row">
		<div class="col-md-2">2 List</div>
		<div class="col-md-10">10 List</div>
	</div>
</div>

3.2.2. Column offset

If we don't want two adjacent columns to be close together, but don't want to use margin s or other technical means. At this time, you can use the column offset function to achieve this. Using column offset is also very simple, just add the class name "col-md-offset-*" to the column element (where the asterisk represents the number of column combinations to be offset), then the column with this class name is will be offset to the right. For example, you add "col-md-offset-8" to the List element, which means that the List moves 8 List widths to the right (ensure that the total number of List and offset List does not exceed 12, otherwise the meeting will cause the List to be disconnected and the newline display)

<div class="container">
	<div class="row">
		<div class="col-md-1">1 column</div>
		<div class="col-md-1">2 column</div>
		<div class="col-md-1 col-md-offset-8">11 column</div>
		<div class="col-md-1">12 column</div>
	</div>
</div>

3.2.3. Column sorting

Column sorting is actually changing the direction of the column, that is, changing the left and right floating, and setting the floating distance. In Bootstrap's grid system this is done by adding the class names col-md-push-* and col-md-pull-* (where the asterisk represents the number of column combinations to move). pull forward, push backward.

<div class="container">
	<div class="row">
		<div class="col-md-1 col-md-push-10">1 column</div>
		<div class="col-md-1 col-md-pull-1">1 column</div>
	</div>
</div>

3.2.4. Column Nesting

The grid system of the Bootstrap framework also supports nesting of columns. You can add one or more row containers to a column, and then insert columns into the row container.

<div class="container">
	
<div class="row">
		<div class="col-md-2">
			I have a grid nested inside
			<div class="row">
			<div class="col-md-9">9</div>
			<div class="col-md-3">3</div>
		</div>
	</div>
	<div class="col-md-10">I have a grid nested inside
		<div class="row">
			<div class="col-md-10">10</div>
			<div class="col-md-2">2</div>
		</div>
	</div>
	</div>
</div>

4. Common styles

4.1. Typography

4.1.1. Title

Bootstrap is the same as a normal HTML page. The title is defined using tags, but Bootstrap overrides its default style and uses it to display the same effect in all browsers. In order to use the same style for non-heading elements and headings, six class names .h1~.h6 are specially defined. At the same time, it can be followed by a small subtitle or use .small

<h1> h1. Bootstrap heading<small>subtitle</small></h1>
<div class="h1"> Bootstrap Title 1<span class="small">subtitle</span></div>

4.1.2. Paragraphs

Paragraphs are one of the other important elements in typography. Highlight the content with .lead (its role is to increase the text size, bold the text,

And the row height and margin are also processed accordingly. Text can be highlighted using the following tags:

<p class="lead"><small> after</small><b>you</b>meeting<i> grateful</i>Now<em>Effort</em>of<strong>
you</strong></p>

4.1.3. Emphasis

A set of class names is defined, which is called the emphasis class name. These emphasis classes are all emphasized by color. The description is as follows:

.text-muted: hint, use light gray (#999)

.text-primary: primary, use blue (#428bca)

.text-success: success, in light green *(#3c763d)*

.text-info: notification info, use light blue (#31708f)

.text-warning: warning, use white color (#8a6d3b)

.text-danger: Dangerous, use brown (#a94442)

<div class="text- muted"> prompt effect</div>
<div class="text- primary"> main effect</div>
<div class="text- success"> success effect</div>
<div class="text- info"> information effect</div>
<div class="text- warning"> warning effect</div>
<div class="text- danger"> dangerous effect</div>

4.1.4. Contrast effect

text-align is often used in CSS to achieve text alignment settings.

There are four main formats:

Left facing, take the value left ;

Center alignment, value *center; *

Align right, take the value right ;

The two ends are aligned, and the value is justify.

In order to simplify the operation and make it easier to use, Bootstrap controls the formatting of the text by defining four class names:

.text-left: Align left

.text-center: center alignment

.text-right: right alignment

.text-justify: Justify both ends.

<p class="text- left"> I'm on the left</p>
<p class="text- center"> I am centered</p>
<p class="text- right"> I'm on the right</p>
<p class="text- justify"> The implementation principle of the grid system is very simple, just by defining the size of the container, it is divided into 12 equal parts( There are also splits of 24 or 32, but 12 is the most common) ，
Then adjust the inner and outer margins, and finally combine media queries to create a powerful responsive grid system. Bootstrap The grid system in the framework is to divide the container into 12 equal parts</p>

4.1.5. List

In HTML documents, there are three main list structures:

go to point list

**class="list-unstyled"**

<ul class="list-unstyled">
	<li>unordered item list one</li>
	<li>Unordered item list II</li>
</ul>

inline list

**class="list-inline"**

Changes the vertical list to a horizontal one, and removes the bullets (numbers), keeping the horizontal display. It can also be said that inline lists are made for horizontal navigation.

<ul class="list-inline">
	<li>Homepage</li>
	<li>java college</li>
	<li>online class</li>
</ul>

Definition list

Added some styles to the original base, using the style class="dl-horizontal" to make a horizontal definition list: When the title width exceeds 160px, three ellipses will be displayed. **

<dl>
	<dt> HTML</dt>
	<dd> Hypertext Markup Language</dd>
	<dt> CSS</dt>
	<dd> Cascading Style Sheets is a style sheet language</dd>
</dl>

<dl class="dl-horizontal">
	<dt> HTML Hypertext Markup Language</dt>
	<dd> HTML Called Hypertext Markup Language, it is a language of identification.</dd>
	<dt> Test titles cannot exceed 160 px Width of, otherwise 2 points</dt>
	<dd> I'm writing a level definition list effect, I'm writing a level definition list effect.</dd>
</dl>

4.1.2. Code

It is generally used more frequently on personal blogs to display the code format.

There are mainly three code formats provided in Bootstrap:

(1) Single line of inline code ** **

<code> this is a simple code</code>

(2) Multi-line block code

Style: pre-scrollable (height,max-height fixed height *, is 340px, more than there is a scroll bar)*

<!-- The code will retain its original formatting, including spaces and newlines  -->
<pre>
public class HelloWorld {
	public static void main(String[] args){ System.out.println("helloworld...");
	}
}
</pre>
<!--
show html The code for the label needs to be adapted to the character entity
 less than sign (< )To use hardcoding "&lt;"instead, the greater-than sign(>)Use "&gt;"to replace
-->
<pre>
&lt;ul&gt;
&lt;li&gt; test entity symbol &lt;/li&gt; &lt;/ul&gt;
</pre>
<!-- When the height is exceeded, there will be a scroll bar -->
<pre class="pre-scrollable">
<ol>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
<li>	</li>
</ol>
</pre>

(3) Use ***<kbd>****</kbd>** to display Use user input to enter code * * *, * * * such as shortcut key

<p>use<kbd>ctrl+s</kbd>save</p>

4.1.7. Tables

1. Table style

Bootstrap provides 1 base style and 4 additional styles for tables and 1 responsive table. In the process of using Bootstrap's form, you only need to add the corresponding class name to get different form forms.

basic style

.table: Additional styles for the base table

.table-striped: Striped table

.table-bordered: table with borders

.table-hover: The table highlighted by mouse hover

.table-condensed: a compact table with no padding or smaller padding than other tables

2. tr, th, td styles

Five different class names are provided, each controlling a different background color for the row

kind	describe	example
.active	Apply hover color to row or cell	#f5f5f5
.success	Indicates a successful operation	#dff0d8
.info	Actions that represent changes in information	#d9edf7
.warning	Action indicating a warning	#fcf8e3
.danger	Indicates a dangerous operation	#f2dede

<table class="table table-bordered table-hover">
	<tr class="active">
		<th> JavaSE</th>
		<th> database</th>
		<th> JavaScript</th>
	</tr>

	<tr class="danger">
		<td> object oriented</td>
		<td> oracle</td>
		<td> json</td>
	</tr>

	<tr class="success">
		<td> array</td>
		<td> mysql</td>
		<td> ajax</td>
	</tr>
</table>

4.2. Forms

The main function of a form is a web page control used to communicate with users. A good form design can make the web page communicate with users better. Common elements in forms mainly include: text input boxes, drop-down selection boxes, radio buttons, check buttons, text fields, and buttons.

4.2.1. Form Controls

**.form-control .input-lg**** (larger) **

**.input-sm** (smaller)

**input box **text

**.form-control**

<div class="col-sm-3">
	<input type="text" name="" id="" class="form-control" />
	<input type="text" name="" id="" class="form-control input-lg" />
	<input type="text" name="" id="" class="form-control input-sm" />
</div>

**drop down selection box **select

Multi-line selection setting: **multiple="multiple"**

<div class="col-sm-3">
	<select class="form-control">
		<option> Beijing</option>
		<option> Shanghai</option>
		<option> Shenzhen</option>
	</select>

	<select class="form-control" multiple="multiple">
		<option> Beijing</option>
		<option> Shanghai</option>
		<option> Shenzhen</option>
	</select>
</div>

**text area **textarea

<div class="col-sm-3">
	<textarea class="form-control" rows="3"></textarea>
</div>

**checkbox **checkbox

Vertical display: **.checkbox**

**Horizontal display: ****.checkbox-inline**

<!-- vertical display -->
<div>
	<div class="checkbox">
		<label><input type="checkbox">game</label>
	</div>
	<div class="checkbox">
		<label><input type="checkbox">study</label>
	</div>
</div>
<!-- Horizontal display -->
<div>
	<label class="checkbox-inline">
		<input type="checkbox">game
	</label>
	<label class="checkbox-inline">
		<input type="checkbox">study
	</label>
</div>

**radio box **radio

Vertical display: **.radio**

Horizontal display: **.radio-inline**

<!-- vertical display -->
<div>
<div class="radio">
<label><input type="radio">male</label>
</div>
< div class="radio">
< label><input type="radio">girl</label>
</div>
</div>
<!-- Horizontal display -->
<div>
<label class="radio-inline">
<input type="radio">male
</label>
<label class="radio-inline">
<input type="radio">girl
</label>
</div>

**button **button

Basic style: **btn**

Additional styles: **btn-primary**** **btn-info** **btn-success** **btn-warning** **btn-danger** **btn-link** *** *btn-default**

<button class="btn btn-danger"> button</button>
<button class="btn btn-primary"> button</button>
<button class="btn btn-info"> button</button>
<button class="btn btn-success"> button</button>
<button class="btn btn-default"> button</button>
<button class="btn btn-warning"> button</button>
<button class="btn btn-link"> button</button>

**Multi-tab support: make buttons using *****a div*** etc.

<a href="##" class="btn btn-info"> a label button</ a>
<span class="btn btn-success"> span label button</span>
<div class="btn btn-warning"> div Label button</div>

**Button Size**

Use **.btn-lg**, **.btn-sm***** ** or **.btn-xs** * to get buttons of different sizes

<button class="btn btn-primary btn-xs"> Charms.btn-xs</button>
<button class="btn btn-primary btn-sm"> small button.btn-sm</button>
<button class="btn btn-primary"> normal button</button>
<button class="btn btn-primary btn-lg"> large button.btn-lg</button>

**Button disabled**

Method 1**: Add the disabled attribute to the tag**

<button class="btn btn-danger" disabled="disabled"> Disable button</button>

Method 2**: Add the class name to the element tag *****"disabled"***

<button class="btn btn-danger disabled"> Disable button</button>

Adding disabled to the class attribute is just a style that disables it, not really disabling the button!

4.2.2. Form Layout

The basic form structure is built into Bootstrap, and individual form controls automatically receive some global styles.

The steps to create a basic form are listed below:

Add *role="form" * to the parent element

Put labels and controls in a *class .form-group *. This is required for optimal spacing.

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="control-label col-sm-2">Mail</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Please enter email"/>
</div>
</div>
<div class="form-group">
<label for="pwd" class="control-label col-sm-2">password</label>
<div class="col-sm-10">
<input type="pwd" class="form-control" placeholder="Please enter password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<div class=" checkbox">
<label>
<input type="checkbox" />remember password
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default">submit</button>
</div>

inline form

Display form controls in one line **form-inline**

Note that the label will not be displayed, the meaning of existence: if the label label is not set for the input control, the screen reader will not recognize it correctly.

<form class="form-inline">
 <div class="form-group">
 <label for="email" >Mail</label>
 <input type="email" class="form-control" placeholder="Please enter email"/>
 </div>
 <div class="form-group">
 <label for="pwd" >password</label>
 <input type="pwd" class="form-control" placeholder="Please enter password" />
 </div>
 <div class="form-group checkbox">
 <label><input type="checkbox" />remember password</label>
 </div>
 <div class="form-group">
 <button class="btn btn-default">submit</button>
 </div>
</form>

Thumbnail

Thumbnails are very common on e-commerce websites, and the most commonly used place is the product listing page.

Thumbnails are implemented to work with the grid system. At the same time, thumbnails can be matched with titles, descriptions, buttons, etc.

<div class="container">
 <div class="row">
 <div class="col-md-3">
 <div class="thumbnail">
 <img src="img/IMG_0131.JPG" alt="...">
 <h3>Gao Yuanyuan</h3>
 <p>Born in Beijing, Mainland China film and television actress and model.</p>
 <button class="btn btn-default">
 <span class="glyphicon glyphicon-heart"></span>like</button>
 <button class="btn btn-info">
 <span class="glyphicon glyphicon-pencil"></span>Comment
 </button>
 </div>
 </div>
 </div>
</div>

panel

All the default .panel component does is set the basic border and padding to contain the content.

**.panel-default**: the default style

**.panel-heading**: Panel header

**.panel-body**: Panel body content

<div class="panel panel-success">
 <div class="panel-heading">
 ......
 </div>
 <div class="panel-body">
 ......
 </div>
</div>

BootStrap Plugin

navigation

Navigation bullet points can be made using a combination of dropdowns and buttons*: *

**Basic style: **

**.nav ** combined with **nav-tabs**, **nav-pills** to make navigation

Classification:

Tabbed (nav-tabs) navigation
Nav-pills navigation
Stacked (nav-stacked) navigation
Adaptive (nav-justified) navigation
Breadcrumb navigation, in a separate use style, does not start with nav, but directly adds it to ol,ul Just, which is generally used in navigation. The main purpose of breadcrumb navigation is to tell the user The location of the page you are on (current location)

state:

Selected state active style
Disabled state: disable

Secondary menu

Tabbed Navigation

<p>Tabbed Navigation Menu</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>

Capsule Navigation

<p>Basic Capsule Navigation Menu</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>

Page Navigation

Pages can be seen everywhere, divided into page navigation and page navigation

Page navigation: add pagination [pagination-lg | pagination-sm] to the ul tag

Page navigation: add pager to the ul tag

Pages

<ul class="pagination">
 <li><a href="#">&laquo;</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">&raquo;</a></li>
</ul>

page

<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>

Drop-down menu

When using the drop-down menu of the Bootstrap framework, two js must be used

<!-- If you want to use Bootstrap of js plugin, must be called first jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- include all bootstrap of js Plugins or can be used as needed js plugin call　-->
<script src="js/bootstrap.min.js"></script>

Key Points:

1. Use a div with a class named dropdown or btn-group to wrap the entire drop-down box:

2. By default, dropdown is down, and you can add .dropup by popping up.

3. Use button as parent menu, use class name: dropdown-toggle and custom data-toggle attribute

** **

4. Use font to make a drop-down arrow in the button

** **

5. The drop-down menu item uses a ul list and defines a class named "dropdown-menu

6. Grouping dividing line:

Add the class name "divider" to implement the function of adding a drop-down divider

7. Group header: li add the class name "dropdown-header" to realize the function of grouping

8. Matching method:

1), dropdown-menu-left left-to-right default style

2), dropdown-menu-right right facing

9. Active state (.active) and disabled state (.disabled)

<!--use a class named dropdown,default down dropdown，pop up to join . dropup that will do-->
<div class="dropdown ">
 <!--Make button As a parent menu, use the class name: dropdown-toggle and custom data-toggle Attributes-->
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 like channel <span class="caret"></span><!--drop down arrow-->
 </button>
 <!--Dropdown menu items use a ul list, and define a class named " dropdown-menu-->
 <ul class="dropdown-menu"> <!--dropdown-menu-right right facing-->
 <!--group title: li add classname " dropdown-header" to achieve the function of grouping-->
 <li class="dropdown-header">----popular science----</li>
 <li>
 <a href="#"> (and)</a>
 </li>
 <!--group dividing line: <li>add classname" divider"To achieve the function of adding a drop-down divider-->
 <li class="divider"></li>
 <li class="dropdown-header">----funny----</li>
 <li>
 <a href="#"> happy comedy (</a>
 </li>
 <li>
 <a href="#"> happy big home camp</a>
 </li>
 <li class="divider"></li>
 <li class="disabled"> <!--disabled state-->
 <a href="#"> live explosion</a>
 </li>
 </ul>
</div>

modal box

A Modal is a subform that is overlaid on the parent form. Typically, the intent is to display content from a separate source, with some interaction possible without leaving the parent form. Subforms provide information, interaction, and more.

usage

**Through *****data ***** attribute: set the attribute data toggle= "modal" on the controller element (such as button or link), and set *****data target= "\identifier" or href= "\identifier" * * * to specify the specific modal box (with id="identifier") to be switched
**via JavaScript: Using this technique, a modal with *****id="identifier" *** can be invoked via *****JavaScript *****:

$('#identifier').modal(options);

example

<h2>Create a modal ( Modal)</h2>
<!-- Button triggers modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 Start presentation modal
</button>
<!-- modal box ( Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ariahidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
</button>
 <h4 class="modal-title" id="myModalLabel">Modal box(Modal)title</h4>
 </div>
 <div class="modal-body">add some text here</div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">closure</button>
 <button type="button" class="btn btn-primary">commit changes</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>

method

method	describe	example
Toggle: .modal('toggle')	Toggle modals manually.	$('#identifier').modal('toggle');
Show: .modal('show')	Open the modal manually.	$('#identifier').modal('show');
Hide: .modal('hide')	Hide the modal manually.	$('#identifier').modal('hide');

ialog" aria-labelledby="myModalLabel" ariahidden="true">

Modal title

add some text here

close commit changes

```

method

method	describe	example
Toggle: .modal('toggle')	Toggle modals manually.	$('#identifier').modal('toggle');
Show: .modal('show')	Open the modal manually.	$('#identifier').modal('show');
Hide: .modal('hide')	Hide the modal manually.	$('#identifier').modal('hide');

Tags: Front-end bootstrap

Posted by Deb on Tue, 02 Aug 2022 02:57:55 +0930

Programs Wiki

BootStrap study notes

1. Main content

2. Installation and use of BootStrap

2.1 Introduction to BootStrap

2.2. BootStrap Features

2.3. Download and use

3. Layout container and grid grid system

3.1. Layout container

3.2. Grid grid system

4. Common styles

4.1. Typography

4.2. Forms

BootStrap Plugin

navigation

Tabbed Navigation

Capsule Navigation

Page Navigation

Drop-down menu

modal box

Modal title

Popular Tags

Programs Wiki

BootStrap study notes

1. Main content

2. Installation and use of BootStrap

2.1 Introduction to BootStrap

2.2. BootStrap Features

2.3. Download and use

3. Layout container and grid grid system

3.1. Layout container

3.2. Grid grid system

4. Common styles

4.1. Typography

4.2. Forms

***BootStrap*** Plugin

navigation

Tabbed Navigation

Capsule Navigation

Page Navigation

Drop-down menu

modal box

Modal title

Popular Tags

BootStrap Plugin