欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入理解bootstrap框架之入門準(zhǔn)備

 更新時間：2016年10月09日 16:22:35   作者：葡萄美酒夜光杯  
Bootstrap是最流行的前端開發(fā)框架。本文涉及到bootstrap的特性介紹，本文介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起看看吧

一.bootstrap框架簡介

Bootstrap是最流行的前端開發(fā)框架。

什么是框架：開發(fā)過程的半成品。

bootstrap具有以下重要特性：

（1）完整的CSS樣式插件

（2）豐富的預(yù)定義樣式表

（3）基于jQuery的插件集

（4）靈活的柵格系統(tǒng)

以下將簡單介紹對bootstrap可能用到的知識進(jìn)行梳理。

二.新手入門

筆者使用版本是3.3.x

在bootstrap中文官網(wǎng)可以找到以下界面

本書采用預(yù)編譯的版本進(jìn)行學(xué)習(xí)

三. 文件結(jié)構(gòu)

生產(chǎn)環(huán)境使用bootstrap.min.css和bootstrap.min.js。除了font結(jié)構(gòu)之外，其他文件都可以隨意命名。

四. 標(biāo)準(zhǔn)模板

首先是在aptana搭建bootstrap環(huán)境。

ctrl+N新建web項(xiàng)目，選擇默認(rèn)項(xiàng)目，命名項(xiàng)目，定義位置，完成。

把下載好的文件夾dist重命名為bootstrap，復(fù)制粘貼到項(xiàng)目文件夾下。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!--頁面編碼 -->
<meta charset="UTF-8">
<!--低版本瀏覽器模擬渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--響應(yīng)式布局：UI布局和移動設(shè)備一致，縮放大小為原始大小-->
<!--也可以使用下列聲明：
<meta name="viewport" content="width=device-width, initialscale=
1, maximumscale=1, user-scalable=no">
意思是強(qiáng)制讓文檔寬度和設(shè)備寬度保持1：1，不允許用戶單擊放大瀏覽。注意content屬性要用逗號（或分號）隔開，不規(guī)范則失效 -->
<meta name="viewport" content="width=deviece-width,initial-scale=1">
<!--支持國產(chǎn)瀏覽器的高速渲染-->
<meta name="renderer" content="Webkit">
<!--在此進(jìn)行SEO設(shè)置：作者、關(guān)鍵詞、描述-->
<meta name="author" content="djtao">
<meta name="keywords" content="djtao">
<meta name="description" content="djtao">
<title>bootstrap基礎(chǔ)模板</title>
<!--bootstrap-->
<!--以下兩個js插件用于在IE8及以下支持H5元素查詢的，如不用可移除 -->
<!--[if lt IE 9]>
<script src="scripts/html5.min.js"></script>
<script src="scripts/respond.min.js"></script>
<![endif]-->
<!--bootstrap樣式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!--自定義樣式文件 -->
<link rel="stylesheet" href="styles/css.css">
</head>
<body>
<!--基于jQuery的腳本文件 -->
<script src="scripts/jquery.min.js"></script>
<!-- bootstrap的jq插件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--自定義腳本文件 -->
<script src="scripts/js.js"></script>
</body>
</html>

注意用順序，自己的樣式和腳本必須在后面。

網(wǎng)上引用cdn是

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" >
<!-- Optional theme -->
<link rel="stylesheet" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

五. CSS基本語法

1.優(yōu)先級

和原生CSS一樣。

#xxx>.xxx>xxx

2.選擇器

（1）屬性選擇器


（2）子選擇器

>號

（3）兄弟選擇器

臨近選擇器用+號表示，比如說在一個nav-ul-li結(jié)構(gòu)的導(dǎo)航條里，欲設(shè)置兩個li之間的外邊距。

nav>li+li{
margin-left:10px;
}

指定元素后邊的節(jié)點(diǎn)用~。比如說查找article元素內(nèi)h1后面所有的p元素

article h1~p{font-size:20px}

3. 偽類選擇器

bootstrap常用的偽類無外乎這幾個

4. display屬性

display很好用，但是不能亂用。

5.媒詢

媒詢是bootstrap響應(yīng)式布局核心的要素，但主要用到的還是min,max和and

@media(max-width: 767px){
/*在小于768像素的屏幕中，這里樣式生效*/
}
@media(max-width: 767px) and (max-width: 991px){
/*在768-991像素區(qū)間的屏幕中，這里樣式生效*/
}
@media(min-width: 1200px){
/*在大于等于1200像素的屏幕中，這里樣式生效*/
}

同理還可以用到高度。

6.相關(guān)JavaScript語法梳理

（1）與和或運(yùn)算符（&&，||）

（2）立即調(diào)用函數(shù)

推薦使用這個

(function(){
do somthing
}() )

表示馬上調(diào)用。

（3）原型

BT中的js插件，都是基于面向?qū)ο蟮姆椒▌?chuàng)建。

簡單舉個栗子，定義加減法運(yùn)算

var decimalDigits = 2,
tax = 5;
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
//alert(add(1, 3));

改寫成一個加減計(jì)算函數(shù)對象

var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
};

然后，通過給Calculator對象的prototype屬性賦值對象字面量來設(shè)定Calculator對象的原型。

Calculator.prototype = {
add: function (x, y) {
return x + y;
},
subtract: function (x, y) {
return x - y;
}
};
//alert((new Calculator()).add(1, 3));

7.jQuery知識梳理

（1）事件綁定

jQuery常用的綁定語法有on/off、bind/unbind。比如說

$('div').on(click,function(){...});
$('div').off(click,function(){...});

注：bind()函數(shù)是jQuery 1.7之前或更早版本采用的一個用來綁定事件處理程序的函數(shù)；on()函數(shù)是jQuery 1.7版本提供的首選的用來綁定事件處理程序的函數(shù)；從1.7版本的介紹以及參數(shù)描述來看，其實(shí)這兩個函數(shù)基本上用法一致，但可能在早期的版本中，bind()函數(shù)一次只能為標(biāo)簽對象綁定一個事件的處理程序，而on()函數(shù)則可以一次為多個不同的事件綁定處理程序。

在bootstrap方法中的綁定類似但是思想不同，

$(document).on('click.bs.carosel.data.api','div',function(){...})

利用的是冒泡的機(jī)制，選擇document的div。提高了性能。

（2）命名空間

調(diào)試時，事件后面加上一段字符串比如click.djtao，再用trigger方法觸發(fā)時，就不會影響原本的點(diǎn)擊事件。

（3）$.data()

搜集指定元素上所有以data為前綴的自定義屬性，合并為一個字面量。比如說：

<div id="abc" data-role="aaa" data-toggle="toggle" data-xxx="djtao"></div>

我要收集role的值

$('#abc').data('role')

如果不帶參數(shù)，則等于收集并聲明了一個json。var value={role:'aaa',toggle:'toggle',xxx:'djtao'}

8.H5的輔助屬性

可以支持盲人等人群閱讀。通常以arial為前綴統(tǒng)稱arial屬性。

以上所述是小編給大家介紹的深入理解bootstrap框架之入門準(zhǔn)備，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論