Website: https://www.bootcss.com/
Layout container
Bootstrap requires a .container container to wrap the page content and grid system. We provide two classes for this purpose. Note that due to attributes such as padding, these two container classes cannot be nested in each other. The .container class is used for fixed-width containers that support responsive layout <div class="container"> ... </div> // The .container-fluid class is used for containers with 100% width and occupy the entire viewport. <div class="container-fluid"> ... </div>
Grid system
Introduction:
The grid system is used to create a page layout through a series of rows and columns, and your content can be placed into these created layouts. Here's an introduction to how the Bootstrap grid system works:
A "row" must be contained in a .container (fixed width) or .container-fluid (100% width) in order to give it proper alignment and padding.
Create a set of "columns" in the horizontal direction through "rows".
Your content should be placed inside "column", and only "column" can be a direct child element of "row".
Predefined classes like .row and .col-xs-4 can be used to quickly create grid layouts. Mixins defined in the Bootstrap source code can also be used to create semantic layouts.
Create a gutter between columns by setting the padding property for a column. By setting a negative margin for the .row element to offset the padding set for the .container element, the padding is indirectly offset for the "column" contained in the "row".
Negative margins are why the example below looks outward. Contents in grid columns line up.
Columns in a grid system represent the range they span by specifying values from 1 to 12. For example, three equal-width columns can be created using three .col-xs-4.
If a "row" contains more than 12 "columns", the elements of the extra "columns" will be arranged as a whole in another row.
The grid class is available for devices with screen widths greater than or equal to the breakpoint size, and is overridden for devices with small screens. Therefore, applying any .col-md-* raster classes on an element works for devices with screen widths greater than or equal to the breakpoint size, and overrides the raster classes for small-screen devices. Therefore, applying any .col-lg-* on the element does not exist and also affects large screen devices.
Case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<style>
.c1 {
height: 100px;
border: 2px solid black
}
</style>
</head>
<body>
<div class="container"> // The .container class is used for containers with fixed width and supports responsive layout. The .container-fluid class is used for 100% width.
<div class="row"> // row (row) must be contained in the .container class or .container-fluid class
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
<div class="col-md-1 c1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 c1">.col-md-8</div>
<div class="col-md-4 c1">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 c1">.col-md-4</div>
<div class="col-md-4 c1">.col-md-4</div>
<div class="col-md-4 c1">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 c1">.col-md-6</div>
<div class="col-md-6 c1">.col-md-6</div>
</div>
</div>
</body>
</html>
Typesetting
Title
All title tags in HTML, <h1> to <h6> can be used. In addition, classes .h1 to .h6 are provided for styling the text of inline attributes.
<h1>Level 1 title</h1>
<h2>Level 2 title</h2>
<h3>Level 3 title</h3>
<h4>Fourth level heading</h4>
<h5>Five-level headings</h5>
<h6>Six-level headings</h6>
// subtitle
<h1>Level 1 title <small>Subtitle</small></h1>
<h2>Second-level title <small>Subtitle</small></h2>
<h3>Third-level title <small>Subtitle</small></h3>
<h4>Level 4 title <small>Subtitle</small></h4>
<h5>Level 5 title <small>Subtitle</small></h5>
<h6>Level 6 title <small>Subtitle</small></h6>
Page body
Bootstrap sets global font-size to 14px and line-height to 1.428. These attributes are assigned directly to the <body> element and all paragraph elements. In addition, <p> The (paragraph) element is also set with a bottom margin equal to 1/2 the line height (i.e. 10px).
central content
Add .lead class to highlight paragraphs
<p class="lead">...</p>
inline text element
You can use the mark tag <mark>highlight</mark>text</body>
Deleted text Use the <del> tag for deleted text // Commonly used in store discounts and price reductions
<del>This line of text is meant to be treated as deleted text.</del>
Useless text Use the <s> tag for useless text
<s>This line of text is meant to be treated as no longer accurate.</s>
Inserting text Additional inserted text uses the <ins> tag
<ins>This line of text is meant to be treated as an addition to the document.</ins>
Underlined text Use the <u> tag to underline text
<u>This line of text will render as underlined</u>
Small text
For inline or block type text that does not require emphasis, use the <small> tag to wrap it, and the text within it will be set to 85% of the font size of the parent container. Nested <small> elements within the title element are set to different font-sizes.
You can also give inline elements the .small class in place of any <small> elements.
<small>This line of text is meant to be treated as fine print.</small>
Emphasize a piece of text through strong
The following snippet of text is rendered as bold text
<strong>rendered as bold text</strong>
Italics Emphasize a piece of text in italics through the <em> tag // Use the <i> tag in css
<em>rendered as italicized text</em>
Alignment
<p class="text-left">Left aligned text.</p> // Left aligned
<p class="text-center">Center aligned text.</p> // Center alignment
<p class="text-right">Right aligned text.</p> // right aligned
<p class="text-justify">Justified text.</p> //Align both ends
<p class="text-nowrap">No wrap text.</p>
Case
<p class="text-lowercase">Lowercased text.</p> // Convert to lowercase
<p class="text-uppercase">Uppercased text.</p> // Convert to uppercase
<p class="text-capitalize">Capitalized text.</p> // Capitalize the first letter
list
unordered list
<ul>
<li>...</li>
</ul>
ordered list
<ol>
<li>...</li>
</ol>
No style list
<ul class="list-unstyled">
<li>...</li>
</ul>
Inline list .list-inline class
Place all elements on the same line by setting display: inline-block; and adding a small amount of padding
<ul class="list-inline">
<li>...</li>
</ul>
Arrange horizontally
.dl-horizontal allows the phrases and their descriptions within <dl> to be arranged on one line. It starts with default styles like <dl> stacked on top of each other, and then arranged in a row as the navigation bar gradually expands
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Table
Add the .table class to any <table> tag to give it a basic style-a small amount of padding and a horizontal divider. This approach looks very redundant! ? However, we feel that the table element is widely used. If we give it a default style, it may affect plug-ins such as calendar and date selection, so we choose to separate this style.
<table class="table">
...
</table>
striped form
<table class="table table-striped">
...
</table>
Bordered tables Add the .table-bordered class to add borders to the table and each cell within it
<table class="table table-bordered">
...
</table>
Mouse Hover You can make each row in the <tbody> respond to the mouse hover state by adding the .table-hover class
<table class="table table-hover">
...
</table>
Condensing the table: By adding the .table-condensed class, the table can be made more compact, and the padding in the cells will be halved.
<table class="table table-condensed">
...
</table>
Status class
Class Description
.active The color set when the mouse is hovering over a row or cell
.success identifies success or positive action
.info identifies common prompt information or actions
.warning identifies a warning or requires user attention
.danger identifies dangerous or potentially negative actions
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Form
Individual form controls will be automatically assigned some global styles. All <input>, <textarea> and <select> elements set with the .form-control class will have the default width attribute set to width: 100%;. Wrapping the label element and previously mentioned controls in a .form-group provides the best arrangement
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Inline forms Adding the .form-inline class to a <form> element causes its content to be left aligned and behave as an inline-block level control.
1. Manually adjust the width as needed
2. Be sure to add label tags
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
horizontally arranged form
By adding the .form-horizontal class to the form and using Bootstrap's preset grid class, label labels and control groups can be laid out horizontally side by side. Doing this will change the behavior of .form-group so that it behaves like rows in a grid system, so there is no need to add an additional .row .
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Button
can be used as a label or element for buttons
Add a button class to the <a>, <button> or <input> element to use the styles provided by Bootstrap
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Precautions:
1. Although buttons can be applied to <a> and <button> elements, navigation and navigation components only support <button> elements.
2. If the <a> element is used as a button--and used to trigger certain functions on the current page--rather than for linking to other pages or linking to other parts of the current page, then be sure to set role=" button" attribute.
3. It is strongly recommended to use <button> elements whenever possible to obtain matching drawing effects on various browsers.
Predefined styles
<!-- Standard button -->
<button type="button" class="btn btn-default">(Default style)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(Preference)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(Success)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(General information) Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(Warning) Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(Danger) Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(Link) Link</button>
Sizes Use .btn-lg, .btn-sm or .btn-xs to get buttons of different sizes
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(Default size)Default button</button>
<button type="button" class="btn btn-default">(Default size)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(small button)Small button</button>
<button type="button" class="btn btn-default btn-sm">(small button)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
Pictures
Responsive images In Bootstrap version 3, images can support responsive layout by adding the .img-responsive class to the image. The essence is to set the max-width: 100%;, height: auto; and display: block; attributes for the image, so that the image can be better scaled in its parent element. If you need to center the image using the .img-responsive class horizontally, please use the .center-block class instead of .text-center <img src="..." class="img-responsive" alt="Responsive image"> Picture shape <img src="..." alt="..." class="img-rounded"> // Square rounded corners <img src="..." alt="..." class="img-circle"> // Circle <img src="..." alt="..." class="img-thumbnail"> // With border
Auxiliary class
Situation text color
To demonstrate intent through color, Bootstrap provides a set of utility classes. These classes can be applied to links, and the color can also be deepened when the mouse is over, just like the default link.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Situation background color
As with the situational text color class, you can set the background of an element using any situational background color class. The color of the link component will deepen when the mouse passes over it, just like the situational text color class mentioned above
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
close button
Modals and alerts can be made to disappear by using a close icon
<button type="button" class="close" aria-label="Close"><span aria-hidden="true"> & amp;times;</span></button >
triangle symbol
You can indicate that an element has the functionality of a drop-down menu by using the triangle symbol. Note that the triangle symbol in the upward pop-up menu is reversed
<span class="caret"></span>
fast float
By adding a class, you can float any element to the left or right. !important is used to clarify the priority of CSS styles
<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
Note: cannot be used in navigation bar components. You can use these tool classes when arranging components in the navigation bar: .navbar-left or .navbar-right
Content block centered
Set the display: block property on any element and center its content using the margin property. The classes listed below are also available as mixins
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
//Usage as a mixin
.element {
.center-block();
}