Bootstrap brief book (summary)
Summary:
- Bootstrap sets the global CSS style. The basic elements of HTML can be styled and enhanced through class. There is also an advanced grid system.
- Bootstrap comes with a large number of reusable components, including font icons, drop-down menus, navigation, warning boxes, pop-up boxes and more.
- The jQuery plug-in gives "life" to the components of Bootstrap. You can simply import all plug-ins at once or one by one into your page.
- There are many website instances that can be used directly.
1, Introduction to bootstrap
- Bootstrap, from Twitter (the country's largest microblog), is currently the most popular front-end framework.
- bootstrap download and demonstration http://v3.bootcss.com
- What is Bootstrap?
- Bootstrap is an open source framework based on HTML, CSS and JAVASCRIPT. It is concise, intuitive, powerful and flexible, making Web development faster,
- It is used to develop WEB projects with responsive layout and mobile device priority.
- Why use Bootstrap?
- Cross equipment
- Cross browser (chrome, IE9 or above, Firefox, Safari, Opera...)
- Responsive layout
- Components with strong practicability
- Built in jquery plug-in
- Bootstrap structure?
- It is mainly divided into three core modules: css, js and font
1.1 download
Bootstrap (current version v3.4.1) provides the following ways to help you get started quickly, each for developers with different skill levels and different use scenarios. Read on to see what works for you.
- BootstrapCDN
StackPath Our little partner provides CDN support for CSS and JavaScript files of Bootstrap. Use these directly BootstrapCDN Just provide the link.
<!-- Latest version Bootstrap core CSS file --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- Optional Bootstrap Subject file (generally not imported) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- abreast of the times Bootstrap core JavaScript file --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
-
Installation via Bower
You can also pass Bower Install and manage the Less, CSS, JavaScript, and font files for Bootstrap.
bower install bootstrap
-
Installation via npm
You can also use npm Tools to install Bootstrap:
npm install bootstrap@3
The function of the require('bootstrap ') code is to load all jQuery plug-ins of bootstrap onto the jQuery object. The bootstrap module itself does not export anything. You can manually load a single bootstrap plug-in by loading the / js/*.js file in the top-level directory of the installation package.
The package.json file of Bootstrap contains some additional metadata information:
less - the directory contains Bootstrap Less Source file
style - this directory contains Bootstrap's (by default) precompiled and uncompressed CSS files
-
Install through Composer
adopt Composer (Chinese official website: Composer Chinese network )You can also install and manage the Less, CSS, JavaScript and fonts files of Bootstrap:
composer require twbs/bootstrap
-
When compiling the Less/Sass source code, you need to use the Autoprefixer tool
Bootstrap utilization Autoprefixer Automatically as Some CSS properties add vendor specific prefixes . If you compile Bootstrap from Less/Sass source code and do not use the Gruntfile file of Bootstrap, you must integrate Autoprefixer into your compilation tool and compilation process. If you use our pre compiled Bootstrap file or the Gruntfile file we provide, you don't need to worry, because the Gruntfile we provide has integrated Autoprefixer.
1.2 contents
Bootstrap provides two forms of compressed packages. The following directories and files can be seen in the downloaded compressed package. These files are placed in different directories according to categories, and compressed and uncompressed versions are provided.
Bootstrap plug-ins all rely on jQuery
Please note that * * all JavaScript plug-ins of Bootstrap rely on jQuery, * * so jQuery must be introduced before Bootstrap, as in Basic template As shown in. stay In the bower.json file Lists the jQuery versions supported by Bootstrap.
Precompiled version
After downloading the compressed package, unzip it to any directory to see the following directory structure (compressed version):
Copy
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
The above shows the basic file structure of Bootstrap: precompiled files can be directly used in any web project. We provide compiled CSS and JS (bootstrap. *) files, as well as compressed CSS and JS (bootstrap.min. *) files. CSS is also provided Source mapping table (Bootstrap. * map) can be used in some browser development tools. It also includes icon fonts from glyphics, which are used in the attached Bootstrap theme.
Bootstrap source code
Bootstrap source code includes precompiled CSS, JavaScript and icon font files, as well as the source code of LESS, JavaScript and documents. Specifically, the main documents are organized as follows:
Copy
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
The less /, JS / and fonts / directories contain the source code of CSS, JS and font icons respectively. The dist / directory contains all the files in the precompiled Bootstrap package mentioned above. docs / contains the source files of all documents. The examples / directory is an example project officially provided by Bootstrap. In addition to these, other files also include the definition file, license file, compilation script, etc. of the Bootstrap installation package.
2, bootstrap layout style
title
- From h1 to h6
<h1>Bootstrap Typesetting</h1> //36px
<h2>Bootstrap Typesetting</h2> //30px
<h3>Bootstrap Typesetting</h3> //24px
<h4>Bootstrap Typesetting</h4> //18px
<h5>Bootstrap Typesetting</h5> //14px
<h6>Bootstrap Typesetting</h6> //12px
<h2>bootstrap curriculum</h2>
<p class="lead">hello world</p>
Inline text element (emphasis)
- Add a tag, < mark > element or. Mark class
<p>Bootstrap<mark>Typesetting</mark></p> <!--Various underlined text--> <del>Bootstrap Typesetting</del> //Deleted text <s>Bootstrap Typesetting</s> //Useless text <ins>Bootstrap Typesetting</ins> //Inserted text <u>Bootstrap Typesetting</u> //The effect is the same as above, underlined text <!--Various emphasized texts--> <small>Bootstrap Typesetting</small> //85% of standard font size <strong>Bootstrap Typesetting</strong> //Bold 700 <em>Bootstrap Typesetting</em> //tilt <p class="text-left">Align text left</p> <p class="text-center">Center aligned text</p> <p class="text-right">Align text to the right</p> <p class="text-justify">Align text. This paragraph wraps text that goes beyond the screen according to the size of the screen</p> <p class="text-nowrap">This paragraph does not wrap text beyond the screen according to the size of the screen.</p> <p class="text-lowercase">BOOTSTROP</p> <p class="text-uppercase">bootstrap</p> <p class="text-capitalize">bootstrap</p> //Word initial capitalization
abbreviation
- HTML elements provide tags for abbreviations, such as WWW or HTTP. Bootstrap defines the style of the < abbr > element as a dashed border displayed at the bottom of the text
- When the mouse hovers over it, the full text is displayed (as long as you add text to the < abbr > title attribute). To get a smaller font of text,
- Please add. initialism to < abbr >
<abbr title="World Wide Web">WWW</abbr><br> <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
address
- The default address is display:block;, You need to use the label < br > to add a line break to the enclosed address text
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
quote
- The default style is referenced, the left line is added, and the font size and inner and outer margins are set
< blockquote > bootstrap framework < / blockquote > - reverse
< blockquote class = "blockquote reverse" > bootstrap framework < / blockquote > - Multiple reference styles
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="text-right">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
paragraph
- Highlight the content through. lead (its function is to increase the text size, bold the text, and deal with the line height and margin accordingly)
- < small > small
- <b>< strong > bold
- <i> < EM > Italic
- list
- Ordered list, unordered list, custom list
- . list Unstyled to point list
- . list inline inline list
- . DL horizontal is applied to < DL > elements and < DT > elements, and the excess will become... Display
- Ordered list, unordered list, custom list
- code
- . pre scrollable makes the < pre > element scrollable
- Inline code < code > < section > < / code > single line code
- The user enters press < KBD > Ctrl +, and < / KBD > will display the effect of the keyboard
- Marked variable < var > y < / var > = < var > m < / var > < var > x < / var > + < var > b < / var >
- This text is mean to be treated as sample output from a computer program. < / sample >
- Code block < pre > < article > please input... < / article > < / pre > pre saves the original format, including spaces and carriage returns
3, Tables, buttons, pictures
form
- Basic table < table class = "table" >
- Stripe table < table class = "table striped" >
- Border table < table class = "table bordered" >
- Hover table < table class = "table hover" >
- Compact table < table class = "table condensed" >
- Status tables active, success, info, warning, danger
- Hide a row < tr class = "SR only" >
- Response form
- The parent element of the table sets the response expression, and the border appears when it is less than 768px
<div class="table-responsive">
- The parent element of the table sets the response expression, and the border appears when it is less than 768px
Button
- Button label
- Convert to normal button
- <a href="###" class="btn btn-default">Link</a>
- <button class="btn btn-default">Button</button>
- <input type="button" class="btn btn-default" value="input">
- Note: for cross browser presentation, try to use button s
- Button size
- . BTN LG this makes the button look larger.
- . BTN SM this makes the button look smaller.
- . BTN XS this makes the button look particularly small.
- Predefined styles
- . BTN default default / standard button
- . BTN primary preference style
- . BTN success style
- . BTN info general information style
- . BTN warning warning style
- . BTN danger style
- . BTN link link style
- Block level button
- . BTN block block level button (stretched to 100% of the width of the parent element)
- Active state
- <button class="btn active">Button</button>
- Disabled status
- <button class="btn active disabled">Button</button>
picture
- . img rounded fillet (not supported by IE8)
- . img circle circle (not supported by IE8)
- . img thumbnail thumbnail function
- . img responsive picture response (well extended to parent element)
4, Grid system, form
grid system
- The responsive grid system is automatically divided into up to 12 columns as the screen or viewport size increases.
- working principle
- Rows must be placed within the. Container (fixed width) or. Container fluid (100% width) class to obtain proper alignment and padding
- The contents are placed in columns, and only columns can be direct child elements of rows
- Predefined grid classes, such as. row and. col-lg-4, can be used to quickly create grid layouts
- Columns use padding to create gaps between column contents
- Media query
- Ultra small device (mobile phone, less than 768px)
- There is no code related to media query, because this is the default in Bootstrap (remember that Bootstrap is mobile device first?)
- Small devices (tablet, 768px or more) @ media (min width: @ screen SM min) and (max width: @ screen SM max) {...}
- Medium devices (desktop computers, greater than or equal to 992px) @ media (min width: @ screen MD min) and (max width: @ screen MD max) {...}
- Large equipment (large desktop computer, greater than or equal to 1200px) @ media (min width: @ screen LG min) {...}
- Grid Params
- Ultra small screen mobile phone (< 768px)
- Small screen flat panel (≥ 768px)
- Medium screen desktop display (≥ 992px)
- Large screen large desktop display (≥ 1200px)
- Grid system behavior
- Always arranged horizontally
- Initially stacked together, it will become horizontal arrangement C when it is greater than these thresholds
- . container maximum width None (automatic) 750px 970px 1170px
- Class prefix. Col XS -. Col SM -. Col MD -. Col LG-
- Number of column s 12
- Maximum column width auto ~ 62px ~81px ~97px
- Gap width 30px (15px on the left and right of each column)
- All four screen categories are activated = = (in this case, all four cases are listed at one time to ensure that the desired effect will be automatically displayed when encountering the corresponding screen, and bootstrap will automatically detect the screen size)==
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
....
</div>
</div>
- You can set column offsets to keep gaps in the middle
<div class="container">
<div class="row">
<div class="col-md-8">1-8</div>
<div class="col-md-3 col-md-offset-1">10-12</div>
</div>
</div>
- It can be nested and filled with 12 columns
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="col-md-8">1-8</div>
<div class="col-md-4">9-12</div>
</div>
<div class="col-md-3"> 10-12 </div>
</div>
</div>
- You can switch the positions of two columns, push to the right (push) and pull to the left (pull)
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-4">8</div>
<div class="col-md-4 col-md-pull-8">4</div>
</div>
</div>
form
- Vertical or basic form
- Inline form
- The form is left aligned and floating, and is represented as an inline block structure < form class = "form inline" >
Note: when it is less than 768px, the exclusive style will be restored
- The form is left aligned and floating, and is represented as an inline block structure < form class = "form inline" >
- Horizontal form
- Keep the elements in the form arranged horizontally
- Form combination
- Add segments before and after
<div class="input-group">
<div class="input-group-addon">￥</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>
- Input box, text field
- Native HTML5 input type support
- include:
- text
- password
- datetime
- datetime-local
- date
- month
- time
- week
- number
- url
- search
- tel
- color
- < input type = "text" class = "form control" placeholder = "text input" >
- <textarea class="form-control" rows="3"></textarea>
- Check box and Radio
<div class="checkbox">
<label><input type="checkbox" value="">Option 1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked> Option 1
</label>
</div>
- Inline check boxes and radio boxes
<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> Option 1 </label> <label class="radio-inline"> <input type="radio" id="optionsRadiosinline" value="option1"> Option 1 </label>
- Selection box multiple multi line display
<select class="form-control" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
- Static control.form-control-static
- Form control status
- Input box focus
- When the input box receives: focus, the outline of the input box will be removed and box shadow will be applied.
- Disabled input field
- If you want to disable an input box, simply add the disabled attribute, which will not only disable the input box, but also change the style of the input box and the style of the mouse pointer when the mouse pointer hovers over the element.
- Disabled fieldset fieldset
- Add the disabled attribute to < fieldset > to disable all controls in < fieldset >.
- Verify status
- . has warning,. Has error or. Has success classes can be to the parent elements of these controls.
- Any. Control label,. Form control, and. Help block elements contained within this element will accept the style of these verification states.
- Form help text
<form role="form">
<input class="form-control" type="text" placeholder="">
<span class="help-block">A long help text block that exceeds one line needs to be extended to the next line. There are two lines of help text in this example.</span>
</form>
- Control size
- . input LG and col LG - * to set the height and width of the form
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder="input-lg">
</div>
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder="col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder="col-lg-4">
</div>
</div>
5, Auxiliary classes, responsive tools, menus, icons
Auxiliary class
- text
<p class="text-muted">The content of the bank is weakened</p>
<p class="text-primary">The content of this line has a primary class</p>
<p class="text-success">The content of this line has a success class</p>
<p class="text-info">The content of this line has a info class</p>
<p class="text-warning">The content of this line has a warning class</p>
<p class="text-danger">The content of this line has a danger class</p>
- background
<p class="bg-primary">bootstrap curriculum</p> <p class="bg-success">bootstrap curriculum</p> <p class="bg-info">bootstrap curriculum</p> <p class="bg-warning">bootstrap curriculum</p> <p class="bg-danger">bootstrap curriculum</p>
- close button
<button class="close">×</button>
- Pull down menu caret
<span class="caret"></span>
- Floating pull left pull right
<div class="pull-left">Fast float left</div> <div class="pull-right">Fast float right</div>
- Clear floating clearfix
<div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7; "> fast float left < / div >
<div class="pull-right" style="background: #Da81f5; "> fast float right < / div >
</div>
- Block level content center block
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;">
This is center-block
</div>
</div>
- show hide
<div class="row" style="padding: 91px 100px 19px 50px;">
<div class="show" style="width:300px;background-color:#ccc;">
This is show class
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
This is hide class
</div>
</div>
- Screen readers and keyboard navigation. SR only to hide elements from all devices, except screen readers. SR only focusable
<div class="row" style="padding: 91px 100px 19px 50px;">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="pass">password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</form>
</div>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
Responsive tools
- visible-xs visible-sm visible-md visible-lg
- hidden-xs hidden-sm hidden-md hidden-lg
- Taking xs as an example, the available. Visible - * - * classes are: visible xs block, visible xs inline, and visible xs inline block
- Visible print block visible print inline visible print inline block browser hide printer visible
Hidden print browser visible printer hidden visible print
<div class="container" style="padding: 40px;">
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
<span class="hidden-xs">Especially small</span>
<span class="visible-xs">✔ Visible on particularly small equipment</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
<span class="hidden-sm">small-scale</span>
<span class="visible-sm">✔ Visible on small devices</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
<span class="hidden-md">medium-sized</span>
<span class="visible-md">✔ Visible on midsize devices</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;border:1px solid #000;">
<span class="hidden-lg">large</span>
<span class="visible-lg">✔ Visible on large equipment</span>
</div>
</div>
</div>
- Font Icon
- Usage: < span class = "glyphicon glyphicon search" ></span>
- drop-down menu
- Basic drop-down menu
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">Html</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">html5+css3</a></li>
</ul>
</div>
- Align dropdown menu right
<ul class="dropdown-menu">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
- Separation line
<ul class="dropdown-menu">
...
<li class="divider"></li>
...
</ul>
- Disabled menu items
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
- Let the menu display < div class = "dropdown open" > by default
6, Button and input box components
Button assembly
- Basic button group
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
- Buttons Toolbar
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group">
<button class="btn btn-default">more</button>
</div>
</div>
- Button size
<div class="btn-group btn-group-lg">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<button class="btn btn-default">right</button>
</div>
- nesting
<div class="btn-group">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Button <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</div>
</div>
- Vertical button group
<div class="btn-group-vertical">
<button class="btn btn-default">left</button>
<button class="btn btn-default">middle</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Button <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</div>
</div>
- Button groups aligned at both ends
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">left</button>
</div>
<div class="btn-group">
<button class="btn btn-default">middle</button>
</div>
<div class="btn-group">
<button class="btn btn-default">right</button>
</div>
</div>
<div class="btn-group btn-group-justified">
<!--<div class="btn-group">--> For browser compatibility issues btn-group package
<a href="" class="btn btn-default">left</a>
<!--</div>-->
<!--<div class="btn-group">-->
<a href="" class="btn btn-default">middle</a>
<!--</div>-->
<!--<div class="btn-group">-->
<a href="" class="btn btn-default">right</a>
<!--</div>-->
</div>
- Push button drop-down menu
- Single button drop-down menu BTN default BTN success BTN primary BTN info BTN danger BTN warning
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
- Split Button drop-down menu
<div class="btn-group">
<button class="btn btn-default">Default</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
- Size of the button drop-down menu BTN LG BTN SM BTN XS
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
- Pop up menu dropup
<div class="btn-group dropup">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">html</a></li>
<li><a href="">javascript</a></li>
<li><a href="">jQuery</a></li>
</ul>
</div>
- Input box
- Basic input box group
<form action="">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"/>
</div>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control"/>
<span class="input-group-addon">.00</span>
</div>
</form>
- Input group LG input group XS input group SM
<form action="">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control"/>
</div>
</form>
- Check box and radio box plug-ins
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"/>
</span>
<input type="text" class="form-control"/>
</div>
</div>
</div>
</form>
- Button plug-in input group BTN
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default">Go</button>
</span>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
- Push button drop-down menu
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">real-time info</a></li>
<li><a href="">Journalism</a></li>
<li><a href="">about</a></li>
</ul>
</div>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
- Split Button drop-down menu
<form action="">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default">dropdown</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">real-time info</a></li>
<li><a href="">Journalism</a></li>
<li><a href="">about</a></li>
</ul>
</div>
<input class="form-control" type="text"/>
</div>
</div>
</div>
</form>
7, Navigation, navigation bar, breadcrumb navigation component
Navigation (TAB) nav
- Tab NAV tabs
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- Capsule tab NAV pills
<ul class="nav nav-pills">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- Vertical capsule tab NAV stacked
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- Tab NAV justified
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- Disable link disabled
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li class="disabled"><a href="">Project</a></li>
<li><a href="">Message</a></li>
</ul>
- Label with drop-down menu
<ul class="nav nav-tabs">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">about</a></li>
<li><a href="">real-time info</a></li>
<li><a href="">communication</a></li>
</ul>
</li>
</ul>
- Capsule label with drop-down menu
<ul class="nav nav-pills">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">about</a></li>
<li><a href="">real-time info</a></li>
<li><a href="">communication</a></li>
</ul>
</li>
</ul>
Add class. Navbar,. Navbar default to navbar < NAV > tab
- Default navigation bar
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="">poetries blog</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">about</a></li>
<li><a href="">real-time info</a></li>
<li><a href="">communication</a></li>
</ul>
</li>
</ul>
</nav>
- Responsive navigation bar
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">education</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">about</a></li>
<li><a href="">real-time info</a></li>
<li><a href="">communication</a></li>
</ul>
</li>
</ul>
</div>
</nav>
- Form in navigation bar
<form action="" class="navbar-form navbar-right">
<div class="form-group">
<input class="form-control" type="text" placeholder="Search"/>
</div>
<button class="btn btn-default">Search</button>
</form>
- Buttons navbar BTN in the navigation bar
<button class="btn btn-default navbar-btn">Submit</button>
- Text navbar text in navigation bar
<p class="navbar-text">Signed in as Thomas</p>
- Fixed to top, bottom navbar fixed top navbar fixed bottom
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="">education</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">Home</a></li>
<li><a href="">Project</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">Message <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">about</a></li>
<li><a href="">real-time info</a></li>
<li><a href="">communication</a></li>
</ul>
</li>
</ul>
</nav>
- Static top navbar static top
- Inverted navigation bar navbar reverse inverted navigation bar with white text on a black background
- Breadcrumb navigation
<ul class="breadcrumb"> <li><a href="">home page</a></li> <li><a href="">list</a></li> <li class="active">details</li> </ul>
8, Pagination, label, badge, giant screen, page header, thumbnail and warning box components
paging
- Default paging
<ul class="pagination">
<li><a href="">«</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">»</a></li>
</ul>
- Disabled and active status
<ul class="pagination"> <li class="disabled"><a href="">«</a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">»</a></li> </ul>
- Pagination LG pagination SM
- Page turning (Pager)
<ul class="pager">
<li><a href="">previous</a></li>
<li><a href="">next</a></li>
</ul>
- Aligned links
<ul class="pager">
<li class="previous"><a href="">← previous</a></li>
<li class="next"><a href="">next →</a></li>
</ul>
- Optional disable status
<ul class="pager">
<li class="previous disabled"><a href="">← previous</a></li>
<li class="next"><a href="">next →</a></li>
</ul>
label
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
- Badge badge
<a href="">Messages <span class="badge">20</span></a> <button class="btn btn-default">Messages <span class="badge">20</span></button>
- Giant screen jumbotron
<div class="jumbotron">
<div class="container">
<h1>hello world!!!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
content or information.</p>
<p><a class="btn btn-primary" href="">Learn more</a></p>
</div>
</div>
- Page header
<div class="page-header">
<h1>Example page header
<small>Subtext for header</small>
</h1>
</div>
thumbnail
- Default style
<div class="col-md-3 col-sm-6">
<a class="thumbnail" href="">
</a>
</div>
- Custom content
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption"> <!--text-center-->
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href="#"Class =" BTN BTN primary "role =" button "> button</a>
<a href="#"Class =" BTN BTN default "role =" button "> button</a>
</p>
</div>
</div>
</div>
Warning box
- Basic default style
<div class="alert alert-success">success! The submission was well completed.</div> <div class="alert alert-info">Information! Please pay attention to this information.</div> <div class="alert alert-warning">Warning! Please do not submit.</div> <div class="alert alert-danger">Wrong! Please make some changes.</div>
- Warning box that can be closed < button type = "button" class = "close" data disassiss = "alert" > ×</ button>
- Links in warnings
<div class="alert alert-success">
<a href="#"Class =" alert link "> successful! The submission is well completed</a>
</div>
9, Progress bar, media object, list group, panel, responsive insert component
progress bar
- Default progress bar
<div class="progress">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
- Progress bar for scenario change
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%;">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:45%;">45%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
</div>
- Progress striped progress bar
<div class="progress progress-striped">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
- Animated progress bar active
<div class="progress progress-striped active">
<div class="progress-bar" style="width:45%;">45%</div>
</div>
- Stacked progress bar
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
<div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
</div>
Media object
<div class="media">
<a href="" class="pull-left"></a>
<div class="media-body">
<h4 class="media-heading">Media title</h4>
Here are some sample text. Here are some sample text.
Here are some sample text. Here are some sample text.
Here are some sample text. Here are some sample text.
Here are some sample text. Here are some sample text.
Here are some sample text. Here are some sample text.
</div>
</div>
List group
- Add national emblem to list group
<ul class="list-group">
<li class="list-group-item"><a href="">Free domain name registration <span class="badge pull-right">20</span></a></li>
<li class="list-group-item"><a href="">free Window Space hosting</a></li>
<li class="list-group-item"><a href="">Annual renewal cost</a></li>
</ul>
- Add link to list group
<div class="list-group">
<a href="" class="list-group-item active">Free domain name registration</a>
<a href="" class="list-group-item">free Window Space hosting</a>
<a href="" class="list-group-item">Annual renewal cost</a>
</div>
- Add custom content to a list group
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
panel
- Panel title
<div class="panel-heading">title</div>
- Panel footnote
<div class="panel-footer text-right">by zichen</div>
- Panel theme
<div class="panel panel-primary">...</div> <div class="panel panel-success">...</div> <div class="panel panel-info">...</div> <div class="panel panel-warning">...</div> <div class="panel panel-danger">...</div>
- Panel with table
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<table class="table">
<tr>
<td>Student number</td>
<td>full name</td>
<td>Age</td>
</tr>
</table>
</div>
- Panel with list group
<div class="panel panel-danger">
<div class="panel-heading">title</div>
<div class="panel-body">Panel content display area</div>
<ul class="list-group">
<li class="list-group-item">Free domain name registration</li>
<li class="list-group-item">free Window Space hosting</li>
<li class="list-group-item">Number of images</li>
<li class="list-group-item">24*7 support</li>
<li class="list-group-item">Annual renewal cost</li>
</ul>
<div class="panel-footer text-right">by zichen</div>
</div>
Responsive embedded components
- A fixed scale is automatically created according to the width of the external container of the embedded content, so that the browser can automatically determine the size of the content and zoom on various devices
These rules can be used directly for < iframe >, < embedded >, < video > and < Object > elements. - 16: 9 responsive
<div class="embed-responsive embed-responsive-16by9">
<embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
</div>
- 4: 3 response
<div class="embed-responsive embed-responsive-4by3">
<embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
well
- Basic well
<div class="well">Hello, I'm in the big Well Yes!</div>
- Size well LG well SM
<div class="well well-lg">Hello, I'm in the big Well Yes!</div> <div class="well well-sm">Hello, I'm in the small Well Yes!</div>
10, Pop ups, warning boxes, tabs, and tooltip plug-ins
Popup
- Pop up box click an element to pop up a container containing title and content
//Basic Usage
<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="Popup " data-content="This is a pop-up plugin">
Click pop up/Hide pop ups
</button>
- JavaScript initialization $('button').popover();
- Properties in the Popover plug-in:
- Data animation defaults to true and applies a CSS fade animation on popover. If false is set, it will not be applied.
- Data html is false by default, and the prompt content format is not allowed to be HTML. If it is set to true, the prompt content in HTML format can be set
- The default value of data placement is top, as well as bottom, left, right and auto. If Auto adjusts the appropriate position, if auto left, it will be displayed on the left as much as possible, but if the left does not work, it will be on the right.
- The data selector defaults to false. You can select to bind the specified selector.
- Data original title is an empty string by default, and the title of the pop-up box has lower priority than title
- Title is the default empty character string and the title of the pop-up box.
- The default value of data trigger is click, which indicates how to trigger popover. Other values are: hover, focus and manual. Multiple values are separated by spaces. Manual cannot be set at the same time as other values.
- The default value of data delay is 0, delaying the triggering of Popover (MS). If a number is passed, it indicates the number of milliseconds of show/hide. If an object is passed, the structure is: {show:500,hide:100}
- The default value of data container is false, which attaches the popover to a specific element. For example, if the combination button group prompts that the container is not enough, it can be attached to the body. Container: 'body'
- Data template changes the template of HTML prompt in the prompt box. The default value is:
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
- The default value of data content is empty, and the contents of the pop-up box are displayed.
- Data viewport sets the edge of the peripheral container. See the example for the specific code.
$('button').popover({
trigger:"click",
placement:"right",
viewport : {
selector : '#view'
}
});
- Methods in the Popover plug-in:
- Display $('button').popover('show');
- Hide $('button').popover('hide');
- Reverse display and hide $('button').popover('toggle');
- Hide and destroy $('button').popover('destroy');
- Events in the Popover plug-in:
- show.bs.popover is triggered when the show method is called
- Show.bs.popover is triggered when the entire pop-up window is displayed
- hide.bs.popover is triggered when the hide method is called
- hidden.bs.popover is triggered when the entire pop-up is completely closed
$('button').on('show.bs.tab', function () {
alert('call show Method!');
});
Warning box
- The warning box is the information box of click hour
//Basic example
<div class="alert alert-warning">
<button class="close" type="button" data-dismiss="alert">
<span>×</span>
</button>
<p>Warning: your browser does not support!</p>
</div>
- Add fade in and fade out effect < div class = "alert warning fade in" >
- If you use JavaScript, you can replace data dissis = "alert"
- Methods in the Alert plug-in:
$('.close').on('click', function () {
$('#alert').alert('close');
})
-
Alert
Events in plug-ins:
- close.bs.alert is triggered immediately after the close method is called
- closed.bs.alert is triggered immediately after the warning box is completely closed
$('#alert').on('close.bs.alert', function () {
alert('When close Called when the method is triggered!');
});
Tab
- Tabs are commonly referred to as tab functions
//Basic Usage
<ul class="nav nav-tabs">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li><a href="#bootstrap" data-toggle="tab">Bootstrap</a></li>
<li><a href="#jquery" data-toggle="tab">jQuery</a></li>
<li><a href="#extjs" data-toggle="tab">ExtJS</a></li>
</ul>
<div class="tab-content" style="padding: 10px;">
<div class="tab-pane active" id="html5">...</div>
<div class="tab-pane" id="bootstrap">...</div>
<div class="tab-pane" id="jquery">...</div>
<div class="tab-pane" id="extjs">...</div>
</div>
- You can set fade in and fade out effect fade, while in indicates that the preferred content is displayed by default
<div class="tab-pane fade in active" id="html5">
- You can also change to capsule type
<ul class="nav nav-pills">
- Data target using data target binding or not binding has the same effect
- Methods in Tab plug-in:
$('#nav a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
-
Tab
Events in plug-ins:
- show.bs.tab is triggered when the tab method is called
- Show.bs.tab is triggered when the entire tag is displayed
$('#nav a').on('show.bs.tab', function () {
alert('call tab Triggered when!');
});
Tooltips
- Tooltip is to display the relevant prompt when the selected element is on a specific element by moving the mouse
//Basic example <a href="#"Data toggle =" tooltip "title =" hypertext identifier "> HTML5</a>
- JavaScript initialization $('#section').tooltip();
- Data animation defaults to true and applies a CSS fade animation on the tooltip. If false is set, it will not be applied.
- Data html is false by default, and the prompt content format is not allowed to be HTML. If it is set to true, the prompt content in HTML format can be set.
- The default value of data placement is top, as well as bottom, left, right and auto. If Auto adjusts the appropriate position, if auto left, it will be displayed on the left as much as possible, but if the left does not work, it will be on the right.
- Data selector is false by default. You can select to bind the specified selector. rel="tooltip"
- Data original title is an empty string by default, and the content of the prompt has lower priority than title
- The default word empty character string of title is the content of the prompt.
- The default value of data trigger is hover foucs, which indicates how to trigger tooltip. Other values are click and manual. Multiple values are separated by spaces. Manual cannot be set at the same time as other values.
- The default value of data delay is 0, delaying the triggering of tooltip (MS). If a number is passed, it indicates the number of milliseconds of show/hide. If an object is passed, the structure is: {show:500,hide:100}
- The default value of data container is false, which attaches the tooltip to a specific element. For example, if the combination button group prompts that the container is not enough, it can be attached to the body. Container: 'body'
- Data template changes the template of HTML prompt in the prompt box. The default value is:
<div class='tooltip'>
<div class='tooltip-arrow'></div>
<div class='tooltip-inner'></div>
</div>
<a href="#" rel="tooltip"
data-toggle="tooltip"
title="Hypertext identifier"
data-animation="false"
data-html="true"
data-placement="auto"
data-selector="a[rel=tooltip]"
data-trigger="click"
data-delay="500"
data-template="<b>123</b>" >HTML5
</a>
$('#selector a').tooltip({
delay : {
show : 500,
hide : 100,
},
});
- Methods in the Tooltip plug-in:
- Display $('#section a').tooltip('show ');
- Hide $('#section a').tooltip('hide ');
- Reverse display and hide $('#section a').tooltip('toggle ');
- Hide and destroy $('#section a').tooltip('destroy ');
- Events in the Tooltip plug-in:
- show.bs.tooltip is triggered immediately when the show method is called
- Show.bs.tooltip is triggered after the prompt box is completely displayed to the user
- hide.bs.tooltip is triggered immediately when the hide method is called
- hidden.bs.tooltip is triggered after the prompt box is completely hidden
$('#select a').on('show.bs.tooltip', function () {
alert('call show Triggered when!');
});
//data-selector
$("#selector").tooltip({
selector:"a[rel='tooltip']"
});
- data-container
<div class="btn-group">
<button class="btn btn-default" title="Hypertext marker">left</button>
<button class="btn btn-default" title="Hypertext marker">middle</button>
<button class="btn btn-default" title="Hypertext marker">right</button>
</div>
$("button").tooltip({
delay:{
show:500,
hide:100
},
container:"body"
});
11, Drop down menu, scroll monitor, button and collapse plug-in
Drop down menu plug-in
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown"> drop-down menu <span class="caret"></span> </button>
<ul class="dropdown-menu">
<li><a href="#"> Home Page</a></li>
<li><a href="#"> Products</a></li>
<li><a href="#"> information</a></li>
<li><a href="#"> about</a></li>
</ul>
</div>
- If the button is outside the container, it can be bound through data target
<button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown">
- Method of the Dropdown plug-in:, but data is still required-*
- $('#btn').dropdown();
- $('#btn').dropdown('toggle');
- Events for the Dropdown plug-in:
- show.bs.dropdown is triggered immediately when the show method is called.
- Show.bs.dropdown is fully displayed in the drop-down menu and triggered after the CSS animation is completed.
- hide.bs.dropdown is triggered when the hide method is called but the hide has not been closed.
- hidden.bs.dropdown is triggered after the drop-down menu is completely hidden and the CSS animation is completed.
$('#dropdown').on('show.bs.dropdown', function () {
alert('In call show Method is triggered immediately!');
});
Scroll monitor plug-in
- The default value of data offset is 10. If the content is within 10 pixels from the scroll container, the corresponding menu will be highlighted
- Data spy sets scroll, which will set scroll container listening
- Data target setting #nav, bind the specified listening menu
- Methods of the scroll plug-in:
$("#scroll").scrollspy({
//offset: 0,
target: "#nav"
});
- activate.bs.scrollspy this event will be triggered by the scroll listening plug-in whenever a new entry is activated.
- Event bound to navigation
$('#nav').on('activate.bs.scrollspy', function () {
alert('This event will be triggered after a new entry is activated!');
});
-
Scrolling listeners also have an update container
DOM
Method of
- refresh method for updating container DOM
function removeSec(e) {
$(e).parents('.sec').remove();
$('#content').scrollspy('refresh');
}
Button plug-in
- Single switch
<button class="btn btn-primary" data-toggle="button" autocomplete="off">Single switch</button>
- Note: when Firefox loads pages multiple times, the button may keep the form disabled or selected. The solution is to add autocomplete="off".
- radio button
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="radio" name="sex" autocomplete="off" checked> male
</label>
<label for="" class="btn btn-primary">
<input type="radio" name="sex" autocomplete="off"> female
</label>
</div>
- Check button
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="checkbox" name="fa" autocomplete="off" checked> music
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> Sports
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> Fine Arts
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off"> computer
</label>
</div>
- Loading status
<button id="myButton" type="button" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading status </button>
$('#myButton').on('click', function () {
var btn = $(this).button('loading');
setTimeout(function () {
btn.button('reset');
}, 1000);
});
- The button method in the button plug-in has three parameters: toggle, reset and string (such as loading and complete).
- Can replace data toggle = "button"
$('button').on('click', function () {
$(this).button('toggle');
});
Folding plug-in
- Basic example
<button class="btn btn-primary" data-toggle="collapse" data-target="#content"> Bootstrap </button>
<div class="collapse" id="content">
<div class="well">
Bootstrap yes Twitter An open source toolkit for front-end development launched by Twitter Designer Mark Otto and Jacob Thornton Cooperative development,It's a CSS/HTML Framework. Currently,Bootstrap The latest version is 3.0 .
</div>
</div>
- Methods of Collapse plug-in: hide, show, toggle
$('button').on('click', function () {
$('#collapseOne').collapse('toggle');
});
-
Collapse
Events for plug-ins:
- show.bs.collapse is triggered immediately when the show method is called
- Show.bs.collapse the folded area is completely displayed and triggered
- hide.bs.collapse is triggered when the hide method is called
- hidden.bs.collapse this event is triggered after the folded area is completely hidden
Twelve, modal box, wheel plug-in
Modal box plug-in
- The pop-up component of the modal box requires three layers of div container elements, namely modal (modal declaration layer), dialog (window declaration layer) and content (content layer)
- In the content layer, there are three layers: header, body and footer
- In the mode box, remove show and add an id
<div class="modal" id="myModal"> <!-- Click the trigger mode box to display --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Mymodal "> click the pop-up window < / button > <!-- There are three sizes of pop-up windows, which are normal by default, and lg(large)and sm(Small) --> <div class="modal-dialog modal-lg"> <div class="modal-dialog sm-lg"> <!-- Fade in and fade out effect can be set --> <div class="modal fade" id="myModal">
- All plug-ins are based on JavaScript/jQuery.
- Four elements: usage, parameters, methods and events.
- usage
- You can use the data attribute data toggle data toggle = "modal" data target = "#mymodal"
- Data toggle indicates the trigger type
- Data target indicates the triggered node
- If < a > is used instead of < button >, data target can also be replaced by href="#myModal"
- Data target is recommended. In addition to the data toggle and data target declaration attributes, there are some options available
- parameter
- The Boolean value of data backdrop or the default value of 'static' is true, which indicates that there is a black gray transparent mask on the background, and click a blank background to close the pop-up window;
- If false, it indicates that there is no black gray transparent mask on the background, and clicking a blank background cannot close the pop-up window;
- If the string is' static ', it indicates that there is a black gray transparent mask on the background, and clicking blank cannot close the pop-up window.
- The Boolean value of data keyboard is true. If it is true, press esc to close the window; If it is false, press esc to close it.
- The Boolean value of data show is true. If it is true, it will be displayed by default during initialization; If false, it is hidden by default during initialization.
- The remote url path is null. If the value does not start with a # sign, it indicates a url address. Load the url content into the modal content container and load it only once.
- If it is a # number, it is the method to replace data target.
- Set directly in JavaScript
- Declared by jQuery
$('#myModal').modal({
show : true,
backdrop : false,
keyboard : false,
remote : 'index.html'
});
- method
- toggle .modal('toggle'); When triggered, reverse the switching pop-up status
- show .modal('show'); When triggered, a pop-up window is displayed
- hide .modal('hide'); When triggered, close the pop-up window
- Click to display pop-up window
$('#btn').on('click', function () {
$('#myModal').modal('show');
});
$('#myModal').modal({
show : false,
});
event
- show.bs.modal is triggered immediately when the show method is called.
- Show.bs.modal is fully displayed in the modal box and triggered after the CSS animation is completed.
- hide.bs.modal is triggered when the hide method is called but the hide is not closed.
- hidden.bs.modal is triggered after the modal box is completely hidden and the CSS animation is completed
$('#myModal').on('show.bs.modal', function () {
alert('stay show Triggered immediately when the method is called!');
});
$('#myModal').on('loaded.bs.modal', function () {
alert('Triggered after the remote data is loaded!');
});
Carousel map plug-in
-
data
Attribute interpretation:
- Data slide accepts the keyword prev or next to change the position of the slide relative to the current position;
- Data slide to to create an original sliding index to the bottom of the rotation. Data slide to = "2" will move the sliding block to a specific index, and the index counts from 0.
- The data ride = "carousel" attribute marks that the rotation starts animation playback when the page is loaded.
- The default value of data interval is 5000, and the waiting time of slides (milliseconds). If false, the rotation will not automatically start the cycle.
- Data pause by default, the rotation is suspended when the mouse stays in the slide area (hover), and the rotation is started when the mouse leaves.
- The default value of data wrap is true. Whether the rotation continues to cycle.
- If you call in JavaScript, you can directly use the key value pair method and remove data -;
$('#myCarousel').carousel({/ / set custom properties
interval : 2000,//Set auto play ` / 2 'seconds
pause : 'hover',//Sets the event for the pause button
wrap : false, //Only once
});
- method:
- cycle cycles through frames (left to right by default)
- pause stop the rotation
- number is rotated to the specified picture (the subscript starts from 0, similar to an array)
- prev cycle to previous project
- Next cycle to the next project
$('button').on('click', function () {//Click the button to execute
$('#myCarousel').carousel('cycle'); / / click to play automatically
}
- event
- slide.bs.carousel this event is triggered immediately when the slide instance mode is called.
- slid.bs.carousel this event is triggered when the rotation completes a slide
$('#myCarousel').on('slide.bs.carousel', function () {
alert('When called slide Triggered immediately when instance mode');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('Triggered when the rotation completes a slide');
});
-
bootstrap notes summary [copy to browser, open and zoom in]
Expand reading
- bootstrap Chinese tutorial
- [bootstrap convenient quick reference table - recommended](