Recommended materials (courseware source code) for the Wheat Academy bootstrap introductory video

Bootstrap is one of the most popular front-end frameworks released by Twitter. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible. It completely and perfectly encapsulates common CSS layouts, commonly used components, and JavaScript plug-ins, allowing inexperienced front-end engineers and back-end development engineers to quickly master and use it. It greatly improves development efficiency, and it also standardizes the front-end team's writing of CSS and JavaScript to a certain extent. In short, learning Bootstrap allows you to easily develop responsive WEB projects. "Wheat Academy bootstrap introductory video tutorial" will help you get started with bootstrap easily.

Course playback address: http://www.php.cn/course/324.html

The teacher’s teaching style:

The teacher’s lectures are vivid, witty, witty, and touching. A vivid metaphor is like the finishing touch, opening the door to wisdom for students; an appropriate humor brings a knowing smile to students, like drinking a glass of mellow wine, giving people aftertaste and nostalgia; a philosopher's aphorisms, cultural references Proverbs are interspersed from time to time in the narration, giving people thinking and warning.

The more difficult point in this video is the principle of the Bootstrap grid system:

Bootstrap has a built-in responsive, mobile device-first flowing grid system. As the screen device or viewport size increases, the system will automatically divide it into up to 12 columns.

I call the grid system in Bootstrap a layout here. It creates a page layout through a series of combinations of rows and columns, and then your content can be placed into the layout you created. The following is a brief introduction to the working principle of the Bootstrap grid system:

The implementation principle of the grid system is very simple, just by defining the container size and dividing it into 12 equal parts (it can also be divided into 24 or 32 parts, but 12 is the most common), then adjust the inner and outer margins, and finally combine it with media queries to create a powerful responsive grid system. The grid system in the Bootstrap framework divides the container into 12 equal parts.

When using it, you can recompile the LESS (or Sass) source code according to the actual situation to modify the value of 12 (that is, change it to 24 or 32. Of course, you can also divide it into more, but it is not recommended to use it this way) ).

Bootstrap has a built-in set of responsive and mobile devices.

1. The data row (.row) must be contained in the container (.Container) in order to give it appropriate alignment and padding. For example:

<div class="<span style="color: rgb(178, 34, 34);">container</span>">
<span style="white-space: pre;">	
</span><div class="<span style="color: rgb(178, 34, 34);">row</span>"></div>
</div>

2. You can add columns (.column) in rows (.row), but the sum of the number of columns cannot exceed the total number of bisected columns, such as 12. For example:

<div class="container">
<div class="row">
  <div class="col-md-<span style="color: rgb(178, 34, 34);">4</span>"></div>
  <div class="col-md-<span style="color: rgb(178, 34, 34);">8</span>"></div>

3. The specific content should be placed within the column container (column), and only the column (column) can be used as a row container (.row ) direct child elements

4. Create the spacing between columns by setting padding. Then offset the effect of padding by setting negative margins for the first and last columns

The above is the detailed content of Recommended materials (courseware source code) for the Wheat Academy bootstrap introductory video. For more information, please follow other related articles on the PHP Chinese website!