[PDF] Bootstrap-Programming-Cookbook.pdf

View - Download Bootstrap-Programming-Cookbook.pdf

Previous PDF

Next PDF

Bootstrap Programming CookbookiBootstrap Programming Cookbook

Bootstrap Programming CookbookiiContents

1 Grid Example1

1.1 Introduction and Basic Setup

1

1.1.1 Introduction

1

1.1.2 Document Setup

1

1.2 Grid Options and Examples

2

1.2.1 The Grid Across Multiple Devices

2

1.2.2 Example 1: Stacked to Horizontal

3

1.2.3 Example 2 - Multi Device Support

5

1.3 Offsetting and Nesting Columns

6

1.3.1 Example 3 - Offsetting Columns

6

1.3.2 Example 4 - Nesting Columns

7

1.4 Conclusion

8

1.5 Download

8

2 Navbar Example9

2.1 Project Setup

9

2.2 Default Navbar

11

2.3 Navbar Components

12

2.3.1 Navbar Header

12

2.3.2 Navbar Links and Dropdowns

13

2.3.3 Forms

14

2.4 Static and Fixed Navbar

15

2.4.1 Fixed to Top

15

2.4.2 Fixed to Bottom

15

2.4.3 Static

16

2.5 Conclusion

16

2.6 Download

16 Bootstrap Programming Cookbookiii3 Table Example17

3.1 Initial Setup

17

3.1.1 Bootstrap Setup

17

3.1.2 HTML Setup

18

3.2 Basic Example

18

3.3 Table Examples

19

3.3.1 Striped Rows

20

3.3.2 Bordered Table

20

3.3.3 Hover Rows

20

3.3.4 Condensed table

21

3.3.5 Contextual Classes

21

3.4 Conclusion

23

3.5 Download

23

4 Dropdown Menu Example24

4.1 Project Setup

24

4.1.1 Boostrap Folder Structure

24

4.1.2 HTML Setup

25

4.2 The Default Example

25

4.3 Cases and Examples

26

4.3.1 Dropdown Headers

26

4.3.2 Dropdown Dividers

27

4.3.3 Disabled Menu Items

27

4.4 Did you know?

28

4.5 Conclusion

29

4.6 Download

29

5 Form Example30

5.1 Project Folder Setup

30

5.1.1 Folder Structure

30

5.1.2 HTML Document

31

5.2 Basic Example

31

5.3 Cases and Examples

32

5.3.1 Inline Form

32

5.3.2 Horizontal Form

33

5.3.3 Supported Controls

34

5.3.3.1Inputs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34

5.3.3.2Textarea. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34

5.3.3.3Checkboxes and Radios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35

Bootstrap Programming Cookbookiv5.3.3.4Inline checkboxes and radios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36

5.3.3.5Selects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36

5.3.4 Static Control

37

5.3.5 Readonly State

38

5.3.6 Validation States

38

5.4 Conclusion

39

5.5 Download

39

6 Layout Example40

6.1 Project Setup

40

6.1.1 Project Folder Setup

40

6.1.2 Main HTML Setup

41

6.2 What is to be done?

41

6.3 Coding the Layout with Bootstrap

42

6.3.1 Coding the Navigation Menu

42

6.3.2 Coding the Carousel

43

6.3.3 Coding the Services Section

45

6.3.4 Coding the Team Section

46

6.3.5 Coding the Contact Form

47

6.3.6 Coding the Footer Section

48

6.4 Conclusion

49

6.5 Download

49

7 Tooltip Example50

7.1 Project Setup

50

7.1.1 Project Folder Setup

50

7.1.2 Main HTML Setup

51

7.2 Usage & Examples

51

7.2.1 Tooltips on Links

52

7.2.2 Tooltips on Buttons

52

7.3 Options

53

7.3.1 animation

53

7.3.2 container

53

7.3.3 delay

53

7.3.4 html

53

7.3.5 placement

54

7.3.6 selector

54

7.3.7 title

54

7.3.8 trigger

54

Bootstrap Programming Cookbookv7.4 Methods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

7.4.1.tooltip(show). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54

7.4.2.tooltip(hide). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54

7.4.3.tooltip(toggle). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54

7.4.4.tooltip(destroy). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55

7.5 Events

55

7.6 Conclusion

55

7.7 Download

55

8 Panel Example56

8.1 Project Setup

56

8.1.1 Project Folder Setup

56

8.1.2 Main HTML Setup

57

8.2 Default Example

57

8.3 Cases and Examples

58

8.3.1 Panel with Heading

58

8.3.2 Panel with Footer

59

8.3.3 Contextual Alternatives

59

8.3.4 Panels with Tables

60

8.3.5 Panels with List Groups

61

8.4 Conclusion

62

8.5 Download

62

9 Popover Example63

9.1 Project Setup

63

9.1.1 Project Folder Setup

63

9.1.2 Main HTML Setup

64

9.2 Cases and Examples

65

9.2.1 A Default Popover

65

9.2.2 Four Directions on Popovers

65

9.2.3 Dismissable Popover

66

9.3 Options

67

9.3.1animation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

9.3.2container. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

9.3.3content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

9.3.4delay. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

9.3.5html. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

9.3.6placement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

9.3.7selector. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

Bootstrap Programming Cookbookvi9.3.8title. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

9.3.9trigger. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68

9.3.10viewport. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68

9.4 Methods

68

9.4.1.popover(show). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68

9.4.2.popover(hide). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68

9.4.3.popover(toggle). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68

9.4.4.popover(destroy). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68

9.5 Events

68

9.6 Conclusion

69

9.7 Download

69

10 Tabs Example70

10.1 Project Setup

70

10.1.1 Project Folder Setup

70

10.1.2 Main HTML Setup

71

10.2 The Main Example

71

10.2.1 The Markup

72

10.2.2 The Result

73

10.3 Methods & Events

73

10.3.1 Methods

73

10.3.2 Events

73

10.4 Conclusion

74

10.5 Download

74

11 Modal Example75

11.1 HTML markup for modals

75

11.2 It doesn"t work!

77

11.3 Customize your modal

77

11.4 Download

79
Bootstrap Programming CookbookviiCopyright( c)Exelixis Media P .C., 2015 All rights reserved

Without

limiting the rights under copyright reserved above no part of this publication may be reproduced stored or introduced into a retrieval system or transmitted in any form or by any means electronic mechanical photocopying recording or otherwise without the prior written permission of the copyright owner

Bootstrap Programming CookbookviiiPreface

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML and CSS-

based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript

extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back

end" or server. Bootstrap is the most-starred project on GitHub, with over 88K stars and more than 37K forks. (Source:

In this ebook, we provide a compilation of Bootstrap based examples that will help you kick-start your own web projects. We

cover a wide range of topics, from grids and navigation bar creation, to layouts and forms design. With our straightforward

tutorials, you will be able to get your own projects up and running in minimum time.

Bootstrap Programming CookbookixAbout the Author

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much

as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering,

at the same time he works as a freelancer on both web programming and graphic design.

Bootstrap Programming Cookbook1 / 79Chapter 1

Grid Example

In this tutorial we"re considering a very fundamental concept of front-end frameworks, the grid system and we"re doing so using

Bootstrap. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the

web.quotesdbs_dbs11.pdfusesText_17

[PDF] bootstrap quick guide

[PDF] bop inmate discipline codes

[PDF] bop policies

[PDF] bop reentry handbook

[PDF] bora bora zip code

[PDF] borjas labor economics pdf

[PDF] bose soundtouch 300 remote codes

[PDF] bosque programming language

[PDF] boston city council

[PDF] boston election 2019 ballot

[PDF] boston election candidates 2019

[PDF] boston election day 2019

[PDF] boston mayoral election 2019

[PDF] boston municipal election 2019

[PDF] boston polling locations