Week 09
Bootstrap
Bootstrap allows us to build faster and more responsive sites.
Bootstrap uses:
- Flexbox grid for it's layout
- rem for measurements
- Has device breakpoints to accomodate for different media sizes
Start Using Bootstrap
- Create a base HTML file
- Add in the Bootstrap CSS and JS
- The CDN used allows Bootstrap to be easily accessible across servers
- Start creating your interface uing Bootstrap
Paste the CSS style sheet in <head> before all other stylesheets
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
Add the following scripts just before closing </body> tag. Ensure that the jQuery script comes before these.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
Charts
- Easy to vuasilse
- Allow comparisons
- Data visualisation
- Identify pattern and trends
| Tables | Charts |
|---|---|
| You need to compare or look up individual values | Is used to convey a message that is contained in the shape of the data |
| You require precise values | Is used to show a relationship between many values |
| Values involve multiple units of measure | |
| The data has to communicate quantitive information, but not trends |