Bootstrap One week study summary

One, responsive layout

1, Bootstrap is adaptive mobile and the Web, will be based on the resolution of a code base adaptive, bootstrap defines a lot of JS and CSS effects, these effects are integrated into a number of APIs for use when the call.

2, in the use of bootstrap do basic page also in the Head tag Reference Bootstrap library, Bootstrap JS Library is the core of jquery

<Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><Linkrel= "stylesheet"href= "Bootstrap-origin/css/bootstrap.min.css"><Scripttype= "Application/javascript"src= "Bootstrap-origin/jquery-2.1.1.min.js"></Script><Scripttype= "Application/javascript"src= "Bootstrap-origin/js/bootstrap.min.js"></Script>

Second, the framework analysis

1, remove the body margin, set the body's background color is white.

2, the most important aspect is the introduction of the grid system, wherein the grid system implementation principle is as follows:

Row must be used in. Container to create a column group in the horizontal direction. Row and. Col-xs-4 accounts for 4 columns Iii. typesetting basics Pre-typesetting basics:HTML5 Document type Mobile device priority response Picture class= "Img-responsive" browser changes, picture pixels are changed to typesetting and linking: Default change <a> label style Title:h1--h6:36px-12px each decrement 6px.h1--. h6:36px-12px each decrement 6px no margin-top and Margin-bottom<small>h1-h3 accounted for 60% H4-h6 accounted for 60% Page Theme:Body: Font and background change P global style: to P emphasis, with Class=lead alignment: right-aligned class=lead Text-right/center/left Emphasis text: <em> Abbreviations:<abbr> Mouse move to ABBR will have a title prompt class= "initialism" pop-up hint font size will change to the original font of 90%, the letter will become uppercase Address element:<address> address label Margin-bottom becomes 20px Font-style becomes normal Line-heigh becomes 1.42 References:<blockquote> List and code list: unordered list:<ul><ol></ol></ul> There are sequence tables:<ol><ul></ul></ol> these two margin-bottom have 10 pixels Fetch LIST: Add class to the LI tag's parentClass=list-unstyled Inline list: Add class to the LI tag's parent classClass=list-inline DL list:Class=dl-horizontal Code: Code:<code> display can be code highlighting Input:<kbd> can use KBD to highlight when the user enters the key Program:<pre> display can be in code form variables:<var> display is a variable form Program Results:<samp> display is special display five, table style Striped Style:<table class= "Table" table-striped> table with borders:<table class= "Table" table-border> a table with borders, Striped Style :<table class= "table" table-striped table-border> mouse hover Effect:<table class= "Table-hover" > jincu form:<table class= "table-condensed" > Responsive Layout:<table class= "Table-responsive" > six, Form Style Basic form: Just a few tweaks to margin<div class= "Form-group" > set the spacing between components to 15px margin-bottom:15px<label></label> <input...clas S=form-control> full container of 100%</div><div class= "checkbox" > Inline form:<form class= "Form-inline" >//Horizontal arrangement <label class= "sr-only" >//hide text effects before <label>//<form Get> The amount of data submitted by the//get method is limited, post method in addition to ordinary submission Landscape Forms:<form class= "Form-horizontal" role=from>//<div class= "Form-group" > <label class= "col-sm-2" control-label> user name </label>//control-label set to responsive layout<div class= "Col-sm-8" > <input type=text class= "Form-control" ></div></div></form> text fields:<textarea></textarea> Drop- down box:<div class= "col-sm-4" ><select name=name class= "Form-control" multiple> multiple multi-choice<option value=1><option><option value=1><option><option value=1><option></ Select><div> selection Box:<div><label><input type=radio name=sex value=m/> Men </label><div> <form><div class= "checkbox" > If the class=checkbox-inline is arranged horizontally<label><input type=checkbox name=sex value=m/> male </label><div><div class= "checkbox" > <label><input type=checkbox name=sex value=m/> male </label><div><div class= "checkbox" > <label><input type=checkbox name=sex value=m/> Men </label><div></form> the difference between checkbox and radio:1, a single RadioButton after the selection, by the click can not become unchecked a single checkbox after selection, by clicking to become unchecked 2, a group of RadioButton, can only select a group of checkboxes, can simultaneously select more than 3, Radiobutt On by default in most UI frames, a checkbox is represented by a rectangle in most UI frames by default. Static CONTROLS:<form class= "Form-horizontal" ><div class= "Form-group" > <label class= "col-sm-2" control-label> email</label> <div class= "col-sm-10" > <p class= form-control-static>[email protected]<p>form-control-static Display in the text box </div></div></form> Focus:<input Type=tel Autofocus > Disable:<input Disabled> read-only status:<input class= "Form-conrol" ReadOnly> Check Status: <div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label><input type= "text" class= "Form-control" id= "InputWarning1" ></div> How to add components in input:<div class= "Form-group" hasfeedback><label> user name: </label><input type=text class= "Form-control" Name=name Placeholder=hello><span class= To add the picture component Form-control-feedback aria-hidden=true></span></ div> <form class= "form-horizontal" ><div class= "Form-group" Form-group-lg/sm><label class= " Col-sm-2 "Control-label for=formgroupinputlarge>large</label></div></from> Auxiliary Text:<span id=helpblock class= "Help-block" ></span> vii. basic usage of foldingdeclarative Triggering<div class= "Container" > <button class= "btn btn-danger" Data toggle= "collapse" data-target= "#shows" > Folding </button> <div id= "shows" class= "collapse" >
<div class= "Well" >
What's displayed
</div>
Summary of </div></div> Viii.

The above is only part of my study notes, and not completely finished.

Learning Bootstrap the most important thing for me is to be more familiar with the usage of html+css, to be more familiar with the basic usage of tags, and to tamp down the foundation. Suggest you read the source of Bootstrap, know it and know its why, can not always rely on the library, so as to continue to progress.

Bootstrap One week study summary