Bootstrap 7 of 50 front-end learning

A, jQuery supplement

1. animation

// 基本
show(毫秒数)  // 显示
hide(毫秒数)  // 隐藏
toggle(毫秒数)
// 滑动
slideDown(毫秒数)
slideUp(毫秒数)
slideToggle(毫秒数)
// 淡入淡出
fadeIn(毫秒数)
fadeOut(毫秒数)
fadeTo(毫秒数)
fadeToggle(毫秒数)

2. Supplementary

2.1 each cycle

jQuery.each(collection, callback(indexInArray, valueOfElement))：

Description: A general iterative function, which can be used seamlessly and iterative array of objects. Arrays and array-like objects to a number of iterations indexed by the length of the property (e.g., a function of the parameter object), from 0 to length - 1. Other objects to iterate through the property names.

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

Output:

010
120
230
340

.each(function(index, Element))：

Description: traversing a jQuery object, perform a match function for each element.

.each()Iterative methods for each element jQuery DOM object. Each time the callback is executed, the number of cycles the current is passed as a parameter (counting from 0). Since the callback is triggered in the context of the current DOM element as the context, so the key thisis always pointing to this element.

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

Note: jQuery method returns a jQuery object, through the elements of the set jQuery - referred implicit iterative procedure. When this happens, it usually does not need to explicitly circulation .each()method:

In other words, the above example is not necessary to use each () method, like this directly written on it:

$("li").addClass("c1");  // 对所有标签做统一操作

note:

During traversal can be used return falseahead of the end of each cycle.

Termination of each cycle

return false；

2.2 data()

Any relevant data stored in all the elements of the set of matched elements or element returns the first matching element in the set to the value of the data stored in the given name.

.data(key, value):

Description: storing arbitrary data in the matched elements.

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

Description: Returns the first element in the set of matched elements in value to the data storage name is given - by .data(name, value)or HTML5 data-*property.

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

Description: Removes data stored on the elements, without key parameter indicates the removal of all stored data.

$("div").removeData("k");  //移除元素上存放k对应的数据

二、Bootstrap

See: https://v3.bootcss.com/css/#buttons

Responsive layout: The phone / computer screen display different screens of different sizes

Bootstrap is the preferred mobile device.

1. layout container

Bootstrap need to wrap a grid system for the page content and .containercontainer. We offer two useful for this class. Note that, since paddingother reasons property, two containers can be nested with each other.

1. .container Class is a container support fixed width and responsive layout.

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

1. .container-fluid Class is the 100% width, occupy the entire viewport (the viewport) of the container.

<div class="container-fluid">
  ...
</div>

2. Grid System

Bootstrap provides a responsive, mobile device priority streaming grid system, with the increase of the screen or viewport (the viewport) size, the system will automatically be divided into a maximum of 12.

By default, a row is a row.

Each row are divided into 12 parts by default, you can choose what you want several accounts by col-md-Num.

2.1 grid parameters

xs  //手机屏幕，最小
         
sm  // 平板，中小屏幕

md  // 普通显示器，中等屏幕

lg  // 超大显示器，大屏幕

Offset 2.2

col-md-offset-1

3. Form

Any <table>label added .tableclass for imparting basic styles - the amount of complement (padding) and horizontal divider.

4. Forms

表单加样式  你只需要记一个   form-control

Individual form controls will be automatically assigned a number of global style. Set all .form-controlclasses <input>, <textarea>and <select>the elements are to be set by default width property width: 100%;. The labelelements and controls the aforementioned wrapped in .form-groupthe best arrangement can be obtained.

5. Button

It is <a>, <button>or <input>add elements like buttons.btn

5.1 predefined styles

<button type="button" class="btn btn-default">（默认样式）Default</button>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-info">（一般信息）Info</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

<button type="button" class="btn btn-link">（链接）Link</button>

6. Quick float

By adding a class, any element may be left floating or right.

<div class="pull-left">...</div>  左浮
<div class="pull-right">...</div>  右浮