-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathalinhamento-textos.html
94 lines (62 loc) · 3.2 KB
/
alinhamento-textos.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
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- o "integrity" e o "crossorigin", não são necessários ppois estão sendo carregados diretamente da pasta. Caso carregados do site,
seria necess-ario deixar dentro do link -->
<!-- integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"-->
<title>Bootstrap - Alinhamentos textos</title>
</head>
<body style="margin-bottom: 200px; padding: 16px;">
<!-- Parágrafo justificado -->
<p class="text-justify">
Ah, se já perdemos a noção da hora. Se juntos já jogamos tudo fora.
Me conta agora como hei de partir. Se, ao te conhecer, dei pra sonhar,
fiz tantos desvarios. Rompi com o mundo, queimei meus navios. Me diz pra
onde é que inda posso ir. Se nós, nas travessuras das noites eternas.
Já confundimos tanto as nossas pernas. Diz com que pernas eu devo seguir.
Se entornaste a nossa sorte pelo chão. Se na bagunça do teu coração
Meu sangue errou de veia e se perdeu. Como, se na desordem do armário embutido
Meu paletó enlaça o teu vestido. E o meu sapato inda pisa no teu
</p>
<br>
<br>
<!-- ALINHAMENTO RESPONSIVO - text-<tela>-<alinhamento>
tela: >= 576px sm(small)
>= 768px md(medium)
>= 992px lg(large)
>= 1200px xl(extra large)
sufixos (sm, md, lg, xl)
alinhamento: left, center, right
-->
<p class="text-sm-right">tela >= 576px</p><!-- small -->
<p class="text-md-right">tela >= 768px</p><!-- medium -->
<p class="text-lg-right">tela >= 992px</p><!-- large -->
<p class="text-xl-right">tela >= 1200px</p><!-- extra large -->
<br>
<br>
<!-- classes d-inline - Elemento Block para inline -->
<h1 class="bg-success d-inline">Continue em frente</h1><!-- class bg-success aplica cor de fundo -->
<p class="bg-success d-inline">Quanto mais conheço, estudo e pesquiso, mais eu gosto de programar.
Vamos que podemos fazer muito mais!</p>
<br>
<br>
<!-- classes d-block - Elemento Inline para Block -->
<span class="bg-success d-block">Continue em frente!</span><br>
<span class="bg-success d-block">Go ahead!</span>
<br>
<br>
<!-- classes d-inline-block - Elemento Inline-Block -->
<h3 class="bg-warning d-inline-block">Vamos a delante!</h3><!-- class bg-warning aplica cor laranja de fundo -->
<h3 class="bg-success d-inline-block">Usted puede hacer!</h3>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>