教學:
https://www.w3schools.com/bootstrap4/
https://bootstrap.hexschool.com/docs/4.2/getting-started/introduction/
複製以下內容到html檔，並儲存。
<!DOCTYPE html><html lang="en"><head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script></head><body><div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html>我們主要是要修改 <div class="container-fluid"> .... </div> 中的內容。
在bootstrap中尋找有用的元件，並加到你的網頁中。
<p class="text-primary">This text is important.</p> <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table><img src="cinqueterre.jpg" class="rounded-circle" alt="This is a building"> <img src="cinqueterre.jpg" class="img-thumbnail" alt="This is a building"> <div class="alert alert-success"><strong>Success!</strong> Indicates a successful or positive action.</div> <a href="abc.html" class="btn btn-info" role="button"><span class="glyphicon glyphicon-search"></span> Search Button</a><a href="def.html" class="btn btn-warning" role="button"><span class="glyphicon glyphicon-print"></span> Print Button</a><form action="target.php"> <div class="form-group"> <label for="usr">Name:</label> <input type="text" name="user" class="form-control" id="usr"></div><div class="form-group"> <label for="pwd">Password:</label> <input type="password" name="password" class="form-control" id="pwd"></div><div class="form-group"> <label for="selection">Select list:</label> <select class="form-control" id="selection" name="level"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select></div><input type="submit" class="btn btn-info" value="遞交"> </form>