Bootstrap learning notes (1) and Bootstrap learning notes (

Bootstrap learning notes (1) and Bootstrap learning notes (

I used Laravel to write a program for a while and chose bootstrap as the previous framework. Now it has been a while. I will take the time to summarize it:

Bootstrap is a front-end framework. The so-called framework is an organic component provided to meet specific needs in a specific environment. bootstrap mainly provides some css components, that is, html elements of pages, such as form elements (buttons, input boxes, single-choice, multiple-choice), layout, tables, images, text, and so on. It provides a series of classes, you only need to call the corresponding class in the html file. At the beginning, I did not know how to start learning. I found this problem on the Internet and found that many people had this problem. Then I found an English ebook, I wrote several Html files to understand the reason. I know little about the backend, But I know little about the front-end, and I haven't studied the technology for a long time. So I don't know how to learn the development of the front-end. For example, when I was learning the Laravel framework, I knew the specific structure of Java SSH, so I had a rough idea about Laravel's routing, controller, presentation layer, ORM layer, and filter, I know how to use it, so I don't know how to learn bootstrap because I don't know html or css. I think the best resource for learning and querying html, css, and Jquery is W3cSchool ( http://www.w3school.com.cn/index.html . After learning the complete time, we will find that all official documents are detailed in detail, and the basic workflow will be used in the page to introduce bootstrap.css. Some dynamic effects need to be implemented with jquery, plus jquery. the reference of js is enough. These are all clearly written in the official documentation. Download the source code and copy the standard template to get started, the next step is to browse the "components" and find the components you need, such as layout, tables, and form components. Adjust the class appropriately to produce a very good appearance, it is best to use an IDE that prompts css and js. Common tools include netbeans and Aptana. Of course, Jetbrain's tools phpstorm and webstorm will be better, but they will be charged. I prefer netbeans. The best way to learn bootstrap is to actually implement the desired results, but css definition is very complicated. Pay attention to the following points: CSS is usually placed in three places: 1) external file: css file 2) definition of this file: that is, the definition in the html file, which is roughly similar

<Style type = "text/css"> body {background-color: # FFFFFF;} body, td, th {color: #999999 ;}</style> 3) the style definition of the label, for example, <div style = 'height: 3em; background-color: # fff'> </div> the priority is 3)> 2)> 1) in the case of the same priority, note the following two cases: 1) the more accurate the definition, which definition will be used in the end, for example, <div class = 'test1 test2'> </div> if there are two definitions at the same level. test1 {} div. test1 {} will use the latter, the former will be covered 2) when the same level, the priority is the same, the reading and writing order, such as test1 test2 above, if the same color is defined, if the definition in the file is more backward, the primary color will be selected, for example. test2 {}. test1 {} The color of test1 is used, so the final effect is irrelevant to the sequence of class writing in <div>. This is usually not important, but sometimes you need to pay attention to it.

2. debugging tools

Currently, all browsers support F12 debugging, IE, Chrome, Firefox, and Opera, and Firefox Firebug plug-ins are commonly used. Of course, other browsers also support similar functions, the highlight of Firebug is that there is a click function that allows you to directly view the size of the page elements. IE not only supports displaying the border margin of elements, but also supports displaying the offset of elements, which is sometimes very useful. Both support right-click "review element" to obtain the html information corresponding to the element. The information is dynamic and js or mouse events are directly reflected in these tools, this is important for js and ajax debugging, because right-clicking the source code does not display these changes. There are several common la S: 1) Layout: it is mainly used to divide the page into several parts by div, the common method is as follows <div class = 'row'> <div class = 'col-md-4 '> </div> <div class = 'col-md-4'> </div> <div class = 'col-md-4 '> </div> bootstrap divides the page into 12 parts, supports various screen sizes. By nesting this format, you can support most display requirements. 2) table <table class = 'table table-bordered'> <thead> <tr> <td> </td> <td> </tr> </thead> <tbody> <tr> <td> </td> <td> </tr> </tbody> </table> bootstrap provides many styles, however, the table is relatively simple. You can define some css to beautify it. 3) form <div class = "row"> <div class = "col-md-offset-4"> <form class = "form-horizontal" role = "form"> <div class = "form-group "> <label for =" inputtext "class =" col-md-2 control-label "> Text Box: </label> <div class = "col-md-3"> <input type = "text" class = "form-control input-lg" id = "inputtext" placeholder = "Enter text text "> </div> <div class =" form-group "> <label for =" inputtext "class =" col-md-2 control-label "> text field: </label> <div class = "col-md-4"> <textarea class = "form-control" rows = "3" placeholder = "here to say something! "> </Textarea> </div> <div class =" form-group "> <label for =" inputtext "class =" col-md-2 control-label "> single region: </label> <div class = "col-md-3"> <label class = "radio-inline"> <input type = "radio" name = "inlineRadioOptions" id = "inlineRadio1" value = "option1"> male </label> <label class = "radio-inline"> <input type = "radio" name = "inlineRadioOptions" id = "inlineRadio2" value =" option2 "> female </label> <label class =" ra Dio-inline "> <input type =" radio "name =" inlineRadioOptions "id =" inlineRadio3 "value =" option3 "> confidentiality </label> </div> <div class = "form-group"> <label for = "inputtext" class = "col-md-2 control-label"> check box: </label> <div class = "col-md-4"> <label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> check box 1 </label> <label class = "checkbox-inline"> <input type = "checkbox" id = "InlineCheckbox2" value = "option2"> check box 2 </label> <label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox3" value =" option3 "> check box 3 </label> </div> <div class =" form-group "> <label for =" inputtext "class =" col-md-2 control- label "> selection box: </label> <div class = "col-md-2"> <select class = "form-control"> <option> first choice </option> <option> second choice </ option> <option> third choice </option> <option> fourth choice </o Ption> <option> fifth choice </option> </select> </div> <div class = "form-group"> <label for = "inputtext "class =" col-md-2 control-label "> upload file: </label> <div class = "col-md-3"> <input type = "file" name = "upload_file"> </div> <div class = "form- group "> <div class =" col-md-3 col-md-offset-2 "> <button name =" submit "class =" btn-success btn-radius form-control "> submit </button> </div> </form> </div>/ Div> the preceding section contains some common components. The form component must be included with the form label. Each form component must be included with the <div class = 'form-group'> </div> component, the common component style is form-control. This style extends the component size to the parent label, that is, width: 100%. The form is relatively simple, you can select some provided styles to see the effect. 4) navigation <nav class = "navbar-inverse" role = "navigation"> <div class = "container"> <ul class = "nav navbar-right"> <li> <a href = "#"> Home </a> </li> <a href = "#"> Service </a> </li> <li> <a href = "#"> Customer </a> </li> <a href = "#"> Shopping </a> </li> </ul> </div> </nav> you can use the standard format for navigation, to modify the color and font, you must add the corresponding class information in your css file and modify the background color and font. 5) There are many menu implementations. In fact, based on the navigation, add <ul> <li> </li> <li> .... </li> </ul> note that the default menu provided by bootstrap only needs to be clicked to display the drop-down menu. If you need a better experience, if you hover your mouse over a menu, you need to find some plug-ins. If you need to modify the color, you need to modify the corresponding css style. Note that different plug-ins support different classes, you can use the debugging tool to find the corresponding class and modify its style. 6) The accordion is actually the meaning of the left-side navigation menu. bootstrap can be used by default. You can also find some plug-ins for better implementation. The basic use of bootstrap is very simple, but it is often found that some performance systems are not provided, such as the date selection box, pop-up window, and so on, these need to find the corresponding plug-ins for implementation, for example, if datepicker is a good date control, there will be more pop-up windows. When plug-ins are required, dynamic effects are often required, and the jquery plug-in is often used, you can use the search engine or http://www.jqueryscript.net/ Find the corresponding plug-ins to complete your tasks. If the plug-in cannot meet your needs, you need to write css or js by yourself. js generally uses common JQuery libraries, and I have never used other JS libraries. JQuery has programming experience, but it is still relatively easy. If you want to write JQuery extensions by yourself, it will be a little harder, because javascript differs greatly from the common language and it takes some time to learn. CSS learning is not difficult. It is difficult to select the appropriate font, color, and effect. This requires a little effort. I personally think we should study the css box model and position well, you can make a lot of good results, and write more in the future. Bootstrap is worth learning. Its advantage is its responsive and cross-browser compatibility. If you write css, you will know how difficult it is to do so. So you should study it later.