目錄
js的引入:
1.行內式
2.嵌入式
3.外鏈式
Bootstrap:的引入
注意事項:
條件注釋語句:
柵格系統:
列嵌套:
列偏移:
列排序:
響應式工具:
Bootstrap的字體圖標的使用:
Bootstrap的標題格式:
js的引入:
1.行內式
行內式是將JavaScript代碼作為HTML標簽的屬性值使用。例如,在單擊超鏈接“test”時,彈出一個警告框提示“Hello”,示例代碼如下:
<a href="javascript:alert('Hello');">test</a>
需要說明的是,行內式只有在臨時測試或者特殊情況下使用,一般情況下不推薦使用行內式,因為行內式有如下缺點。
(1)行內式可讀性較差,尤其是在HTML文件中編寫大量JavaScript代碼時,不方便閱讀。
(2)行內式在遇到多層引號嵌套的情況時,引號非常容易混淆,導致代碼出錯。
2.嵌入式
嵌入式(或稱內嵌式)使用<scrip>標簽包裹JavaScript代碼,直接編寫到HTML文件中,通常將其放到<head>標簽<body>或標簽中。<scrip>標簽的type屬性用于告知瀏覽器腳本類型,HTML.5中該屬性的默認值為“text/javascript”,因此在使用HTML5時可以省略ype屬性。嵌入式的示例代碼如下:
<script>JavaScript代碼
</script>
3.外鏈式
外鏈式(或稱外部式)是將JavaScript 代碼寫在一個單獨的文件中,一般使用“js”作為文件的擴展名,在HTML頁面中使用<script>標簽的src屬性引人“js”文件。外鏈式適合javascript代碼量較多的情況。在html頁面中引入“js”文件,示例代碼如下:
<script src="test.js"></script>
上述代碼表示引入當前目錄下的test.js文件。需要注意的是,外鏈式的標簽內不可以編寫JavaScript 代碼。
為了幫助初學者更好地理解外鏈式,下面利用外鏈式實現瀏覽網頁時在頁面中自動彈出警告框。創建Example02.html文件,引入Example02.js文件,具體代碼如例1-2所示。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script src="Example02.js"></script>
</body>
</html>
標簽的src屬性設置了要引入的文件為Example02.js。
Bootstrap:的引入
創建是為了區分,方便使用。
但需注意在這之后,需要引入bootsrap的格式文檔(css)
導入之后:
bootsrap是通過使用類名,之后css來進行固定類型的變化的。所以只需要知道類對應的就可以隨意使用。但也可以直接復制文檔。
也可以修改bootsrap文檔來實現自我需要的修改。
或者新加一個標簽自己進行設置:但這種使用的條件有限。
注意事項:
需要注意的是Bootstrap的CSS樣式已經定義了該容器的類名。
他是按照一類一類的有多種格式,也就是說container有類似的類名,不同的格式。
條件注釋語句:
柵格系統:
注意·他是將內容盒子劃分為幾等份的
- 后面是需要寫占多少份
如果有的盒子需要不同則后綴的數字之和要等于12
如果份數大于12 則會繼續向下一行顯示。
注意柵格系統在不同屏幕大小下是直接為我們提供了一份用不同類名下的不同效果,所以說,我們可以直接使用不同的類名份數即可。
列嵌套:
主要是用于下列間距的實現。原因:在使用框架給的標簽時,是通過浮動使得小盒子在一行中進行顯示的,所以為了避免不能一行顯示,一般會嵌套小盒子分配份數實現間距。
由于盒子有邊框,為了實現內容小盒子能夠頂著左邊顯示。先放一個div row清除邊框。
列偏移:
偏移后,會給右邊的盒子增加了一個外邊距。
當只有一個盒子時。會給左邊加一個外邊距
也可以實現盒子的居中:
如:
一共12份,之后按照剩余份數處理。
列排序:
push向右 pull向左
響應式工具:
Bootstrap的字體圖標的使用:
只要使用在所需要的地方加一個所需圖標的類名(手冊中)即可
Bootstrap的標題格式:
在CSS的排版模塊里