Newer
Older
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
<!DOCTYPE html>
<html>
<head>
<!--Compatibilità con Microsoft e Responsività-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Fisrts Bootstrap Template</title>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body { padding-top: 70px; }
</style>
</head>
<body>
<!-- Barra di navigazione -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--Logo e pulsante per barra ridimensionata -->
<div class="navbar-header">
<!-- Bottone mostrato quando è tutto collapsed -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<!-- Questo è per i non vedenti -->
<span class="sr-only">Espandi barra di navigazione</span>
<!-- Questo aggiunge le barre orizzontali al menù compresso -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--Questo è il logo con il riferimento alla pagina iniziale -->
<a class="navbar-brand" href="Es2.html">Logo</a>
</div>
<!--Elementi della barra: serve per l'impostazione dei link -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="Es2.html">Link 1</a></li>
<li><a href="https://www.google.it">Link 2</a></li>
<li><a href="https://www.google.it">Link 3</a></li>
</ul>
<!-- Questo è semplive testo -->
<p class="navbar-text navbar-right">creato da Me</p>
</div>
</nav>
<!-- Riempimento della tabella -->
<div class="container">
<div class="row">
<div class="col-md-4"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
<div class="col-md-4"> <h1>Colonna 2</h1><img width="500" src="lunaPiccola.JPG" class="img-responsive"></div>
<div class="col-md-4"><h1>Colonna 3</h1>"Lorem ipsum dolor sit amet, ..."</div>
</div>
<div class="row">
<div class="col-md-4"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
<div class="col-md-8"> <h1>Colonna 2</h1>"Lorem ipsum dolor sit amet, …"</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><h1>Colonna 1</h1>"Lorem ipsum dolor sit amet, ..."</div>
</div>
</div>
<!-- jQuery e plugin JavaScript -->
<script src="src/jquery/dist/jquery.min.js"></script>
<script src="src/js/bootstrap.min.js"></script>
</body>
</html>
<!--INFORMAZIONI SULLA PAGINA-->
<!--Struttura a colonne.
La struttura inizia con il tag (riga 16):
<div class="container">
Una volta stabilita una riga la si divide in colonne.
La pagina è di 12 colonne. Se si vogliono fare 3 colonne occorre occupare
4 colonne per ciascuna di esse (righe 17-21):
<div class="col-md-4">...</div>
Se si vogliono fare colonne di dimensioni diverse occorre modificare il tag
(righe 22-25):
<div class="col-md-4">...</div> in <div class="col-md-N">...</div>
dove la somma degli N deve dare 12.
Se voglio lasciare colonne vuote (ossia un offset) occorre modificare sempre
lo stesso tag (righe 26-30):
<div class="col-md-6 col-md-offset-N">...<|div>
dove N è il numero di colonne di offset.
Se si inseriscono delle immagini è fondamentale inserire la classe (riga 19):
<img class="img-responsive">
così l'immagine si adatta alla casella della tabella.
Si possono annidare le tabelle all'interno di altre tabelle. Basta aggiungere
una <div class="row"> all'interno di una colonna.
e' possibile dichiarare una colonna poi un'altra e invertire il loro ordine
con delle classi ma questa cosa è abbastanza inutile.
Ci sono 4 classi per le colonne: col-xs-N, col-sm-N, col-md-N, col-lg-N.
Servono per capire la responsività nei dispositivi: md per i pc, sm per i
telefoni.Però la pagina si aggiorna da sola in base al dispositivo.
Si può inserire anche più di una classe per una colonna per modificare lo
spazio che quella colonna occupa in caso di cambio di dispositivo. Cosa non
troppo utile.
https://www.mrwebmaster.it/web-design/bootstrap-navbar_11413.html
-->