# <**Chi Zhong & Yong Ryan Choi**>

# 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?
* After I comment them out, the spaces between all the section including video row, all headers, footers and div columns are disappeared. They are very close to each other. Becuase these css rules defined mostly on the margins. The relation is complementary. I think the External Resource will load first then comes to my CSS. If we are not code our css carefully, it will influence or even overide the External Resource. Any external rescoures is rigid. If we want to change certain style or rules, it would be easier to code our css rule to overide.
---
### 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?
* In last week css, we have to creat rules to achieve badges style, text background color and the postion of the elements. For example:

.danger {
  background-color: red;
  border-radius: 3px;
  color: #FFF;
  font-weight: bold;
  padding: 4px 6px;
  font-size: .5em;
}
.container-top {
  background: #666;
  border-bottom: 1px solid #CCC;
  border-radius: 8px 8px 0 0;
  min-height: 50px;
}

* By using framework like Bootstrap, it will tremendously decrease the time we spend on ruling our web page styles and making page looks better. Bu the limitaiton is obviously developers can not highly custom the details they want.

---
### 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?
* They are not same thing. In last week's Tinker HTML, container is just a class name given to the div. It lets us to define the class style/layout by ourself. However, in week Tinker .container is a defined class from Bootstrap framework.

---
### 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?
* By removing img-thumbnail and some of the danger, info, etc the style and format which applied to elements disappear. Image becomes huge, and the background colors are removed.
---
### 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?
* These non-class attributes are not important to get Bootstrap to work. I deleted those ids, form still functional. It is not required for Bootstrap to work. When we deviate from the specifications, the influence is huge. Especially using wrong classes and the hierarchy is messed, it will effect the style/format.
---
### 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?
* If people build their web page depend on Bootstrap framwrok, not following the specifications will make the view style and formats not showing like it suppose to be. First I think knowing most the features(classes) and how they will make the page look is important. We can learn step by step while trying to implementthose features.
---
### Think about your experience building a page from scratch last week. What is your attitude on using, learning new frameworks like this?
* From last week experience, I'd say I am really happy that there are lots of external framework like Bootstrap we could use. Because I was struggling while formating the layout to what I want and spending so much time to learn and code. In my opinion, coding is actully a way people want to make things easier to deliver and use. But as a programmer, it's always better to understand underlying logic and how the code works.
---
# 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?
* One solid example of a Grid System rule is that rows must always be nested inside a .container or .container-fluid. As for convention, a responsive webpage would adjust its dimensions according to the users' devices, hence making .container-fluid more viable to make the webpage "responsive." That does not mean, however, that the code shouldn't be using .container, it's simply the fact that .container-fluid would make things a lot simpler to code for the coder.

What would happen to my columns if I remove Bootstrap from my page?
* They would basically stop functioning. All the elements that were sorted throughout the webpage (with Bootstrap included) would return to their original positions defined as per the HTML file, because they are no longer being re-positioned by the CSS of Bootstrap.

Is the class, col-xs-6 for example, really that special?
* The class isn't really "special"; however, it is quite significant nowadays, since the usage of mobile devices has yet to reach its peak and presumably everyone in this country (over the age of 18) most likely owns a mobile device. So, the importance of "xs" --adjusting webpage for mobile devices-- would definitely be high.

---
### Visit the following link: Grid System Explained
What is the advantage of using popular tools like Bootstrap?
* The main advantage of Bootstrap is its highly responsive framework. Also, popular tools like Bootstrap allows easy-to-use, prepackaged modules, allowing faster advancements when coding.

---
### How does the combination of different ways of observing, manipulating, thinking, and applying code help learners to develop a comprehensive mental model of understanding?
* Continuous engagement, trial-and-error, and application of codes allow leaners to create a comprehensive mental model of understanding by anticipating input-output schemes that otherwise would not be possible. Same as with any language, contextualized learning with enough room for mistakes can allow learners to expand the scope of their understanding in an empirical way.

---
# 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?
* To first read and learn about as many features as possible, then to apply them to a website. Of course, at first, it would look like a mess, but as long as you keep using them, you'll eventually get to a point where you can use a decent portion of what the framework can provide.

### 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?
* Removing it will prevent it from overriding Bootstrap; removing !important will bring the red back OVER pink.

What affect might this have on other parts of my page?
* Because of Bootstrap's layer, without !important, everything will default to Bootstrap framework.

### 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.
* Thanks to the Grid System (provided by Bootstrap), I was able to easily and conveniently structure the webpage without having to verbal css file. Also, the responsive feature of Bootstrap in regards to the users' devices offload the necessity to create one for each device.
* The Progress feature is interesting to me. This feature can show the progress of someting I want to track, which I think can be used in our Project Web App UI. It allows to show not only one progress but also multiple different progress with labels on them. For example:

<div class="progress" style="height: 35px;">
      <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">15%</div>
      <div class="progress-bar bg-danger" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
      <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>