Deep understanding of the bootstrap style of Yii2 frame _php instance

The YII2 framework defaults to bootstrap as a CSS style, as is the case with various view class components. Always use the default style and add or modify class to achieve your goal when necessary. But in the revised Yii1.1 Orange Project, found before is also a set of templates, in fact, did not have a good understanding of the set of bootstrap rules, so by the way roughly comb it. The basic template is used as an example to control the contents of the http://v3.bootcss.com/css/.

Look at the Layouts/main. Php,yii2 default to HTML5 document type, but the language defaults to en-us, so to change, add ' language ' => ' ZH-CN ' in config/web.php to $config

There are already viewport this meta item that has supported the mobile device priority principle

Layouts/main.php has some beginxxx (), EndXxx () methods (such as $this->beginpage (), $this->endbody ()), and $this->head () calls, Look at the Yii\web\view class document and find that they are all a mark, used to mark the location. Appasset::register ($this); The Register method for the base class Yii\web\assetbundle is actually invoked to register the CSS, JS, and related dependencies defined in the default generated assets/appasset.php of the project template to view $this (so-called "registration", which is a publication, An orderly insertion, the one mark that preceded it should work.

The Appasset class default definition of CSS is css/site.css, because $depends has yii\bootstrap\bootstrapasset, so the actual CSS inserted in the Head section resembles the following (corresponds to the $this->head ()）

<link href= "/orange_yii2/web/assets/6cdf1901/css/bootstrap.css" rel= "stylesheet" >
<link href= " Orange_yii2/web/css/site.css "rel=" stylesheet "> 
 

The body portion of the DOM structure given by the template is shown in the following illustration (where the div.xxx corresponds to the portion of the respective controller's rendering):

From the site.css, the template custom CSS style is not much, that is, most of the CSS are followed by the bootstrap default. So, the key is to understand Bootstrap itself.

-----------------------------------------------------the principle of the deletion of lattice-----------------------------------------------------------

Basic principles:

Page content and grid systems require a container of 2 kinds of containers:. Container (fixed width, support response type) and. Container-fluid (100% width, occupy viewport all)

A row, column form, column composition row, row direct child element must be column, row up to 12 columns, a series of predefined classes (such as. row,.col-xs-4) used to quickly create a delete layout

Column spacing is set by the Padding property of the column, and the. Row element's margin setting is negative to offset the value of the. Container Padding Property

Each row should be considered in 12 columns, for example, 3 columns with equal widths, which can be merged into 1 columns with 3. Col-xs-4, that is, every 4 column. More than 12 columns, the extra columns need to be arranged in a separate line.

Media Enquiries:

For the Super small screen, is the default; for other kinds of screens, use media queries to determine the size of the cutoff point

Response Column Reset:

For some content, you want to occupy more columns on a small screen than on a large screen, which can resemble the following

<div class= "Row" >
<div class= "col-xs-6 col-sm-3" >.col-xs-6 .col-sm-3</div> <div, class=
"Col-xs-6 col-sm-3" >.col-xs-6 .col-sm-3</div> <!--Add the extra clearfix for only the required
- ->
<div class= "Clearfix visible-xs-block" ></div> <div class= "col-xs-6 col-sm-3
". Col-xs-6 .col-sm-3</div>
<div class= "col-xs-6 col-sm-3" >.col-xs-6 .col-sm-3</div>
Div>

Column offset:

Using classes like col-md-offset-4, you can offset columns to the right, as if some columns are empty.

Column nesting:

So-called column nesting, that is, column contains columns, is actually a row contains column elements are one row, nested rows

Column sort:

Change the order of columns by using the. col-md-push-* and. col-md-pull-* classes
------------------------------------Typesetting---------------

Title of the same style:

The actual title is H1 to H6, subtitle with small, for inline non-caption elements, you need to use the same style as the title, with the class. H1 to. h6, subtitle. Small

Page Body:

The global Font-size=14px,line-height is 1.428 and is used for body and all P elements. The P element's margin-bottom is 1/2 rows high (i.e. 14PX*1.428/2 = 10px). Prominent paragraphs with. Lead class.

Inline text:

Highlight text with Mark tags, delete text with del label, use text with s tag, insert text with ins tag, underline with u label, Small text with small label or. Small class, bold emphasis with strong tag, italic accent with em tag, (b and I are used in bold and italic respectively, without emphasis).

Text alignment:

<p class= "Text-left" >left aligned text.</p> <p class=
"Text-center" >center aligned text.</p >
<p class= "text-right" >right aligned text.</p> <p class=
"text-justify" >Justified text .</p>
<p class= "Text-nowrap" >no Wrap

Abbreviations and hover tips:

<abbr title= "attribute" >attr</abbr>
<abbr title= "hypertext Markup Language" class= "initialism" >HTML</abbr>

List:

There are sequential table ol and unordered list the general use of UL is the direct element. No-style list is a band. list-unstyled category of UL, inline (unordered) list is the band. List-inline class of UL, the basic description list resembles the following:

<dl>
<dt>...</dt>
<dd>...</dd>
</dl>

A horizontal list of descriptions is a DL with a. Dl-horizontal class that can be truncated with the Text-overflow property when the left phrase is too long.

-------------------Code------------------

Inline code tag, code block with the pre tag, variable with var tag, user input with KBD tag, program output with Samp tag

-----------------------Table--------------------------

The table element does not have a default bootstrap style, and the class. Table is used as the base style (additional styles are attached on this basis). Add. table-striped style to form a zebra-like style with odd and even intervals. Add table-bordered class, table with border. Add Table-hover class, you can implement mouse hover response (similar to highlighting). Adding. table-condensed classes can make tables more compact and reduce cell internals. Either TD or TR, you can use class active, success, info, danger, warning to indicate a certain state. To create a response table (horizontal scrolling on a small screen device), you would give the table element a container, similar to the following:

<div class= "table-responsive" >
<table class= "table" >
...
</table>
</div>

----------------------------form-------------------------

The input, textarea, select Use classes within the form. Form-control will have the default control style (width:100%), The general practice is to include the control and its previous label in the Div with the category. Form-group (there will be a better layout)

Attaching the. Form-inline class to a form will arrange the controls in the form horizontally (shown as Inline-block, left-aligned, you may need to specify the width manually, although the label is not displayed, but should not be omitted)

Attach the. Form-horizontal class to the form, which arranges the form horizontally (the label and the control are on the same line). The behavior of the form-group is changed, and no additional. Row class is required, but a predefined delete class is used to implement the layout, and the control's corresponding label is used. Control-lab El to achieve a better appearance)

Input boxes often add placeholder properties, and all HTML5 input controls are supported

TextArea often add rows property

The checkbox and radio items should be wrapped in a label, and items that are disabled in the checkbox and radio can be attached to the disabled property, while the. Disabled class can render the disabled icon when the mouse hovers

Attaches. Checkbox-inline and. Radio-inline classes to the label of the checkbox and radio, can be horizontal options

Add multiple property to select to display multiple options at the same time

If you want to use static text as a control, you use the P element and attach the. Form-control-static class

The focus state of the input box is implemented by setting the CSS property of the corresponding input box: removing the outline (set to 0) and giving the Box-shadow property

Disable the input box to add the disabled property to input, and disable all controls on the fieldset parcel, add the disabled property to it (with some compatibility issues)

Read-only input box to add the ReadOnly property, the style is also disabled

The form control renders a different checksum state, which is attached to the Div.form-group. Has-success,. has-warning,. Has-error classes (with the. Has-feedback class attached, additional icons will be displayed)

Through. INPUT-LG Similar classes can set a height for a control, and a class that is similar to the. col-lg-* can set the width for the control
The dimensions of a horizontally arranged form group to quickly set its label and control by attaching a class such as FORM-GROUP-LG,. Form-group-sm to the Div.form-group.

Wrapping an input box or any of its parent elements with columns (div.col-xs-3, etc.) in a grid system can easily be set to a width
The auxiliary text for the form control is span.help-block (for example, to give an error hint)

--------------------------------------Button-----------------------------------------

Basic usage, attach a default BTN class to the button element, and then add Btn-default, Btn-primary, btn-success, and so on, depending on the scenario you want to render

Button size, you can attach. BTN-LG,. BTN-SM,. BTN-XS classes to control

Attach the. Btn-block class to the button, stretching it to the 100% width of the parent element and behaving as a block element

The activation state of the button represented by the buttons element is a pseudo class: active implementation (no additional additions), the activation state of the button represented by the A element, implemented by the attached. Active class, but also to the button element's buttons if it is required to achieve a consistent appearance. Active class

The button element adds the Disabled property, you can disable it (the background setting of the button opacity the property can not be clicked), the buttons in the A element are disabled by attaching the. Disabled class.

Although button, a, input elements can apply btn, btn-xxx, and so on, but in order to cross browser performance, try to use the button element

--------------------------------------------Picture------------------------------

To the IMG Plus. Img-responsive class allows the picture to support a responsive layout (essentially max-width:100%;height:auto; so that the picture has a better scaling in the parent element)

Add img-rounded,. img-circle,. Img-thumbnail to the IMG to make the picture appear in a different shape

----------------------------------Auxiliary Class---------------------------

Text for different stories, similar to the following:

<p class= "text-muted" >...</p>
<p class= "text-primary" >...</p>
<p class= " Text-success ">...</p>
<p class=" Text-info ">...</p>
<p class=" text-warning "> ...</p>
<p class= "Text-danger" >...</p>

Background colors for different stories, similar to the following:

<p class= "Bg-primary" >...</p>
<p class= "bg-success" >...</p>
<p class= "Bg-info" >...</p>
<p class= "bg-warning" >...</p>
<p class= "Bg-danger" >...</p>

Close button:

<button type= "button" class= "Close" ><span aria-hidden= "true" >x</span><span class= "Sr-only" >Close</span></button>

The triangle symbol that indicates the dropdown:

<span class= "Caret" ></span>

Fast float: (not applicable to navigation bar, navigation bar should use. Navbar-right and. Navbar-left Class)

<div class= "Pull-left" >...</div>
<div class= "Pull-right" >...</div>

Center BLOCK:

<div class= "Center-block" >...</div> is essentially display:block and left-right margin for auto
Clear float element: (Add. Clearfix class to parent element, actually Clear:both)

<div class= "Clearfix" >...</div>

Show and hide content:

<div class= "Show" >...</div>
<div class= "hidden" >...</div>

Other than that and the. Invisible class, it affects the visibility of the element, but does not affect the display property (that is, it may be displayed but not visible), which still affects the flow of the document (still the element in the stream), the. Hidden class is a. Invisible class, because it is certainly not visible when hidden.

Screen readers and keyboard navigation content (hidden to other devices):

<a class= "sr-only sr-only-focusable" href= "#content" >skip to main content</a>

Replace element text content with a background image:

<H1 class= "Text-hide" >custom heading 
 

-----------------------------------Response Tool----------------------------------------

Hide or display content for different screens: classes can be used independently or jointly. Visible-xx-yy or. HIDDEN-XX (where XX can be XS, SM, MD, LG,YY can be block, inline, Inline-block)

Hidden or displayed for the printer:. Visible-print-yy and. Hidden-print (where the optional value of yy is the same)

The above is a summary of the global CSS knowledge of the bootstrap framework, bootstrap the other two pieces are components and plug-ins. Simply understood, the component is the display function block which is expressed by the CSS, and the plug-in is the function block which the JS+CSS expression often has the dynamic effect or the interaction effect.

Components need to check the http://v3.bootcss.com/components/can be, plug-ins need to check the http://v3.bootcss.com/JavaScript/can be

The above is a small set to introduce the YII2 frame bootstrap style understanding, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!