Table of contents
Introducing Bootstrap
Version
download
Introducing Bootstrap
supportive
BootStrap container
HTML5 doctype
mobile first
layout container
The .container class is used for fixed-width containers that support responsive layout
The .container-fluid class is used for containers with 100% width and occupying the entire viewport.
Grid system basics
Introduction
Raster parameters
Grid system (can be equal or unequal)
Grid system example exercises
Example 1: mobile phone, tablet, small screen, large screen
Grid system properties
1. Remove grid gaps (.row-no-gutters)
2.Column offset (.col-md-offset-*)
Column offsets can be equal or unequal.
3. Nested columns
4. Column sorting (.col-md-push-* and .col-md-pull-*)
typesetting
title
Alignment
change case
abbreviation
code
inline code
user input
code block
Variable Effect Mathematical Formula
program output
sheet
1. Basic table class="table"
2. Striped table class="table table-striped"
3. Table with border class="table table-bordered"
4. Mouse hover class="table table-hover"
5. Table-condensed
6. Status class
Add color to each row
1.active: hover, gray
2.success: selected, light green
3.info: information, light blue
4. warning: warning, light yellow
5.danger: danger, light pink
7. Responsive table .table-responsive needs to be wrapped with a layer outside the table
form_basic form
basic form
basic form
1. Add class="form-group" to the form
2.The label’s for has the same name as the input’s id.
3. Add class="form-control" to the input
inline form
inline form
1. Add: class="form-inline" to the outer form
2. Use div to wrap label and input, and add class="form-group" to div
3.The label’s for has the same name as the input’s id.
4. Add class="form-control" to the input
5. The outer layer of input-group-addon needs to be wrapped with a container, class="input-group"
Forms arranged horizontally
Arrange Forms Horizontally
1. Add class="form-horizontal" to the outer form
2. Wrap label and input with div
3. When controlling the position, a grid system is used. The input needs to be wrapped in a container, and the class is the occupied position.
4.Add class="control-label col-lg-4" in lable. col-lg-4 represents the position occupied.
5.class="col-lg-offset-4" means that it is not a proportional discharge, but also to adjust the position.
Form_Supported Controls
Input box
text field
Multiple choice and radio button
drop-down list(select)
Static control (.form-control-static)
Static controls:
1. If the .form-control-static attribute is not added, the text is not at the same level
2. It needs to be wrapped in a form, add the attribute class="form-horizontal" to arrange it horizontally
3.Put label and p into a container and add class="form-group" to the container
4. When using the grid system to adjust the position, you need to add class="control-lable" to the label
5. When using the grid system to adjust the position, you need to put p in a container to adjust the position
Form_Form Status
focus state
Disabled state (add disabled in input)
Read-only state (add readonly to input)
Verification status (.has-warning, .has-error or .has-success)
---> Just add a shadow color to the input box. It needs to be added to the parent of the input.
Widget size ( .input-lg)
button
Label or element that can be used as a button
predefined styles
predefined styles
It means to make the button display different color effects
1.Default effect: .btn-default
2. Preferences: .btn-primary
3. Success: .btn-success
4. General information: .btn-info
5. Warning: .btn-warning
6. Danger: .btn-danger
7. Link: .btn-link
size
button size
Just add btn-lg btn-md btn-sm btn-xs to the button class.
button size
1. Just add btn-lg btn-md btn-sm btn-xs to the button class.
2. You can also add class="btn-block" to the button to expand the width to the same width as the parent (more common on mobile terminals)
Disabled state (add disabled to button)
picture
Responsive images
For responsive images, add class="img-responsive" to img
picture shape
the shape of the picture
It is to set the shape of the picture and add class="img-circle" to img
1. Rounded corners: class="img-rounded"
2. Circle: class="img-circle"
3. Border (in a container): class="img-thumbnail"
Auxiliary class
Situational text color
Text appears in different colors Add class="text-success"
Situation background color
The background color is different, and stretched to the width of the parent container, add class="bg-success"
close button
Close button: add class="close" to the button and wrap entity characters with span
triangle symbol
The triangle span tag carries added class="caret"
Glyphicons font icon
Glyph font icon,
It is generally recommended to use span tag wrapping
1. The span can be nested in the button tag, and the class is added to the span, and the font is behind the class
Drop-down menu
Example
Drop-down menu:
1. Need to be included in a container with class="dropdown"
3. Click the button to implement drop-down, which requires the introduction of jQuery.
Then add class="dropdown-toggle" and data-toggle="dropdown" to the button
4. If included in a container with class="dropup", the arrow and content are displayed above
Kind tips
The dynamic effect of the drop-down menu depends on the JS file of BootStrap, and the JS file of BootStrap depends on the jQuery file.
This means that jQuery also needs to be introduced
Alignment
title
title:
Title cannot be selected
Dividing line
Dividing line:
Add the li tag to the place where dividing lines need to be added, and add class="divider", as follows
Disabled menu items
Disable menu item:
Where it needs to be disabled, add class="disabled" to the li tag, as follows
button group
Basic button set
button toolbar
size
Nested
vertical arrangement
Aligned button group
button drop-down menu
single button dropdown menu
Split button dropdown menu
size
popup menu up
input box group
Basic Input Box Group
size
Checkboxes and radiobuttons as additional elements
Buttons as extra elements
Button dropdown menu as an additional element
Split button dropdown as additional element
navigation
Bookmark page
Capsule tab
Justified Tabs
disabled link
Add drop down menu
navigation bar one
Default style navigation bar
brand icon
form
button
text
Non-navigational links
Default navigation bar: in a container with class="navbar navbar-default"
Brand icon:
1. If placed in the middle, add a container class="container"
3. The img is nested in the a tag, and class="navbar-brand" is added to the a tag
Navigation Bar:
1. Navigation bar, form, button, text, and non-navigation links all need to be placed in the container class="collapse navbar-collapse"
2. Add ul li tag, add class="nav navbar-nav" to ul tag
3. Add a li tag in front of the place where the drop-down list needs to be added, and name it class="dropdown"
4. Put the a tag inside, add class="dropdown-toggle" data-toggle="dropdown" to the a tag, and then add a triangle behind the a tag text.
drop down form
form:
1. It also needs to be placed in a container with container class="collapse navbar-collapse"
2. Add a form form to the container, class="navbar-form"
3. In the form with class="navbar-form", add the container class="form-group". If a line break occurs, you need to add class="navbar-left" to the class of the form form.
4. Then add the input input box, class="form-control"
button:
1. It also needs to be placed in a container with container class="collapse navbar-collapse"
2. Add button label, class="btn btn-primary navbar-btn navbar-left". If a line break occurs, you need to add class="navbar-left" to the class in the button.
text:
1. It also needs to be placed in a container with container class="collapse navbar-collapse"
2. Add class="navbar-text" to the text label
Non-navigational links
1. It also needs to be placed in a container with container class="collapse navbar-collapse"
2. Add a tag to the text tag, and add class="navbar-link" to the a tag, as follows:
Click to jump to Taobao
Navigation bar two
Navigation bar position: navbar-left navbar-right
The navigation bar is static at the top: navbar-static-top
The navigation bar is fixed at the top: navbar-fixed-top
The navigation bar is fixed at the bottom: navbar-fixed-bottom
Navigation bar inverse color: navbar-inverse
The above attributes are added to the container of the navigation bar class="navbar navbar-default"
Component Arrangement
still on top
fixed on top
fixed at the bottom
inverted navigation bar
Path navigation (breadcrumbs)
Path navigation (breadcrumbs)
1. In the container class="container"
2. Use ol li tags
3. ol adds class="breadcrumb" breadcrumb meaning
Pagination
default pagination
Default pagination:
1.Put it into a container with class="container"
2. Add to the nav tag
4. Add the a tag to the li tag, and the entity is carried by the span tag.
5. « 《 » 》 &larr <- &rarr ->
size
Page size:
Turn page
Centered page turning:
1.Add class="container"
2. Add nav tag
4. Add an a tag to the li tag, and use the span tag to carry the entity.
Align links
Page flipping at both ends:
1.Add class="container"
2. Add nav tag
4. Add an a tag to the li tag, and use the span tag to carry the entity.
5. For page turning at both ends, add class="previous" and class="next" to the li tag based on the center page turning.
Optional disabled state
Optional disabled state:
Add class="disabled" to the li tag where it needs to be disabled
Label
Available variants
Label:
1. Tags are carried by span
2. Add class="label label-default" to the span label
3.label-default/primary/success/info/warning/danger
badge
Nest elements for links, navigation, etc., which can prominently display new or unread information items
badge:
1. Wrap with span tag
2.Add class="badge" to span tag
3. It can be in the link, it can be in the text, and it can also be in the navigation
Adapt the activation state of navigation elements
giant screen
Giant screen:
If the giant screen is in the middle?
1. Add container class="container" outside
2. In the container class="container", add another layer of container class="jumbotron"
3. Then add banner in class="jumbotron"
as follows:
Giant screen:
What if you want to realize that the giant screen has the same width as the browser, but the content inside is centered?
1. Put the container class="jumbotron" outside
2. Add class="container" inside
3. Put the banner in the class="container" container
as follows:
Headers and Thumbnails
Header
Header:
1. Use class="container" container in the outer layer
thumbnail
Thumbnail:
1. Use class="container" container in the outer layer
2. Adjust position using grid system
3. Add an img tag to the container, and add class="thumbnail" to the a tag.
Example of default style
Custom content
Custom content:
1. Use class="container" container in the outer layer
2. Adjust position using grid system
3. Add an img tag to the container, and add class="thumbnail" to the a tag.
4. Add another class="caption" container in the a tag
5. Add titles h1`h6, p tags, etc. to the class="caption" container.
warning box
Basic alert box
Basic warning box:
1. Add a class="container" container outside
2. In the class="container" container, add a container with class="alert alert-success/info/warning/danger"
Closeable warning box
Closeable warning box:
1. Add a class="container" container outside
2. In the class="container" container, add a container with class="alert alert-success/info/warning/danger"
3. Add in the container of class="alert alert-success",
span text tag button tag, add class="close" to the button tag, and use span to wrap the entity
At the same time, add class="alert-dismissible" to the class of class="alert alert-success"
link in alert box
Links in the alert box:
1. Add a class="container" container outside
2. In the class="container" container, add a container with class="alert alert-success/info/warning/danger"
3. Add a span tag to wrap the text in the container, add a tag to the text,
Then add class="alert-link" to the a tag
progress bar
basic example
Progress bar without prompt label:
1. Add a container with class="container" to the outer layer
3. Add a container with class="progress-bar" to the container with class="progress"
4. Add attributes to the container with class="progress-bar"
aria-valuenow="30"
aria-valuemin="0"
aria-valuemax="100"
style="width:30%"
5. Add span tags to the container with class="progress-bar" and class="sr-only"
Progress bar with prompt label