Bootstrap:    
 


Bootstrap          Web-. Bootstrap   ,   HTML  CSS,  , , , , ,  ,     ,     JavaScript.   Bootstrap       ,       ,      .





Bootstrap:    



 



   



 ,2020

 ,  ,2020



ISBN978-5-4474-6231-4

     Ridero




  Bootstrap


   admin@tmsoftstudio.com



Bootstrap         Web . Bootstrap   ,  HTML CSS  , , , , ,  ,    ,    JavaScript.  Bootstrap      컠 ,       ,    .

Bootstrap        Twitter,        2011 GitHub.

Bootstrap    getbootstrap.com      CDN (Content Delivery Network):

<! Latest compiled and minified CSS>

<link rel=stylesheet href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<! jQuery library>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

<! Latest compiled JavaScript>

<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>

 Bootstrap    ! DOCTYPE, lang charset:

<!DOCTYPE html>

<html lang=en>

<head>

<meta charset=utf-8>

</head>

</html>

          ,        ࠖ    mobile-first.          ,      ,    viewport:

<meta name=viewport content=width=device-width, initial-scale=1>

 Bootstrap . container . container-fluid    .

<div class=container>

<h1> My First Bootstrap Page </h1>

<p> This is some text.</p>

</div>



<div class=container-fluid>

<h1> My First Bootstrap Page </h1>

<p> This is some text.</p>

</div>

. container       :

.container{

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

@media (min-width: 768px){

.container{

width: 750px;

}

}

@media (min-width: 992px){

.container{

width: 970px;

}

}

@media (min-width: 1200px){

.container{

width: 1170px;

}

}

. container-fluid    viewport:

.container-fluid{

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}




Bootstrap Grid System


Bootstrap     12 .

      ,    ,     :








 Bootstrap Grid System      .













       . row, , <div class=row>,   :

<div class=row>

<div class=col-*-*"> </div>

<div class=col-*-*"> </div>

<div class=col-*-*"> </div>

</div>

    :








       :

xs  

sm  

md   

lg   

   ,   12  .

,   col-md-6:

<div class=row>

<div class=col-md-6> col-md-6</div>

<div class=col-md-6> col-md-6</div>

</div>

         ,       :













    :

1   

2    

4   

 :

<div class=row>

<div class=col-sm-6col-lg-3>

This is part ofour grid.

</div>

<div class=col-sm-6col-lg-3>

This is part ofour grid.

</div>

<div class=col-sm-6col-lg-3>

This is part ofour grid.

</div>

<div class=col-sm-6col-lg-3>

This is part ofour grid.

</div>

</div>

      :








    ,          :








  ,   :

<div class=clearfix visible-xs-block> </div>

<div class=clearfix visible-sm-block> </div>








<section class=row>

<section class=col-xs-6col-sm-6col-md-3col-lg-3>

<div class=alert alert-danger> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div>

</section>

<section class=col-xs-6col-sm-6col-md-3col-lg-3>

<div class=alert alert-info> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>

</section>

<div class=clearfix visible-xs-block> </div>

<div class=clearfix visible-sm-block> </div>

<section class=col-xs-6col-sm-6col-md-3col-lg-3>

<div class=alert alert-info> Lorem ipsum dolor sit amet. </div>

</section>

<section class=col-xs-6col-sm-6col-md-3col-lg-3>

<div class=alert alert-info> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros. </div>

</section>

</section>

       visible.      hidden:


















 ,    visible-sm-block,     ,    hidden-sm,    .

    ,    col-*-offset-*,      xs, sm, md, lg (   md),     111.    ,    margin-left.













        col-md-push-* col-md-pull-* ,     111.     CSS  left: right:.

<div class=col-md-4col-md-push-4> <p> green pushed 4</p> </div>

<div class=col-md-4col-md-pull-4> <p> red pulled 4</p> </div>









 1 Bootstrap


1

  Twitter Bootstrap?



2

  Bootstrap?



3

 Bootstrap   ?



4

  Contextual   Bootstrap?



5

  Bootstrap Grid System?



6

  Bootstrap  ?



7

    Bootstrap.



8

  Offset  ?



9

    Bootstrap?



10

   ?



11

   Bootstrap.



12

   Normalize Bootstrap?



13

  Lead Body Copy?



14

    Bootstrap.



15

  glyphicons?



16

  Glyphicons?



17

   transition?



18

  Modal ?



19

   Dropdown?



20

  Bootstrap ?



21

   ?



22

      ?



23

  ,    ?



24

           ?



25

     , ?



26

  input ?



27

    ?



28

    ?



29

     ?



30

  bootstrap navbar?



31

  NavBar bootstrap?



32

  bootstrap breadcrumb?



33

      ?



34

    ?



35

  bootstrap ?



36

  bootstrap ?



37

  Bootstrap Jumbotron?



38

  Bootstrap page header?



39

   thumbnails,  Bootstrap?



40

  ,  Bootstrap?



41

  bootstrap alerts?



42

  bootstrap alert?



43

  Bootstrap Dismissal Alert?



44

  -,  Bootstrap?



45

   ,  bootstrap?



46

  - ,  bootstrap?



47

   -,  bootstrap?



48

   ,  bootstrap?



49

  bootstrap -?



50

  . media  bootstrap?



51

  . media-list  bootstrap?



52

  bootstrap panels?



53

  bootstrap  ?



54

  bootstrap  ?



55

      ?



56

    bootstrap ?



57

   listgroup  bootstrap ?



58

  bootstrap well?



59

  Scrollspy ?



60

  affix ?




       Bootstrap


      , ,  ,  .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml: lang=en lang=en>

<head>

<title> </title>

<meta http-equiv=content-type content=application/xhtml+xml; charset=UTF-8/>

<meta name=author content=/>

<meta name=description content=/>

<meta name=robots content=index, follow/>

<link rel=stylesheet type=text/css media=screen href="/file/theme/css/screen. css/>

</head>



<body>



<! header>

<div id=header-wrap> <div id=header>

<aname=top></a>

<h1 id=logo-text> <ahref=# title=> </a> </h1>

<p id=slogan></p>

<div id=nav>

<ul>

<li> <ahref=> Home </a> </li>

<li> <ahref=#> Page1</a>

<ul style=height: auto; overflow: auto>

<li> <ahref=#> Page11</a> </li>

</ul>

</li>

<li> <ahref=#> Page2</a>

<ul style=height: auto; overflow: auto>

<li> <ahref=#> Page21</a> </li>

<li> <ahref=#> Page21</a> </li>

</ul>

</li>

</ul>

</div>



<div id=google-search>

<script>

(function (){

var cx =;

var gcse = document.createElement (script);

gcse. type = text/javascript;

gcse.async = true;

gcse.src = (document.location.protocol == https:'? https:': http:)+

//www.google.com/cse/cse.js?cx=' +cx;

var s = document.getElementsByTagName (script)[0];

s.parentNode.insertBefore (gcse,s);

})();

</script>

<gcse: search> </gcse: search>

</div>



</div>

</div>



<! content-outer>



<div id=content-wrap class=clear>

<div id=content>

<div style=width:1150px; height:15px; background: url(/file/theme/images/top.png);>

</div>

<div id=main>



</div>



<! sidebar>

<div id=sidebar style=width:250px;>

<div class=sidemenu>

<ul>

<li> <ahref=> Home </a> </li>

<li> <ahref=#> Page1</a>

<ul style=height: auto; overflow: auto>

<li> <ahref=#> Page11</a> </li>

</ul>

</li>

<li> <ahref=#> Page2</a>

<ul style=height: auto; overflow: auto>

<li> <ahref=#> Page21</a> </li>

<li> <ahref=#> Page21</a> </li>

</ul>

</li>

</ul>

</div>

<! /sidebar > </div>



</div>

<! /content-out>

</div>



<! footer-outer>



<div id=footer-outer class=clear>

<div id=footer-wrap>

<div style=margin-left:500px; float: left>

<p> <strong> <ahref=#top> Top </a> </strong></p>

<p style=margin-left:-100px;>

&copy; 2015<strong> </strong>

<strong style=margin-left:20px;"> E-mail: </strong>

</p>

</div>

</div>



<! /footer-outer>

</div>

</body>

</html>

 DOCTYPE <!DOCTYPE html>.

 lang  html  charset  meta  .

   <head> :

<! Latest compiled and minified CSS>

<link rel=stylesheet href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<! jQuery library>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<! Latest compiled JavaScript>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <head> :

<meta name=viewport content=width=device-width, initial-scale=1>

  . container ,  Bootstrap Grid System Bootstrap Navigation Bar,  ,    .

<div class=container header>

<div class=row>

<nav class=navbar navbar-inverse>

<div class=container-fluid>

<div class=navbar-header>

<button type=button class=navbar-toggle data-toggle=collapse data-target=#myNavbar>

<span class=icon-bar> </span>

<span class=icon-bar> </span>

<span class=icon-bar> </span>

</button>

</div>

<div class=collapse navbar-collapse id=myNavbar>

<ul class=nav navbar-nav>

<li> <ahref="/"> Home </a> </li>

<li class=dropdown>

<aclass=dropdown-toggle data-toggle=dropdown href=#> Page1 <span class=caret> </span></a>

<ul class=dropdown-menu inverse-dropdown>

<li> <ahref=#> Page11</a> </li>

</ul>

</li>

<li class=dropdown>

<aclass=dropdown-toggle data-toggle=dropdown href=#> Page2 <span class=caret> </span></a>

<ul class=dropdown-menu inverse-dropdown>

<li> <ahref=#> Page21</a> </li>

<li> <ahref=#> Page22</a> </li>

<li> <ahref=#> Page23</a> </li>

<li> <ahref=#> Page24</a> </li>

<li> <ahref=#> Page25</a> </li>

</ul>

</li>

<li> <ahref=#> Contacts </a> </li>

</ul>

</div>

</div>

</nav>



</div>

<aname=top></a>



<div class=row>

<div class=col-sm-6text-center>

<h1> <ahref="/"> </a> </h1>

<p></p>

</div>

<div class=col-sm-4pull-right>

<script>

(function (){

var cx =;

var gcse = document.createElement (script);

gcse. type = text/javascript;

gcse.async = true;

gcse.src = (document.location.protocol == https:'? https:': http:)+

'//cse.google.com/cse. js? cx=' +cx;

var s = document.getElementsByTagName (script)[0];

s.parentNode.insertBefore (gcse,s);

})();

</script>

<gcse: searchbox-only> </gcse: searchbox-only>

</div>

<style>

.gsc-search-button{

display: none;

}



.gsib_a{

height:40px;

}



.gsc-input-box{



height: 40px;

}

</style>

<div style=height:15px; background: black;" class=col-sm-12>

</div>

</div>

</div>

     CSS,    CSS :

<style>

body{

font-size:18px;

font-famile: Georgia;

color: #000;

margin:0;

padding:0;

background: gray;



}



.header{

/* Permalink use toedit and share this gradient: http://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+4,fdffff+7,fdffff+7,e1ffff+17,e6f8fd+28,c8eefb+47,bee4f8+68,b1d8f5+100*/

background: #e1ffff; /* Old browsers*/

background: -moz-linear-gradient (top, #e1ffff 0%, #e1ffff 4%, #fdffff 7%, #fdffff 7%, #e1ffff 17%, #e6f8fd 28%, #c8eefb 47%, #bee4f8 68%, #b1d8f5 100%); /* FF3.615*/

background: -webkit-linear-gradient (top, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* Chrome1025,Safari5.16*/

background: linear-gradient (tobottom, #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+*/

filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=#e1ffff, endColorstr=#b1d8f5, GradientType=0); /* IE69*/



}



.inverse-dropdown{

background-color: black;

}

.inverse-dropdown li a{

color: white;

}



.inverse-dropdown li a: hover{

color: black;

}



.content{

background: lightgrey;

}



.footer{

/* Permalink use toedit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+86,207cca+93,7db9e8+100*/

background: #1e5799; /* Old browsers*/

background: -moz-radial-gradient (center, ellipse cover, #1e5799 0%, #2989d8 86%, #207cca 93%, #7db9e8 100%); /* FF3.615*/

background: -webkit-radial-gradient (center, ellipse cover, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* Chrome1025,Safari5.16*/

background: radial-gradient (ellipse at center, #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+*/

filter: progid:DXImageTransform.Microsoft.gradient (startColorstr=#1e5799, endColorstr=#7db9e8, GradientType=1); /* IE69fallback on horizontal gradient*/



}



.navigation{

margin: 10px 20px; padding-bottom: 10px;

width: 560px;

}

.navigation a: link,

.navigation a: visited{

float: left;

display: block;

margin: 10px 10px 00;

padding: 5px7px;

text-transform: lowercase;

text-decoration: none;

font-weight: bold;

color: #fff;

background: #2C76A6;

border-width:1px;

border-style: solid;

border-color: #86BBDF #245F86 #245F86 #86BBDF;

}

.navigation a: hover{

background: #FF3399;

border-width:1px;

border-style: solid;

border-color: #FF75BA #EA0075 #EA0075 #FF75BA;

}



</style>

 ,     ,     ,    CSS .

   . container  Bootstrap Grid System.

<! content-outer>

<div class=container content>

<div class=row>

<div class=col-sm-11col-md-offset-1>

<span class=pull-right>

<img src="/file/theme/add.jpg alt= width=200/>

</span>

<div style=padding-top:50px;>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle. js> </script>

<! adds>

</script>

</div>

</div>

</div>

<div class=row>

<div class=col-sm-10>

<! content>

<p>

&nbsp;

</p>

</div>

</div>

</div>



<! /content-out>



<! footer-outer>

<div class=container footer>



<p style=position: fixed; bottom: 12px; right: 5px; opacity: 1; cursor: pointer;"> <ahref=#top style=color: white;"> Top </a></p>

<div class=row>

<div class=col-*-* text-center>



<script type=text/javascript src="//yandex.st/share/share. js charset=utf-8> </script>



</div>

<div class=row style=color: darkblue;>

<div class=col-*-* text-center>

<br/>

<p>

&copy; 2016<strong> </strong>

<strong> admin@.com </strong>

</p>

</div>

</div>

</div>

<! /footer-outer>




Bootstrap Text/Typography


,    Bootstrap,   <body>    <p>,  14px,   1.428.

 ,  <p>    margin-,      (10px ).

Bootstrap  <h1> <h6>   :

h136px

h230px

h324px

h418px

h514px

h612px

      <small>,    85%:

<h1> h1 heading <small> secondary text </small> </h1>








Ѡ  class = lead      :

<p class = lead> This is an example paragraph demonstrating the use oflead body copy.</p>













 <strong>   .

 <em>   .

      :

<p class = text-left> Left aligned text.</p>








<p class = text-center> Center aligned text.</p>








<p class = text-right> Right aligned text.</p>








<p class=text-lowercase> Lowercased text.</p>








<p class=text-uppercase> Uppercased text.</p>








<p class=text-capitalize> Capitalized text.</p>








    :

<p class=text-justify> Justified text. Justified text. Justified text.</p>

  :

<p class=text-nowrap> No wrap text. No wrap text. No wrap text.</p>

 :

<p class = text-muted> This content is muted</p>








<p class = text-primary> This content carries aprimary class</p>








<p class = text-success> This content carries asuccess class</p>








<p class = text-info> This content carries ainfo class</p>








<p class = text-warning> This content carries awarning class</p>








<p class = text-danger> This content carries adanger class</p>








<p class=bg-primary> This text is important.</p>








<p class=bg-success> This text indicates success.</p>








<p class=bg-info> This text represents some information.</p>








<p class=bg-warning> This text represents awarning.</p>








<p class=bg-danger> This text represents danger.</p>








 <abbr>     ,    class=initialism   :

<abbr title = World Wide Web> WWW </abbr>








 <blockquote>    ,    class=blockquote-reverse   :

<p> This is adefault blockquote example. This is adefault blockquote example.</p>

<blockquote>

<p> This is adefault blockquote example. This is adefault blockquote example.</p>

</blockquote>

<blockquote class=blockquote-reverse>

<p> This is adefault blockquote example. This is adefault blockquote example.</p>

</blockquote>








 <mark>  :

<p> Use the mark element to<mark> highlight </mark> text.</p>








 <dl>, <dt> <dd>   :

<dl>

<dt> Coffee </dt>

<dd> black hot drink </dd>

<dt> Milk </dt>

<dd> white cold drink </dd>

</dl>








   class=dl-horizontal  -  :

<dl class=dl-horizontal>

<dt> Coffee </dt>

<dd> black hot drink </dd>

<dt> Milk </dt>

<dd> white cold drink </dd>

</dl>








 <code>   :

<p> HTML elements: <code> span </code>, <code> section </code>, and <code> div </code>.</p>








 <kbd>    :

<p> Use <kbd> ctrl + p </kbd> toopen the Print dialog box.</p>








 <pre>   ,   :

<pre>

Text inapre

element

is displayed inafixed-width

font, and it preserves

both spacesand

line breaks.

</pre>








   class=pre-scrollable    350px  .

 class=list-unstyled    :

<ul class=list-unstyled>

<li> Coffee </li>

<li>Tea

<ul>

<li> Black tea </li>

<li> Green tea </li>

</ul>

</li>

<li> Milk </li>

</ul>








 class=list-inline    :

<ul class=list-inline>

<li> Coffee </li>

<li> Tea </li>

<li> Milk </li>

</ul>








 <del> <s>  :

<p> Use the s element toindicate <s> text that is no longer relevant </s>.</p>

<p> Use the del element toindicate <del> deleted text </del>.</p>








 <u> <ins>  :

<p> Use the uelement toindicate <u> underlined text </u>.</p>

<p> Use the ins element toindicate <ins> inserted text </ins>.</p>








 <samp>  ,   :

<p> Toindicate sample output from acomputer program, use the samp element:</p>

<p> <samp> This text is output from acomputer program </samp></p>












Bootstrap . table  HTML   padding   :

<table class=table>

<thead>

<tr>

<th> Firstname </th>

<th> Lastname </th>

<th> Email </th>

</tr>

</thead>

<tbody>

<tr>

<td> John </td>

<td> Doe </td>

<td>john@example.com </td>

</tr>

<tr>

<td> Mary </td>

<td> Moe </td>

<td>mary@example.com </td>

</tr>

<tr>

<td> July </td>

<td> Dooley </td>

<td>july@example.com </td>

</tr>

</tbody>

</table>








  class=table table-striped      .








 class=table table-bordered    .








 class=table table-hover        .








 class=table table-condensed   .








Ѡ  success, danger, info, active, warning     .








   <div class=table-responsive>       768px.








:



    ?

:  . table.



      ?

:  . table-striped.



    ?

:  . table-bordered.



       ?

:  . table-hover.



    ?

:  . table-condensed.



     ?

:  . success,.danger,.warning







Bootstrap     :

. img-rounded   .

<img src="sample.jpg class=img-rounded alt=>

. img-circle    500px.

<img src="sample.jpg class=img-circle alt=>

. img-thumbnail     .

<img src="sample.jpg class=img-thumbnail alt=>

        ,  . img-responsive,    CSS  display: block; max-width: 100%; height: auto;.

<img class=img-responsive src="sample.jpg alt=>




Bootstrap Jumbotron


Jumbotron               .








     Jumbotron     .

 <div class=container>  Jumbotron    .

<div class=container>

<div class=jumbotron>

<h1> Bootstrap Tutorial </h1>

<p> Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>

</div>

</div>








  <div class=container>  Jumbotron  ,        .

  Jumbotron,       CSS . text-center.

<style>

.jumbotron{

background-color: #f4511e; /* Orange*/

color: #ffffff;

padding: 100px 25px;

}

</style>

<div class=jumbotron text-center>



</div>




Bootstrap Page Header


. page-header     .

<div class=container>

<div class=page-header>

<h1> Page Header H1 </h1>

</div>

<p> This is some text.</p>

<p> This is another text.</p>

<div class=page-header>

<h2> Page Header H2 </h2>

</div>

<p> This is some text.</p>

<p> This is another text.</p>

</div>









Bootstrap Wells


Ѡ . well       .

<div class=container>

<div class=row>

<div class=col-xs-6well>

somedata

</div>

<div class=col-xs-6well>

somedata

</div>

</div>

</div>








<div class=container-fluid>

<div class=row>

<div class=col-xs-12>

<div class=well id=left-well>

<form role=form>

<div class=form-group>

<label for=email> Email address: </label>

<input type=email class=form-control id=email>

</div>

<div class=form-group>

<label for=pwd> Password: </label>

<input type=password class=form-control id=pwd>

</div>

<div class=checkbox>

<label> <input type=checkbox> Remember me </label>

</div>

<button type=submit class=btn btn-primary> Submit </button>

</form>

</div>

</div>

</div>

</div>








Ѡ  class=well well-sm   class=well well-lg      well- :

<div class=well well-sm> Small Well </div>

<div class=well> Normal Well </div>

<div class=well well-lg> Large Well </div>









Bootstrap Alerts


Bootstrap Alerts     ,     , , ,   .

   Bootstrap Alert  . alert   . alert-success,.alert-info,.alert-warning . alert-danger,       .

<div class=alert alert-success>

<ahref=# class=close data-dismiss=alert aria-label=close> &times;</a>

<strong> Success! </strong> This alert box could indicate asuccessful or positive action.

</div>

<div class=alert alert-info>

<ahref=# class=close data-dismiss=alert aria-label=close> &times;</a>

<strong> Info! </strong> This alert box could indicate aneutral informative change or action.

</div>

<div class=alert alert-warning>

<ahref=# class=close data-dismiss=alert aria-label=close> &times;</a>

<strong> Warning! </strong> This alert box could indicate awarning that might need attention.

</div>

<div class=alert alert-danger>

<ahref=# class=close data-dismiss=alert aria-label=close> &times;</a>

<strong> Danger! </strong> This alert box could indicate adangerous or potentially negative action.

</div>








      <ahref=# class=close data-dismiss=alert aria-label=close> &times; </a>.

  class=alert alert-success fade in     .

      Javascript.

<div class=alert alert-success id=myAlert>

<ahref=# class=close> &times;</a>

<strong> Success! </strong> This alert box could indicate asuccessful or positive action.

</div>

<script>

$(document).ready (function (){

$(".close").click (function (){

$("#myAlert").alert (close);

});

});

</script>

Ѡ . alert-link      .

<div class=alert alert-info>

<ahref=# class=close data-dismiss=alert aria-label = close> &times;</a>

<ahref = # class = alert-link> <strong> Info! </strong>

This alert box could indicate aneutral informative change or action.

</a>

</div>




  


      . btn   . btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link.

<button type=button class=btn btn-default> Default </button>

<button type=button class=btn btn-primary> Primary </button>

<button type=button class=btn btn-success> Success </button>

<button type=button class=btn btn-info> Info </button>

<button type=button class=btn btn-warning> Warning </button>

<button type=button class=btn btn-danger> Danger </button>

<button type=button class=btn btn-link> Link </button>








      <a>, <button>, <input>.

<button type=button class=btn btn-default> Default </button>

<input type=button class=btn btn-primary value=Primary> </input>

<atype=button class=btn btn-success> Success</a>








 . btn-lg,.btn-md,.btn-sm,.btn-xs   .

<button type=button class=btn btn-primary btn-lg> Large </button>

<button type=button class=btn btn-primary btn-md> Medium </button>

<button type=button class=btn btn-primary btn-sm> Small </button>

<button type=button class=btn btn-primary btn-xs> XSmall </button>








 . btn-block  100%  .

<button type=button class=btn btn-primary btn-lg btn-block> Button </button>








. active    .

. disabled   .

<button type=button class=btn btn-primary disabled> Disabled Primary </button>








      . pull-left,.pull-right,.center-block.

. btn-group       .

 :

<div class=btn-group>

<button type=button class=btn btn-primary> Button 1</button>

<button type=button class=btn btn-primary> Button 2</button>

<button type=button class=btn btn-primary> Button 3</button>

</div>








 :

<div class=btn-group-vertical>

<button type=button class=btn btn-primary> Button 1</button>

<button type=button class=btn btn-primary> Button 2</button>

<button type=button class=btn btn-primary> Button 3</button>

</div>








           . btn-group-lg,.btn-group-md,.btn-group-sm,.btn-group-xs.

<div class=btn-group-vertical btn-group-lg>

<button type=button class=btn btn-primary> Button 1</button>

<button type=button class=btn btn-primary> Button 2</button>

<button type=button class=btn btn-primary> Button 3</button>

</div>

. btn-group-justified,   <a>      .

<div class=btn-group btn-group-justified>

<ahref=# class=btn btn-primary> Button 1</a>

<ahref=# class=btn btn-primary> Button 2</a>

<ahref=# class=btn btn-primary> Button 3</a>

</div>








  <button>    ,     div class=btn-group>.

<div class=btn-group btn-group-justified>

<div class=btn-group>

<button type=button class=btn btn-primary> Button 1</button>

</div>

<div class=btn-group>

<button type=button class=btn btn-primary> Button 2</button>

</div>

<div class=btn-group>

<button type=button class=btn btn-primary> Button 3</button>

</div>

</div>

Ѡ . btn-group      .

<div class=btn-group>

<button type=button class=btn btn-primary dropdown-toggle data-toggle=dropdown> Sony <span class=caret> </span> </button>

<ul class=dropdown-menu role=menu>

<li> <ahref=#> Tablet </a> </li>

<li> <ahref=#> Smartphone </a> </li>

</ul>

</div>








   .

<div class=btn-group>

<button type=button class=btn btn-primary> Sony </button>

<button type=button class=btn btn-primary dropdown-toggle data-toggle=dropdown>

<span class=caret> </span>

</button>

<ul class=dropdown-menu role=menu>

<li> <ahref=#> Tablet </a> </li>

<li> <ahref=#> Smartphone </a> </li>

</ul>

</div>








      .

<div class = btn-group>



<button type = button class = btn btn-default dropdown-toggle btn-lg data-toggle = dropdown>

Default

<span class = caret> </span>

</button>



<ul class = dropdown-menu role = menu>

<li> <ahref = #> Action </a> </li>

<li> <ahref = #> Another action </a> </li>

<li> <ahref = #> Something else here </a> </li>



<li class = divider> </li>

<li> <ahref = #> Separated link </a> </li>

</ul>

</div>



<div class = btn-group>

<button type = button class = btn btn-primary dropdown-toggle btn-sm data-toggle = dropdown>

Primary

<span class = caret> </span>

</button>



<ul class = dropdown-menu role = menu>

<li> <ahref = #> Action </a> </li>

<li> <ahref = #> Another action </a> </li>

<li> <ahref = #> Something else here </a> </li>



<li class = divider> </li>

<li> <ahref = #> Separated link </a> </li>

</ul>

</div>



<div class = btn-group>

<button type = button class = btn btn-success dropdown-toggle btn-xs data-toggle = dropdown>

Success

<span class = caret> </span>

</button>



<ul class = dropdown-menu role = menu>

<li> <ahref = #> Action </a> </li>

<li> <ahref = #> Another action </a> </li>

<li> <ahref = #> Something else here </a> </li>



<li class = divider> </li>

<li> <ahref = #> Separated link </a> </li>

</ul>

</div>








   ,   . dropup.

<div class = btn-group dropup>

<button type = button class = btn btn-primary dropdown-toggle data-toggle = dropdown>

Primary

<span class = caret> </span>

</button>



<ul class = dropdown-menu role = menu>

<li> <ahref = #> Action </a> </li>

<li> <ahref = #> Another action </a> </li>

<li> <ahref = #> Something else here </a> </li>



<li class = divider> </li>

<li> <ahref = #> Separated link </a> </li>

</ul>

</div>








      . btn-toolbar,         .

<div class = btn-toolbar role = toolbar>



<div class = btn-group>

<button type = button class = btn btn-default> Button 1</button>

<button type = button class = btn btn-default> Button 2</button>

<button type = button class = btn btn-default> Button 3</button>

</div>



<div class = btn-group>

<button type = button class = btn btn-default> Button 4</button>

<button type = button class = btn btn-default> Button 5</button>

<button type = button class = btn btn-default> Button 6</button>

</div>



<div class = btn-group>

<button type = button class = btn btn-default> Button 7</button>

<button type = button class = btn btn-default> Button 8</button>

<button type = button class = btn btn-default> Button 9</button>

</div>



</div>




Bootstrap Glyphicons


Bootstrap   260  Halflings  GLYPHICONS (http://glyphicons.com/)      .

 glyphicon    <span class=glyphicon glyphicon-name> </span>,  name  .     http://glyphicons.com,     <span class=halflings halflings-name> </span>.

<button type=button class=btn btn-info>

<span class=glyphicon glyphicon-search> </span> Search

</button>








<ahref=# class=btn btn-success btn-lg>

<span class=glyphicon glyphicon-print> </span> Print

</a>








:

  ?

<div class=container>

<span class=glyphicon-print> </span>

</div>



:

 . glyphicon.

<button type = button class = btn btn-default btn-lg>

<span class = glyphicon glyphicon-user> </span>

User

</button>

<button type = button class = btn btn-default btn-sm>

<span class = glyphicon glyphicon-user> </span>



User

</button>

<button type =button class = btn btn-default btn-xs>

<span class = glyphicon glyphicon-user> </span>

User

</button>








    glyphicon   CSS.

<span class=glyphicon glyphicon-wrench logo-small> </span>

.logo-small{

color: #f4511e;

font-size: 50px;

}




 


Ѡ  <span class=badge> [] </span> Bootstrap    , ,  .

<ahref=#> Comments <span class=badge> 10</span></a>








<button type=button class=btn btn-success> Messages <span class=badge> 3</span> </button>








<ahref=#> Message <span class=badge> new 10</span></a>








. label,  . label-default,.label-primary,.label-success,.label-info,.label-warning,.label-danger  <span>    .

<span class=label label-default> Default Label </span>

<span class=label label-primary> Primary Label </span>

<h3> <span class=label label-success> Success Label </span> </h3>

<span class=label label-info> Info Label </span>

<span class=label label-warning> Warning Label </span>

<span class=label label-danger> Danger Label </span>









Bootstrap ProgressBars


Bootstrap     :

<div class=progress>

<div class=progress-bar role=progressbar aria-valuenow=70 aria-valuemin=0 aria-valuemax=100 style=width:70%>

<span class=sr-only> 70% Complete </span>70%

</div>

</div>








 . sr-only      .

     style=width:70%.

Ѡ Javascript     :

$('.progress-bar).css (width, value+'%').attr (aria-valuenow, value);

 . progress-bar-success,.progress-bar-info,.progress-bar-warning,.progress-bar-danger    .




  .


   .

   ,     (https://www.litres.ru/timur-mashnin/bootstrap-bystroe-sozdanie-sovremennyh-saytov/)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .


