16. Bootstrap
home
Contents
Overview
- training material: https://www.w3schools.com/bootstrap
- section Bootstrap Tutorial, BS Home
- target: mobile devices - size, device orientation, screen touch
- simulate the demo in the desktop
- by change the desktop screen size
- When the size is bigger, three divs are layout horizontally.
- When the size is bigger, three divs are layout vertically.
- You can not test the orientation change.
- no test on touch.
- The code is as below.
- the libraries
- meta tag
- class: container, row, col_sm_4
<![CDATA[
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap....bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs.../jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/...rap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
...
<div class="col-sm-4">
<h3>Column 3</h3>
</div>
</div>
</div>
]]>