# TINKER: Bootstrap ### FRAMEWORK: OVERARCHING - when the resource line is removed, the style disappears. It happens because the page uses Bootstrap style and the line refers to the Bootstrap style sheet. - It is a condensed css style sheet. - When the CSS fules are commented out, some visual representations disappear. For example, if I remove the following code, the margin of the associated text will change. ```htmlembedded= h1, h2, h3 { margin: 1em 0; } ``` The CSS overrides the external resource. For example, margin between headings are not specified in Bootstrap, but it is indicated in the provided CSS, which overrides the Bootstrap CSS. The External Resource loads first then my CSS loads next. When writing CSS, one should be very careful because it will override the style in Bootstrap. You can also modify styles in your CSS if you are not satisfied with Bootstrap. - In Last week's Tinker, a lot more CSS is needed to achieve the similar result, because everything needs to be specified with your own CSS. With Bootstrap, you can use built-in styles written by others. The advantage of Bootstrap is that you can use others' code and you don't need to rewrite the CSS. You can easily use prewritten style by applying class names in HTML. A disadvantage is that you need to spend time learning Bootstrap, which is tedious, and if you don't like Bootstrap style, you still need to write your own CSS. - The `.container` class last week is not special. It is a random name given to be associated with style in CSS pane. This week the `.container` class is a special class in Bootstrap. All of the classes used in this week's Tinker come from the Bootstrap external resource. - These classes can be applied to specific elements. `thumbnail` is specified for class element, while `danger`, `info` and `primary` are for button, span and table elements. - Adding class`form-inlie` to `<form>` can convert the form to an inline form. The attribute `placeholder` suggests the format of input text in the input box. `id` doesn't affect the function of Bootstrap, because Boostrap only specifies the style of classes. It affects the data being transmitted in the web when backend gets implemented. Classes affect the visualization while hiarchy affect the order. - Excluding classes can affect the behavior and visual design of the elements. The look will change if not following the rules of Bootstrap. You should pay attention to the visual styles of each class linking with each element. The best way to learn how to use Bootstrap. Not following the specifications will cause content to look differently and be positioned differently. When learning a new framework like Bootstrap, the best way is to approach each element seperately. For example, you can learn `button` element and all classes that relate to it. - I think planning and hiarchy is the most important. First, you should plan what you want to include in the webpage and elements that should be used and nested. Then you should learn about each framework individually. ### GRID SYSTEM - Moving the `row` class makes the layout misaligned. The `row` class indicates that all the elements alligned under it are in the same row. Moving the `column` class also makes the layout misaligned. `column` class indicates the width of each column. The three classes work together to make a perfect layout. - Content falls outside `row` changes in the place it lays on the page. Content falls outside `column` changes the width it has on the page. - The `xs`, `sm`, etc. represent the size of the screen. - The number in `column` indicates the width of the block. - They all use row and colomn framework for grid system, but they name them differently. `col-xs-6` is used in Bootstrap only. - Using popular tools like Bootstrap, one can find tons of resources online, which is good for learning. It also has a lot of features that you can choose to suits your personal preference. - By observing others' works, some test codes and tutorials, you can learn basic structures and ways of using it. By manipulating the code, you can do some hand-on practices to get familiar with the framework. By thinking about the ways to use it and its structure, you can come up with useful solutions to use the frameworks, and by applying code, you can build successful website with the framework. ### COMPONENTS - When learning a new framework like Bootstrap, the best way is to approach each element seperately. For example, you can learn button element and all classes that relate to it. - If having `!important`, it turns everything with `bg-danger` class to pink. If with no `!important`, the color does'nt change. It is because `!important` overrides previous style. - I learnt `card` component because I think it is useful. I looked at the example code on the website, and copied pasted it into codepen to see the visualization. Then I learnt about why the code causes the visualization and extended to other classes.