figure ). This also leads to the padding-left of the first column and the padding-right of the last column occupying 30 PX of the total width, which leads to the page not beautiful, of course, if you need to leave a certain margin, this is a good practice. For example, the 767th rows in bootstrap.css ~ As shown in row 772nd:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col
(padding), and set the negative margin (margin) for the first and last stacks) to offset the influence of the inner distance (padding ).
The bootstrap mesh system has a responsive effect. It has four types of browsers (ultra-small screen, small screen, medium screen, and large screen). The breakpoint is 768px, 992px, and 1220px.
The container (. container) has different widths for different browser resolutions: automatic, 760px, 970px, and 1170px;
.container {padding-right: 15px;padding-left:
certain amount of spacing, this is a good practice. As shown in line No. 767, line No. 772 in Bootstrap.css:
Col-xs-1, Col-sm-1,. Col-md-1, Col-lg-1, Col-xs-2, Col-sm-2, Col-md-2,. Col-lg-2,. Col-xs-3, Col-lg-3, Col-xs-4,. col-sm-4, Col-md-4, col-lg-4, Col-xs-5, col-sm-5,. col-md-5,. Col-lg-5, Col-
:
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; @media (min-width: 768px) { .container { width: 750px; } @media (min-width: 992px) { .container { width: 970px; } @media (min-width: 1200px) { .container { width: 1170px; }
The horizontal bars 3 and 2 indicate that the rows (. row) of the container are evenly divided into 12 equal portions, that is, columns. Each column has a "padding-left: 15px" (pink in the figure) and a "paddin
described, the container row (. Row) divided by 12 equal parts, that is, the column. Each column has a "padding-left:15px" (the pink part of the figure) and a "padding-right:15px" (The purple part of the figure). This also led to the first column of the Padding-left and the last column of the padding-right occupy the total width of 30px, resulting in the page is not beautiful, of course, if you need to leave a certain distance, this practice is good. As shown in line No. 767 ~ No. 772 of Bootst
total width, which leads to the page not beautiful, of course, if you need to leave a certain margin, this is a good practice. For example, the 767th rows in bootstrap.css ~ As shown in row 772nd:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-
within the column container (columns), and only columns (column) can act as direct child elements of the row container (. Row)
3. There is a 30px spacing between columns and columns.
4. Provide 4 different types of columns:
In my opinion, this picture is the essence of grid system, and through the experiment you can find:
When the screen width is less than 768px (that is, a small screen), the column is divided by the number following the. col-xs-. If no. col-xs-is defined, it becomes sing
appropriate alignment and padding (padding ).
2. The specific content should be placed within the column container (column), and only the column can be used as a direct sub-element of the row container (. row ).
3. There is a 30px gap between the column and the column.
4. four different types of columns are provided:
In my opinion, this figure is the essence of the Grid system. Through experiments, we can find that:
When the screen width is less than 768px (small screen), the column is divided
setting Properties for columns (column). By .row setting a negative value for the element to margin cancel out the set for the .container element, it is indirectly offset by the padding column (columns) contained in row padding .
A negative margin is the reason why the following example is out of focus. The contents of the grid column are lined up.
A column in a raster system represents a range that is spanned by specifying a value of 1 to 12. For example, three equal-width columns can be c
pop-up box for simulation systemThe system comes with a popup box summary link http://blog.csdn.net/anhuidelinger/article/details/17024491Refer to this web site to learn modal box dynamic pop-up http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/, the website provides packaged resources to download.the basic structure in HTML:class="Md-modal md-effect-1"Id="modal-1"> class="
classes are used for an element:. col-md-And. col-lg. As shown above
The first case: size "= pixel PX; select. col-lg.
In the second case, the "size" = 992px and the "size" = "pixel PX" are selected. col-md.
In the third case, if the size is 992px, neither of these two style classes will apply to the element.
The use of the four style classes in the raster option is based on the. row class, And the. row c
> Div>Three:
. col-xs-
Ultra small screen phone
None (Auto)
. col-sm-
Small screen tablet
750px
. col-md-
Mid-screen desktop display
970px
. col-lg-
Large screen large desktop display
1170px
. col-xs when the screen becomes an hour, it is always the state of the vertical columnThe rest is changed to a horizontal state when it is less than
spacing between columns by setting the padding (padding). The effect of the padding (padding) is then offset by setting a negative margin (margin) for the first column and the last column.Divclass= "Container"> Divclass= "Row"> Divclass= "Col-md-4">. col-md-4Div> Divclass= "Col-md-8">. col-md-8Div> Div> Divcl
Bootstrap as a front-end plug-in that supports responsive layout, does play an important role, whether you are on the phone, tablet or PC Browsing Web page, can achieve a good result, all of this is bootstrap brought to us!Today mainly the layout of the page, which is the most basic thing, when we design a site, we should design a Global Unified Specification page, this page we call it layout page, and on the page reflects the things, is the layout of the elements, in the bootstrap is certainly
lines of documentation are complete.
PracticeWith the MSDOS command line, the MSDOS editing is simple, and the combination of Windows system is better;SourceThe source is stored in F:\mytool\prjMD.bat
@echo off
echo 创建项目文档结构
echo by [emailprotected].com 2016年1月21日
echo 用法: prjmd 项目根目录 文件夹结构模式
echo.
echo 模式1:资料、方案、结果、说明,适用于纯实验性质的项目
echo.
echo 模式2:资料、方案、源码、部署、用户手册、结果()、说明,
echo 用于需要简单编程的实验项目
echo.
echo 模式
(1)-Summary of the problems in the native JDBC program. MD
MyBatis Study Notes (2)-mybatis Overview. MD
MyBatis Study Notes (3)-Introductory procedure I. MD
MyBatis Study Notes (3)-Introductory program two. MD
MyBatis Study Notes (4)-Developing the DAO method.
Sometimes we need to create a new set of folder directories, such as the Project management directoryThe approximate list is as follows:├─01. Project management │├─01. │├─02. Planning document │├─03. Management monitoring │├─04. Configuration Management │├─05. Quality assurance │├─06. Acceptance documentation │├─07. Project report │├─08. Review report │├─09. Change Management │├─ 10. Knot document │├─11. │└─12. Other documentation ├─02. Requirements Documentation │├─01. User Requirements Specifi
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.