5.1 Bootstrap - Responsive Web Design

Motivations
- Try to resize the window http://tru.ca.
- Doesn't the layout respond to the resizing? Is the horizontal scroll bar used?
- How to use the same applications over different screen sizes, such as monitors and cell phones?
- Any good design templates for TRUQA, such as menu and form?
- Try www.tru.ca. Try to shrink the window narrower and see what happens.
Responsive web design (RWD).
Bootstrap Tutorial
- Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
- Bootstrap 3, 4 and 5 have almost identical basic design templates and components. Bootstrap 4 supports more design components, templates, and themes. Bootstrap 5 uses VanillaJS instead of jQuery. This class uses Bootstrap 5.
- Read all in Bootstrap 5 Tutorial.
- Read all in Bootstrap Get Started.
  - What is RWD?
  - What does Bootstrap include? Are design templates included?
  - <meta> tag?
  - Typical structure to use Bootstrap
    1. HTML5
    2. <meta> tag
    3. Bootstrap CSS library, Bootstrap JS library
    4. Container - div.container or div.container-fluid class - not nestable
- Read all in Containers.
- How to adjust the layout within a container?
  - Read all in Bootstrap Grids.
  - div.col-(|sm|md|lg|xl|xxl)-(1|2|...|12) within div.row
- Trial 1: Let's try to give good divisions. Two rows, and two columns in the second row in a container.
  <link ???="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script ???="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <div class=???> <div class=??? style='background-color:LightBlue; height:100px;'> <h1 style='???:center'>COMP 3540</h1> </div> <div class=???> <div class='col-???-???' style='background-color:LightGreen; height:200px;'> The grass is always greener on the other side of the fence. </div> <div class='????' style='background-color:LightYellow; height:200px;'> Don't judge a book by its cover. </div> </div> </div>
- For consistent look and feel, and design templates - There are many topics to read here.
  - Read all in Bootstrap Tables.
  - Trial 2: Let's try to write a responsive table with the hover effect.
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <div class='???' <table class=????> <tr><th>Course Number</th><th>Course Title</th></tr> <tr><td>COMP 2680</td><td>Web Site Design and Development</td></tr> <tr><td>COMP 3540</td><td>Advanced Web Design and Programming</td></tr> <tr><td>COMP 3710</td><td>Applied Artificial Intelligence</td></tr> </table> </div>
  - Read all in Bootstrap Buttons for <a>, <input>, and <button>.
  - Trial 3: Let's try to write a button of info type.
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <div class='???' <input type='hidden' name='command' value='SignIn'> Username: <input type='text' name='username'><br> Password: <input type='password' name='password'><br> <input type='submit' class='??? ???' value='Submit'> </div>
  - Read all in Bootstrap Dropdowns.
  - Trial 4: Let's try to write a drop-down menu for TRUQA.
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script> <div class="???"> <button type="button" class="btn btn-primary dropdown-???" data-bs-toggle="???">TRUQA</button> <ul class="???"> <li class='dropdown-item' href="#">SignIn</li> <li ???? href="#">Join</li> <li ???? href="#">ForgotPassword</li> <li><hr class="????"></hr></li> <li ???? href="#">About Us</li> </ul> </div>
  - Read all in Bootstrap Collapse.
  - Read all in Bootstrap Navs. Study the last two examples carefully.
  - Read all in Bootstrap Forms.
  - Read all in Bootstrap Inputs.
  - Trial 5: Let's try to write a staked form for SignIn in TRUQA.
    <form> <label for="username" class='form-label'>Username:</label> <input type="text" class="form-control" id="username" placeholder="Enter username"> <label ???="password" ????>Password:</label> <input type="password" ???? id="password" ???="Enter password"> <button type="submit" class="btn btn-outline-primary">Submit</button> </form>
  - Read all in Bootstrap Modals. What is an modal window?
  - Trial 6: Let's try to write SignIn in TRUQA.
    <button type="button" class="btn btn-info btn-md" data-bs-toggle="???" data-bs-target="???">Open SignIn</button> <div class='??? fade' id='tr6-modal'> <div class='modal-dialog'> <div class='modal-???'> <form> <div class='modal-???'> <h2 class='modal-title'>SignIn</h2> </div> <div class='modal-???'> <div class="input-group"> <label class="control-label" for="tr6-username">Username:</label> <input type="text" class="form-control" id="tr6-username" placeholder="Enter username"> </div> <div class="input-group"> <label class="control-label" ???="tr6-password">Password:</label> <input type="password" class="form-control" id="tr6-password" ???="Enter password"> </div> </div> <div class='modal-???'> <div class="input-group"> <button type="???" class="btn btn-outline-danger" ????="???">Cancel</button> <button type="???" class="btn btn-outline-primary">Submit</button> </div> </div> </form> </div> </div> </div>
  - There are many other topics.
Some examples that can be used in TRUQA
- What is a modal?
- Dropdown menu in StartPage - SignIn menu item to display a modal window
- SignIn - SignIn modal window is initially displayed.
- Layout for MainPage
- Read carefully the source code of the above examples.
Some review questions and learning outcomes
- Questions for StartPage and MainPage
  - How to use a drop-down menu
  - How to open a modal window with a <button> or a <a>
  - How to use inputs in a form
  - How to use a form in a modal window
  - How to automatically display the SignIn modal window with error messages? You need to trigger a 'click' event on the SignIn menu item, as shown in the above 'SignIn' example.
- Questions for MainPage
  - How to use a table
  - How to use tabs/pills for menu bars (not drop-down menu)

5.1 Bootstrap 5 - Responsive Web Design