Bootstrap Layout Component

Posted by Isomerizer on Sun, 23 Jun 2019 20:48:02 +0200

Glyphicons
Format:
  1. <span class="glyphicon glyphicon-search"></span>
Icon( http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm)

Dropdowns 
    

  1. Dropdown specifies the drop-down menu, which is wrapped in. dropdown
    2. 

  2. dropdown-menu
    3. 

  3. dropdown-menu-right drop-down menu right aligned
    4. 

  4. Add a title to the drop down-header drop-down menu
    5. 

  5. dropup specifies a drop-down menu that pops up
    6. 

  6. disabled in the drop-down menu
    7. 

  7. . divider The divider in the drop-down menu
    8.
Basic format
    

  1. <div class="container">
    2. 

  2.   <div class="dropdown">
    3. 

  3.     <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">menu
    4. 

  4.     <span class="caret"></span></button>
    5. 

  5.     <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    6. 

  6.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">A</a></li>
    7. 

  7.       <li role="presentation" class="divider"></li>
    8. 

  8.       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">B</a></li>
    9. 

  9.     </ul>
    10. 

  10.   </div>
    11. 

  11. </div>
    12.

Button group 
    

  1. Class Description
    2. 

  2. Btn-group This class is used to form basic button groups. Place a series of buttons with class. BTN in. btn-group.	
    3. 

  3. Btn-toolbar. This class helps to combine several groups of <div class="btn-group"> into a <div class="btn-toolbar"> to obtain more complex components.
    4. 

  4. Btn-group-lg,.Btn-group-sm,.Btn-group-xs are class es that can be applied to adjust the size of the entire button group without the need to adjust the size of each button.
    5. 

  5. btn-group-vertical This class allows a group of buttons to be displayed vertically rather than horizontally.
    6.

Basic button
    

  1. <div class="btn-group">
    2. 

  2.     <button type="button" class="btn btn-default">Button 1</button>
    3. 

  3.     <button type="button" class="btn btn-default">Button 2</button>
    4. 

  4. </div>
    5.

Button drop-down menu
    

  1. <div class="btn-group">
    2. 

  2.     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    3. 

  3.         drop-down
    4. 

  4.         <span class="caret"></span>
    5. 

  5.     </button>
    6. 

  6.     <ul class="dropdown-menu">
    7. 

  7.         <li><a href="#">Dropdown Link 1</a></li>
    8. 

  8.         <li><a href="#">Dropdown Link 2</a></li>
    9. 

  9.     </ul>
    10. 

  10. </div>
    11.
Button pull-up menu
  1. <div class="btn-group dropup">

Input box group
Basic input box group
    

  1. <div style="padding: 100px 100px 10px;">
    2. 

  2.     <form class="bs-example bs-example-form" role="form">
    3. 

  3.         <div class="input-group"> #Prefix and Suffix Element Addition
    4. 

  4.             <span class="input-group-addon">$</span> #Prefix element
    5. 

  5.             <input type="text" class="form-control">
    6. 

  6.             <span class="input-group-addon">.00</span> #Suffix element
    7. 

  7.         </div>
    8. 

  8.     </form>
    9. 

  9. </div>
    10.

Input box group size
    

  1. .input-group-lg
    2. 

  2. .input-group-sm
    3.

Checkboxes and check boxes (using check boxes and radio plug-ins as prefix or suffix elements)
    

  1. <!--Check plug-ins-->
    2. 

  2. <span class="input-group-addon">
    3. 

  3.     <input type="checkbox"></span>
    4. 

  4. <!--Radio plug-in-->
    5. 

  5. <span class="input-group-addon">
    6. 

  6.     <input type="radio"></span>
    7.

Button plug-in (using buttons as prefix or suffix elements)
    

  1. <span class="input-group-btn">
    2. 

  2.    <button class="btn btn-default" type="button">Go!</button>
    3. 

  3. </span>
    4.

Navigation elements
The base class is. nav
Table navigation (label)
    

  1. <ul class="nav nav-tabs">
    2. 

  2. 	<li class="active"><a href="#">Home</a></li>
    3. 

  3. 	<li><a href="#">A</a></li>
    4.

Capsule navigation menu
    

  1. <ul class="nav nav-pills">
    2. 

  2. 	<li class="active"><a href="#">Home</a></li>
    3. 

  3. 	<li><a href="#">A</a></li>
    4.


Vertical Capsule Navigation Menu
    

  1. <ul class="nav nav-pills nav-stacked">
    2. 

  2. 	<li class="active"><a href="#">Home</a></li>
    3. 

  3. 	<li><a href="#">A</a></li>
    4.

Aligned navigation at both ends
nav-justified makes the label or capsule navigation menu as wide as the parent element.
Disable connections
Disad class creates a gray link and disables the hover status of the link

Navigation bar 
    

  1. 1. Add class. navbar,. navbar-default to the < NAV > tag.
    2. 

  2. 2. Adding role="navigation" to the above elements helps increase accessibility.
    3. 

  3. 3. Add a title class. navbar-header to the < div > element, which contains the < a > element with class navbar-brand. This will make the text look bigger.
    4. 

  4. 4. To add links to the navigation bar, simply add an unordered list with class. NAV and. navbar-nav.
    5.
Basic navigation bar
    

  1. <nav class="navbar navbar-default" role="navigation">
    2. 

  2. 	<div class="navbar-header">
    3. 

  3.         <a class="navbar-brand" href="#">HOME</a>
    4. 

  4.     </div>
    5. 

  5. 	<div>
    6. 

  6.         <ul class="nav navbar-nav">
    7. 

  7. 			<li class="active"><a href="#">A</a></li>
    8. 

  8. 	</div>
    9.
Responsive navigation bar
Folding navigation
    

  1. <nav class="navbar navbar-default" role="navigation">
    2. 

  2. 	<div class="navbar-header">
    3. 

  3. 		<button type="button" class="navbar-toggle" data-toggle="collapse"
    4. 

  4. 				data-target="#example-navbar-collapse">
    5. 

  5. 			<span class="sr-only">Navigation button</span>
    6. 

  6. 			<span class="icon-bar"></span> # Navigation button line
    7. 

  7. 			<span class="icon-bar"></span>
    8. 

  8. 		</button>
    9. 

  9.         <a class="navbar-brand" href="#">HOME</a>
    10. 

  10.     </div>
    11. 

  11. 	<div class="collapse navbar-collapse" id="example-navbar-collapse">
    12. 

  12. 		<ul class="nav navbar-nav">
    13. 

  13. 			<li class="active"><a href="#">A</a></li>
    14. 

  14. 			<li><a href="#">B</a></li>
    15. 

  15. 		</ul>
    16. 

  16. 	<div>
    17.

Navigation Bar Form
    

  1. <nav class="navbar navbar-default" role="navigation">
    2. 

  2. 	<div class="navbar-header">
    3. 

  3.         <a class="navbar-brand" href="#">HOME</a>
    4. 

  4.     </div>
    5. 

  5.     <div>
    6. 

  6.         <form class="navbar-form navbar-left" role="search">
    7. 

  7.             <div class="form-group">
    8. 

  8.                 <input type="text" class="form-control" placeholder="Search">
    9. 

  9.             </div>
    10. 

  10.             <button type="submit" class="btn btn-default">Submission</button>
    11. 

  11.         </form>
    12. 

  12.     </div>
    13.

Text in Navigation Bar
   .navbar-text
Component alignment method
Navbar-left.navbar-right is aligned left to right.
Fixed to the top or bottom
   .navbar-fixed-top .navbar-fixed-bottom
Static at the top
   .navbar-static-top 
Anti-color Navigation Bar
   .navbar-inverse

breadcrumbs 
    

  1. <ol class="breadcrumb">
    2. 

  2.     <li><a href="#">Home</a></li>
    3. 

  3.     <li><a href="#">A</a></li>
    4. 

  4.     <li class="active">November</li>
    5. 

  5. </ol>
    6.

Pagination 
    

  1. pagination adds the class to display pages on the page.
    2. 

  2. The. disabled,. active custom links define non-clickable links by using. disabled, and indicate the current page by using. active.
    3. 

  3. Pagination-lg,. pagination-sm use these class es to obtain items of different sizes.
    4.
Default Paging
    

  1. <ul class="pagination">
    2. 

  2.     <li><a href="#">&laquo;</a></li>
    3. 

  3.     <li><a href="#">1</a></li>
    4. 

  4.     <li><a href="#">2</a></li>
    5. 

  5.     <li><a href="#">3</a></li>
    6. 

  6.     <li><a href="#">&raquo;</a></li>
    7. 

  7. </ul>
    8.

Pager
    

  1. Page R. Add the class to get the flip link.
    2. 

  2. Previous,. next uses class. previous to align links to the left and. next to align links to the right.
    3. 

  3. Disad. Add the class to get a lighter look.
    4.
Default page turning
    

  1. <ul class="pager">
    2. 

  2.     <li class="previous"><a href="#">&larr; Older</a></li>
    3. 

  3.     <li class="next"><a href="#">Newer &rarr;</a></li>
    4. 

  4. </ul>
    5.


 
Label
    

  1. 

  2. Class description
    3. 

  3. label label-default default gray label
    4. 

  4. label label-primary "primary" type of blue label
    5. 

  5. label label-success "success" type green label
    6. 

  6. label label-info "info" type light blue label
    7. 

  7. Yellow label of. label-warning "warning" type
    8. 

  8. label label-danger "danger" type red label
    9.
Badges (similar labels)
  1. <span class="badge">..</span>
Jumbotron
   .jumbotron
    

  1. <div class="container">
    2. 

  2.    <div class="jumbotron">
    3. 

  3.         <h1>HOME</h1>
    4. 

  4.       </p>
    5. 

  5.    </div>
    6. 

  6. </div>
    7.

thumbnail
    

  1. <a href="#" class="thumbnail">
    2. 

  2. 
    <img src="picture.jpg" alt="General placeholder thumbnails">

    3. 

  3. </a>
    4.
Alerts
    

  1. <div class= "alert alert-success">success! The submission was well completed. </div>
    2. 

  2. <div class= "alert alert-info">information! Please pay attention to this information. </div>
    3. 

  3. <div class= "alert alert-warning">warning! Please do not submit. </div>
    4. 

  4. <div class= "alert alert-danger"> error! Please make some changes. </div>
    5.

Progress bar
    

  1. <div class="progress">
    2. 

  2.     <div class="progress-bar" role="progressbar" aria-valuenow="60" 
    3. 

  3.         aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> #style progress bar location
    4. 

  4.         <span class="sr-only">40% complete</span>
    5. 

  5.     </div>
    6. 

  6. </div>
    7.
Stripe progress bar
  1. <div class="progress progress-striped">
Progress bar of animation
  1. <div class="progress progress-striped active">

Multimedia Object 
    

  1. Media: This class allows multimedia (images, videos, audio) in the media object to float to the left or right of the content block.
    2. 

  2. media-list: If you need a list that is part of an unordered list, you can use the class. Can be used for comment lists and article lists.
    3. 


    

  1. <div class="media">
    2. 

  2. 	<a class="pull-left" href="#">
    3. 

  3. 		<img class="media-object" src="pictrue.jpg" alt="Media Objects">
    4. 

  4. 	</a>
    5. 

  5. 	<div class="media-body">
    6. 

  6. 		<h4 class="media-heading">Media headlines</h4>
    7. 

  7.         file file 
    8. 

  8. 	</div>
    9. 

  9. </div>
    10.

List group 
    

  1. Add class. list-group to the element <ul>.
    2. 

  2. Add class. list-group-item to <li>.
    3.

Panels 
    

  1. <div class="panel panel-default">
    2. 

  2.     <div class="panel-heading">
    3. 

  3.         <h3 class="panel-title">
    4. 

  4.             Title
    5. 

  5.         </h3>
    6. 

  6.     </div>
    7. 

  7.     <div class="panel-body">
    8. 

  8.         content
    9. 

  9.     </div>
    10. 

  10. 	<div class="panel-footer">footnote</div>
    11. 

  11. </div>
    12.
Panels with Contextual Colors
  1. Use the context state class panel-primary, panel-success, panel-info, panel-warning, panel-danger to set up the panel with context color.

Well
Well is a container that causes content indentation or illustration effects
   .well
size
   .well-lg
   .well-sm
Learning: http://www.runoob.com/bootstrap

Hot Topics

©2025 Programmer Think