AE-Books.online / Знания и навыки / Компьютерная литература / Книги о компьютерах / Bootstrap: Быстрое создание современных сайтов

Книга - Bootstrap: Быстрое создание современных сайтов

200 стр. 144 иллюстрации
12+
Автор(ы):
Язык:
Полная версия книги
Скачать
ePub
fb2
txt
Читать онлайн
Бумажная версия
a
A


Warning: mb_convert_encoding(): Unable to detect character encoding in /var/www/u2150601/data/www/ae-books.online/wp-content/themes/twentyfifteen/content.php on line 442
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):













Bootstrap ! DOCTYPE, lang charset:













, ࠖ mobile-first. , , viewport:



Bootstrap . container . container-fluid .



My First Bootstrap Page



This is some text.









My First Bootstrap Page



This is some text.





. 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, ,
, :











:








:

xs

sm

md

lg

, 12 .

, col-md-6:



col-md-6


col-md-6




, :













:

1

2

4

:





This is part ofour grid.





This is part ofour grid.





This is part ofour grid.





This is part ofour grid.





:








, :








, :
















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.






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.










Lorem ipsum dolor sit amet.






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.






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:.

green pushed 4



red pulled 4











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


, , , .

















E-mail:

















DOCTYPE .

lang html charset meta .

  :













  :



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











































CSS, CSS :



, , , CSS .

. container Bootstrap Grid System.































 





















Top











Ѡ . alert-link .



×

Info!

This alert box could indicate aneutral informative change or action.











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






















,



Success








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
















. btn-block 100% .










. active .

. disabled .










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

. btn-group .

:


















:


















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











. btn-group-justified, .



Button 1

Button 2

Button 3




























Ѡ . btn-group .
















.


















.












































, . dropup.


















. btn-toolbar, .






Bootstrap Glyphicons


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

glyphicon , name . http://glyphicons.com, .












Print










:

?









:

. glyphicon.














glyphicon CSS.



.logo-small{

color: #f4511e;

font-size: 50px;

}







Ѡ [] Bootstrap , , .

Comments 10

















Message new 10








. label, . label-default,.label-primary,.label-success,.label-info,.label-warning,.label-danger .

Default Label

Primary Label

Success Label



Info Label

Warning Label

Danger Label









Bootstrap ProgressBars


Bootstrap :





70% Complete 70%












. 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 , .