-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMasDe12.html
44 lines (42 loc) · 2.33 KB
/
MasDe12.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
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Grid System. Anidar columnas.</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9 bg-light">
<p>Aquí tengo col-9</p>
</div>
<div class="col-4 bg-primary">
<p>Aquí tengo col-4. Pero 9+4=13 > 12.</p>
</div>
<div class="col-6 bg-warning">
<p>Antes se empezó una nueva línea. Aquí continúa</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-6 col-md-8 bg-success" >
<h2>Bootstrap</h2>
<p>Este framework es uno de los más populares del mercado, habiendo sido desarrollado por el equipo de Twitter. Bootstrap ha sido creado pensando en ofrecer la mejor experiencia de usuario tanto a usuarios de PC (IE7 incluido!), como a smartphones y tabletas.</p>
</div>
<div class="col-6 col-md-4 bg-info">
<h2>Foundation</h2>
<p>Junto con Bootstrap es uno de los frameworks más avanzados que existen en la actualidad.</p>
</div>
</div>
</div>
<!-- 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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>