-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBootstrap.html
139 lines (130 loc) · 9.8 KB
/
Bootstrap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Projektarbeit</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/Style.css">
<link rel="shortcut icon" href="Content/favico.ico">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.html">Projektarbeit</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link activeNavItem" href="Bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="jQuery.html" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
JQuery
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="JQuery.html">Basics</a>
<a class="dropdown-item" href="JQueryEffects.html">Effects</a>
<a class="dropdown-item" href="jQueryEffectsTheorie.html">Effects Code</a>
<a class="dropdown-item" href="hangman.html">Hangman</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="multimedia.html">Multimedia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="picture.html">Pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="video.html">Videos</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container">
<div class="Header-text">Bootstrap Doku</div>
<p>Visit <a href="https://www.getbootstrap.com">GetBootstrap</a> and download the latest version of Bootstrap.</p>
<p>Create a project folder, and copy all the donwloaded folders in your project folder.</p><br/><br/>
<h3>Starter template</h3><br/>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
<span class="nt"><head></span>
<span class="c"><!-- Required meta tags --></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">></span>
<span class="c"><!-- Bootstrap CSS --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span><span class="white">Hello, world</span><span class="nt"></h1></span>
<span class="c"><!-- Optional JavaScript --></span>
<span class="c"><!-- jQuery first, then Popper.js, then Bootstrap JS --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span></code></pre>
</figure>
<br/>
<br/>
<h3>How it works</h3><br/>
<p><a href="https://getbootstrap.com/docs/4.0/layout/grid/">Bootstrap’s grid system</a> uses a series of containers,
rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example
and an in-depth look at how the grid comes together.
</p>
<p>Breaking it down, here’s how it works:</p>
<ul>
<li>Containers provide a means to center your site’s contents. Use <code class="highlighter-rouge">.container</code> for fixed width or <code class="highlighter-rouge">.container-fluid</code> for full width.</li>
<li>Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin
method on <code class="highlighter-rouge">.row</code> to ensure all your content is aligned properly down
the left side.</li>
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
<li>Thanks to flexbox, grid columns without a set width will automatically layout with equal widths. For example,
four instances of <code class="highlighter-rouge">.col-sm</code> will each automatically be 25% wide for
small breakpoints.</li>
<li>Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want
three equal-width columns, you can use <code class="highlighter-rouge">.col-sm-4</code>.</li>
<li>Column <code class="highlighter-rouge">width</code>s are set in percentages, so they’re always fluid and sized
relative to their parent element.</li>
<li>Columns have horizontal <code class="highlighter-rouge">padding</code> to create the gutters between individual
columns, however, you can remove the <code class="highlighter-rouge">margin</code> from rows and <code class="highlighter-rouge">padding</code> from columns with <code class="highlighter-rouge">.no-gutters</code> on the <code class="highlighter-rouge">.row</code>.</li>
<li>There are five grid tiers, one for each <a href="https://getbootstrap.com/docs/4.0/layout/grid/#responsive-breakpoints">responsive breakpoint</a>:
all breakpoints (extra small), small, medium, large, and extra large.</li>
<li>Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g.,
<code class="highlighter-rouge">.col-sm-4</code> applies to small, medium, large, and extra large devices).</li>
<li>You can use predefined grid classes or Sass mixins for more semantic markup.</li>
</ul>
<br/>
<br/>
<h3>Components</h3><br/>
<p>All components you can use with bootstrap you can find <a href="https://getbootstrap.com/docs/4.0/components/">here</a>.
On the page you can just copy the code given. The only thing you have to do is to customize it. After this, you
can use it, if your project uses Bootstrap.</p>
<br/>
<br/>
<h3>Things to know</h3><br/>
<p><a href="https://getbootstrap.com/docs/4.0/examples/">Here</a> you can find some templates of websites made with
Bootstrap.
</p>
</main>
<footer class="footer">
<div class="container">
<div>© Flavio Müller 2k17</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script rel="JavaScript" src="js/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
</body>
</html>