# WK2 TINKER: Bootstrap
:::info
Tinker Tasks：
* Like we did with the prior Tinker, fork the codepen to play with it.
* COMPARE AND CONTRAST this Tinker (which uses Bootstrap) with last week’s codepen.
* Use the guiding prompts and questions to manipulate the code one thing at a time and see what happens.
* Articulate your understanding and share your findings and insights with your weekly group and/or the class.
:::

---
# FRAMEWORK: OVERARCHING
### In the settings of the CSS Pane (click on the gear) there is a section called Add External CSS. Remove the resource (Bootstrap) line.What happens to the page and why? You can add the resource back: https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css
* All the styles and layouts of pictures, tables and form are not working. For this webpage which is using Bootsrap framework, it provides the templates for forms, buttoms, tables and images. By revoming the Bootstrap, it will destroy whole page.
---
### Enter the above resource directly into your browser URL input to go to the page and scan through the resource. What is Bootstrap really?
* Bootstrap includes many codes like CSS, Html and javascript. It's more like a collection of pre-written reusable codes which help us to save time buidling a responsive website.
---
### I have a few CSS rules in the CSS pane. Comment them out. What happens to the page and why? What is the relation between my CSS and the External Resource? How does my CSS “intersect” with the External Resource? What do you think is the sequence of how the External Resource and my CSS are loaded? What kinds of things could happen, if I am careless with my own CSS rules? Are you stuck with all of Bootstrap’s rules? How does our own CSS come into play if we don’t like a particular Bootstrap rule?
*
---
### Compare this Tinker’s custom CSS vs. last week’s CSS.
What kind of specific rules did I have to make last week that I did not have to do this week to achieve a very similar result?
*
What then is the advantage of using a framework like Bootstrap?
*
What are some disadvantages of using a framework like Bootstrap?
*

---
### Compare the HTML from this week’s Tinker vs. last week’s Tinker HTML.
I use a class called .container in both. Is this a special class? Are they the same thing?
There are many more classes used in this week’s Tinker. Where do these classes come from?

---
### Remove classes like img-thumbnail and some of the danger, info, etc. classes in the table and/or try adding them to other elements. Might work, might not.
How do these kinds of classes relate and rely on the bigger structure and class rules of a framework?

---
### Analyze the form and refer to https://getbootstrap.com/docs/5.1/forms. Try to convert this BASIC form to an horizontal form and/or an inline form. Some of the examples have extra attributes like id, placeholder.
Are the non-class attributes important in terms of getting Bootstrap to work? (How do you know?)
If you deviate from the specifications, particularly: 1) the classes used, 2) the hierarchy expected, how might that affect your result?

---
### Manipulate the form to “exclude” certain classes as prescribed by the Bootstrap guide and examples.
How does not following the specifications affect the output?
What are the key aspects you need to be paying attention to when learning and implementing these framework features?
What is the best way to learn how to use a new framework feature?

---
### Think about your experience building a page from scratch last week.
What is your attitude on using, learning new frameworks like this?

---
# GRID SYSTEM

<div class="container">
  <div class="row">
    <div class="col-__">
      <!-- CONTENT -->
    </div>
  </div>
</div>

### FIND the above pattern(s) within the HTML.
Move a .row to the outside of a container. What happens?
* Then the contents inside the container will stack up vertically because of the lack of .row.

Move a column outside a row but within a container. What happens?
* The column outside a row will become one/single row then next columns (insdie the container) will move on to the next row.

What is the importance of using these three classes together container, row, col-__ and in the correct hierarchical sequence?
* It is crucial to follow the correct hierarchical sequences to create the grid system, for incorrect sequence will lead to erroneous outcomes.

---
### Manipulate some of the content inside the columns to different parts of the page, keeping in mind whether the content is inside a row, or a container, or none.
What happens when content falls outside of the columns?
* It will still appear on the page but NOT abide by the grid system/bootstrap rules.

---
### Manipulate the column classes to replace some col-12 to col-xl-4. Then, drag your browser screen out to make it really large or really small. Or you can zoom in or zoom out of your browser to get the similar effect.
What does the xs, sm, md, lg, xl, xxl represent in the column class notation?
* They represent the six responsive breakpoints that control the layout of particular viewpoint (depending on devices used).

---
### Manipulate the column classes to replace some col-12 to col-3. This is partly dependent on how large your browser window is so you might have to play with the size or zoom in and out to see differences.
What does the number in the column name represent with respect to the GRID system?
* They represent the column sizes within the grid system, which has the maximum of 12 units. And the value next to the column represent how much of the units will be used. Should the total # of units go over 12, the column that uses more than 12 units will simply move to the next row.

---
### Carefully observe and compare this column class naming system (i.e. opinion) that Bootstrap has, with the column naming system of these other GRID SYSTEMS:
https://semantic-ui.com/collections/grid.html
Click on the <> on the page to see the actual code with classes
http://materializecss.com/grid.html
http://getskeleton.com/#grid
What are the similarities and what are the differences?
* We are given a finite amount of units to use within one row. Similarities: Spaces between columns; flexibilty in splitting the columns. Differences: differences in units (12 vs. 16).

What is a Grid System convention vs. rule? Can you give an example?
*

What would happen to my columns if I remove Bootstrap from my page?
*

Is the class, col-xs-6 for example, really that special?
*

---
### Visit the following link: Grid System Explained
What is the advantage of using popular tools like Bootstrap?
*

---
### How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
*

---
# COMPONENTS

### Browse through the different COMPONENTS of the Bootstrap Framework and observe the pattern of how the documentation is presented. Experiment with BUTTONS for a good example: https://getbootstrap.com/docs/5.1/components/button-group/
When learning to use new components in a framework, what do you think is the best practice on how to learn about the feature?
*

### In my table, I have “Extremely Deadly” as a label of sorts, that is bright red which is defined by the .bg-danger class. OVERRIDE this rule in your custom CSS pane to make .bg-danger a pink color using the following value: pink !important
Try removing the !important and what happens? Why?

What affect might this have on other parts of my page?
*

### Pick a few different components you find interesting. Try to implement them into your Tinker fork on Codepen.
Share with your group what you found about the experience of learning to use new features and what your takeaway was.