bootstrap3

時間 2019-11-24

標籤 bootstrap3 bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

bs是基於html5和css3的, h5和css3是從此的趨勢.
html5只是說文檔的 "標準"是h5, 可是文檔的類型仍然是 html. 因此在寫文檔類型的時候, 就不能要那個5了 , 即: <!doctype html> 不要寫成: <!doctype html5 一樣的, 在用zen coding縮寫的時候, 也是 html:5, 而不是html5, 前者還有不少相似的文檔寫法如:html:xt等.javascript

究竟是用html5仍是xhtml?

固然是用html5!
由於html5是向下, 向後兼容的, 它不會break任何已有的網頁, html5徹底可以解析以前的xhtml文檔的, 你能夠把以前的xhtl文檔, 改寫爲html5的標準類型, 不會出什麼問題的.
只是說, html5新增了一些類型, 如繪畫canvas,媒介回放video, audio, header, footer, nav, 新增一些表單控件如date, time,你直接就能夠選擇時間日期了, 不用再去使用插件了. 等等,還有支持web繪圖的canvas和webgl組件,屬性等,就是把之前須要插件的東西, 如今都用內置的標籤技術來實現了, 如flash等.... 這些屬性在低級的瀏覽器中可能不被支持, 可是你能夠不用這些較高級的標籤和屬性就行了.
還有, 就是要看你的項目和使用對象, 若是是ie678的用戶是主要瀏覽器, 那就仍是使用xhtml, 或者使用h5, 而後針對ie作一些hack...若是是使用firefox, chrome的, 如國外的web站點基本上使用的是html5.php

制定標準的組織, what working group & W3C 在html向xml過渡的標準xhtml1.0, 2.0標準, 其實不少廠商並無遵照.css

bootstrap的row必須放在container中, 這樣便於爲其設置對齊和分配padding.

container的左右padding是15px, 而row的左右margin是 -15px, 這樣container和row就恰好抵消, 使得col就可以從container的最左邊開始. 而col也有15px的左右padding. 這樣"勞心費力" 的設計, 就是爲了讓 col在嵌套row的時候, 就如同.container同樣也成爲了一個容器.
其實container也不是固定寬度的, 會根據不一樣屏幕分辨率而改變尺寸, 從1170, 970, 750px變化.html

pin是釘子釘住, spin的結果效果,就是異步加載動畫時, 的那個旋轉的動畫. 所以, spin的意思是: "旋轉, 紡紗, 吐絲" 是否是專門有一個插件spin.js就是加載動畫的意思,(它是經過js腳原本生成spin的動畫, 而不是用一個gif圖片來顯示???)vue

spin.js的用法?

spin.js主要是用在異步ajax加載. 它不是像之前那樣的使用gif圖片, 而是使用js來生成. 並且能夠經過opts來設置生成的旋轉spin"圖片"的參數. 參考網址: spin.js.org
也能夠manual insertion:
var spinner = new Spinner().spin()
target.appendChild(spinner.el) // 使用 spinner的el屬性.

使用spin.js來生成加載"圖片"的優勢是, 能夠很是方便的調節opts的參數大小, 來生成各類不一樣的, 符合你想要的"加載"圖片.
spin.js生成"圖片"的性質: 注意所看到的實際上是一個 "圖像" 但其實不是一個圖片!html5

在計算機中圖形, 圖像, 圖片的區別?
圖片就真的是一個文件, 一般是像素文件,如照相機手機照相獲得的圖片文件.
圖形, 是指由物體的外在輪廓組成的矢量線條. 主要是指由計算機繪圖造成的直線, 圓, 矩形, 梯形等
圖像,就是咱們所看到的影像, 不一樣於文字的, 具備必定外形輪廓和顏色的影像.
因此, 由spin.js生成的是圖像, 是影像.. 不是圖片java

由於: spin.js生成的其實一個大的div, 類是"spinner",角色是role="progressbar" 這個類下面再是n個子div, 這些子div實際上就是外面選擇的那些圖形, 這些圖形的外觀是經過css來實現的, css的樣式值就是opts中設置的參數值.jquery

注意, 默認的spin是定位在屏幕的中心的, 不會放在父容器div內, 由於 spin的樣式值 positon: absolute是絕對定位, 因此, 要想讓spin放在父div中, 應將父div的樣式position設置爲: relative. 就行了.
css3

超連接中的href和onclick的區別?

href和onclick哪一個先執行? 是讓onclick先執行, 而且a連接是根據 onclick執行的返回結果來判斷是否跳轉的, 若是onclick 返回true, 則跳轉, 若是返回false, 則不跳轉. 因此, href是要在那裏一直等待的, 等待onclick的返回值的. 因此 onclick 最好是要明確的返回值, 使用return關鍵詞的git
href中最好仍是寫跳轉路徑, 雖然它是能夠寫 javascript協議的, 可是不推薦那樣寫.
若是 onclick沒有寫return關鍵字, 那麼默認的就是true, 跳轉就會發生, 並且無論你在onclick中作了什麼選擇. 由於onclick一般就是用 confirm(""), 來判讀啊是否要跳轉的. 因此不要忘了寫return 關鍵字.

bootstrap的摺疊組件/手風琴組件和控制檯組件的區別

摺疊組件是由一個觸發按鈕 + 一個內容div 構成的; 一般佈局方式是上下方式的.
手風琴則是由多個摺疊組件構成的 功能單元;
摺疊組件和控制檯組件是不一樣的, 由於摺疊組件的內容div就是在它的下方, 而控制檯的內容則是分離的, 一般是左右結構佈局的.

關於 transition 樣式的使用

transition.js插件, 是bs用來產生過渡效果的插件.
transition: 的英文意思就是過渡...

在 css3中,自己就有, 自帶就有transition的樣式, 它有四個屬性值:
transition-property: 是指元素的什麼屬性值, 如是讓width, 仍是讓height等什麼屬性值產生過渡
transition-during: 過渡效果的持續時間
transition-timing-funciton: 過渡效果的時間函數, 就是過渡的方式, 一般是ease; 注意timing和function是兩個單詞, 因此中間用短橫線-連接哦
transition-delay: 延遲,多少時間開始過渡...

好比: div {color: red; transition: width 2s; -moz-transition: width 2s; -webkit-transition: width 2s;
其中, 2s是指持續時間是2s, 這個s不能省略.
-moz, -webkit是前綴, 是針對低版本的 firefox和 chrome的 hack...

css3的transition樣式使用的方法:　將ｔｒａｎｓｉｔｉｏｎ：寫在某個元素上便可, 如同, border, background等樣式同樣!! 是由幾個份量值組成的.
與其餘全部 "靜態" 樣式不一樣的是, 因爲transition樣式自己就是一個 "動態"樣式, 估計其內部實現, 自己就 "帶有js 的功能, 之前是由 transition.js實現的, 要變化的", 因此他的執行方式是:　要想生效時, 將鼠標移到元素上 , 若是將鼠標移出元素, 則會恢復到原來的狀態. 不像靜態樣式一開始就會顯示出來!!
可是, 要產生transition效果, 最重要的仍是 要設置變化開始和結束時的兩個肯定的屬性值: 由於要變化嘛, 就必須有一個開始和結束時的值, 即開始時, 要設置div的初始肯定尺寸, 而後要設置 div:hover 這個僞類(必須是:hover僞類, 沒有:click的僞類) 的尺寸. 這個是最重要的, 若是不設置 :hover僞類是不會有transition效果的!

英語中, 表示"沒有" 的方式:

若是表示某個地方, 沒有什麼東西的時候, 使用 there is not...
可是若是要表示沒有什麼東西作什麼, 幹什麼的時候, 使用 No something do????

bs 生成組件的方法有兩種, 一種是標記法, 即徹底使用css樣式實現, 另外一種就是使用js方法, 經過腳原本實現.

bs包括整個js整個計算機程序設計中的方法和事件的區別?

方法是：直接提供給用戶使用的api函數, 特色是, 你須要顯式的去調用它, 是由使用者規定的, 是主動的 是肯定的, 主動的.

事件: 則是不肯定的, 你不知道她何時發生, 就像一個按鈕同樣, 它是給用戶點擊的, 可是你不知道用戶何時, 會去點擊它. 因此, 事件就提供了一種 "伺服, 等待, 監視, 監控, 監聽也就是 listener的做用", 一旦發生某個事件, 就怎麼樣, 後面的行爲和反應是一種 "回調"函數, 是一種所謂的"預案", 一種預備性反應.

bs中的組件, 特色是, 至少要先使某個元素對象, 如div等, 先成爲某個組件後, 而後才能調用 js腳本方法等.

流程圖插件 ystep.js ichat.js的使用 bs中的樹形圖和控制檯組件?

參考地址: https://github.com/iyangyuan

湖北省, 千湖之省, 長江中游, 由長江和漢水交匯衝擊而成的江漢平原, 和洞庭湖平原. 武漢在很早的時候,由武昌, 漢口, 漢陽三個鎮組成的, 包括長江以北的漢口火車站和江南的武昌火車站... 楊園: 音譯"洋園" ,之前洋人住的園子.

evan [ev2n]: 人名, 伊凡. evan you vue.js

注意, 在ystep插件中的 images/pointes_blue.png, 和 images/pointes_green.png 圖片, 中的pointes 沒有用錯, 它不是點 point的複數, 由於點的複數是 points, 這裏是: "芭蕾舞鞋底硬腳尖, 繃着腳尖點地, 有尖頭的意思" 是pointe 的複數形式.

一般, 要查看背景圖片, 在 css文件中, 用background 去搜索: background-image: url('...'), background-position:

若是有多個插件都要用到 images/ 目錄, 則可能須要將css和背景圖片的位置適當修改一下

所謂的min.css 和 min.js等等, 都是將原來未壓縮的文件中的空格, 回車, 換行等刪去了而已, 所有顯示在一行上了. 你能夠看壓縮後的文件, 顯示的只有一行, 而列就有不少列了, 達到幾千上萬列...

如何區分js對象和json對象?

嚴格的說, json只是一種數據格式, 不是什麼對象. 參考: http://blog.csdn.net/goskalrie/article/details/52151175 , 嚴格的說，JavaScript中只有一個JSON對象——全局JSON 對象, 如同 Object,Array,Function等同樣，其除了全部對象共有的方法外只有stringify()和parse()兩個方法。除此以外，js代碼中的任何對象都不多是JSON對象，即使是使用stringify()方法序列化獲得的對象也不是，由於 JSON只是一種格式，沒有對象一說，平時說的JSON對象，是JSON格式的js對象或是符合JSON數據結構要求的js對象, 因此 "json對象的說法", 其實是一種 "誤稱", 只是你本身知道就行了。

var jsObject={  
            name:"Nicholas",  
            age:29  
    }  
    var jsonObject={  
            "name":"Nicholas",  
            "age":29  
    }

對於第二個對象, 其實仍是js對象, 或者說是叫 json格式的js對象. 第二種叫作 "js字面量對象"
第二個對象你能夠說是js對象, 也能夠說是 json格式的js對象. (誤稱 json對象). 究竟是什麼, 看你怎麼使用, 若是用eval(jsonObject), 則表示js對象, 由於eval要調用js解釋器. 若是用parse方法, 則是JSON格式...

總之, 一句話, 就是若是是js對象, 它的屬性名稱能夠加雙引號(字面量對象), 也能夠不加雙引號. 一般, 只要屬性名不是js的保留關鍵字, 都沒必要加引號. 而若是你要把它看成交換數據的json來使用, 則仍是要嚴格遵照屬性名加雙引號的.

js對象和json加不加雙引號的問題, 是指的前面的"屬性名"要不要加雙引號. 跟屬性值無關. 由於無論是js對象仍是 "json對象", 屬性值都有多種數據類型, 如字符串, 數字, bool, objct, 和array 數不可能所有都加上組, 雙引號, 豈不就只有字符串了, 很顯然是不可能的.

js引擎解釋器 "老是" 把字面量(沒有引號的)看成變量來解析的, 不會自動轉換成字符串來解析的!!! 不像php的echo, 對於字面量, 先作變量解析, 若是找不到,就作字符串解析.對待.

因此, 要注意, js對象的屬性值也要嚴格區分數據類型的, 若是是字符串, 就必定要加上雙引號, 不然因此, console會報錯: 'ReferenceError: ??? variable is not defined', 就是js把沒有加引號的屬性值看成變量來解析了..., 所以, 能夠很確定地得出一個結論: 對於js中的ajax等, 衆多的js插件中的配置變量, 選項變量,如opts, config等中的屬性值, 基本上都不會傳變量進去的, 因此, 基本上就只有三種數據類型: 數字, boolean, 其餘的基本上都是字符串, 都要加雙引號, 如, size: 'small', color: 'green',.....

在jquery的插件中, 對於列表項, 若是有明確含義的, 就使用明確含義的列表項單詞, 如ystep.js中的步驟列表: 就用 steps: [{...}, {....}....] 來表示, 若是沒有明確的含義, 如ichat.js中的列表對象, 就用items 來表示, items: [{...}, {...}, ...].

在ichat插件中, 每一個列表對象, 包括: "type, title, trigger, open, items(子項目) "5個部分組成. ichat是做用在 body 對象上的, 即$("body").ichat(opts_obj); opts 共有6 個屬性: placement, top, title, color(不是文字的顏色, 而是ichat矩形控件的顏色, 實際上就是底色), trigger, items.
ichat中的 trigger的類型, 爲 : click, hover, none. 若是爲click表示單擊將打開和關閉, 這個能夠經過jquery的show/hide/slideup/slidedown來實現, 若是爲none, 則無論你單擊與否都沒有關係的.

其實ichat.js這個插件寫得並不太好! 至少, 它沒有考慮, 鼠標連續屢次單擊或連續屢次地移入移出的狀況, 會引發事件隊列的堆積, 使動畫一直執行, 實際上, 應該在事件響應的回調函數的做用對象執行動畫以前先調用 stop(true, true) 方法後, 再調用其餘動畫就行了. 能夠修改這個ichat.js, 在hover事件的回調函數中的適當位置, 加上stop(true, true)就沒有那種閃爍現象了.

科學計數法中的E?

任何一個數x 能夠寫成: a10^n, 其中, 1< |a| <10, 這時就能夠把x 記做:aEn的形式, 如 2.1e3, -1.4e6, -3.6e-2...
這裏的e(E)僅僅只是表示科學計數法的意思, 不一樣於數學常數的e=2.7..., 也不一樣於指數exponent , 指數函數exp()的意思,
它僅僅表示 10的n次方, 這個 e 就已經表示了 10 的n次方了, 因此, 你不要再寫10了 , 如: 30000, 直接就寫成 3e4就行了. 不要再寫成310e4, 那這樣豈不是更復雜, 更麻煩了嗎, 這個跟科學計數法的本意就相反 . 使用科學計數法就是想使計數的寫法更簡潔! 因此用一個字母E, 就表示10的多少次方了. 格式就是aEn

bototstrap的柵格系統中, 列的嵌套計算方法是: 是將被嵌套的那一列再細分紅12等份, 注意再也不是將整個container的寬度分紅12等份. 而後被嵌套的列的總數加起來要等於12的時候, 才能充滿被嵌套的列, 而不是說嵌套列的總數加起來等於被嵌套列的份數就能夠充滿了. 這是由於嵌套列和其父列的等份是不一樣的! 始終記住, 嵌套列的時候, 是以被嵌套的列爲對象, 再來分紅12等份的!

塊級元素中文本的對齊是class=text-left/center/right, 塊的對齊是class=pull-left/pull-right/block-center

bs 的列表ul, 包括幾個類: ul class="list-unstyled", class="list-inline"(使li成水平方向), 特別有用的是, 對於自定義列表, dl > dt +dd. 使用 dl class=dl-horizontal 可使自定義列表的dt標題和裏面的描述排列在同一行上, 就比豎直排列要美觀些. 並且dl因爲比ul多了一個dt, 因此描述的內容和語義就更豐富.