濟南做網站-bootstrap入門

2018-12-01 欄目:濟南seo知識 查看()

濟南做網站



bootstrap在后臺管理系統中使用較多,先前所做的幾個項目也是使用的Bootstrap框架,不過并未系統學習過Bootstrap,近期工作沒有那么忙了,于是計劃系統地學習一下。

使用Bootstrap,首先要在官網下載bootstrap包,提供了多種方式的下載。

進入官網之后,進入下載頁面,第一個是預編譯版本下載,包括css,js,font。第二個是源碼下載,需要自行編譯。第三個是Sass版本,根據自己的需要,自行下載,此處,我們下載的是預編譯版本,因為,暫時對less和sass還沒有深入學習了解。

 

使用bootstrap創建的網頁頭部需要使用html5的文檔類型(Doctype),否則可能會存在瀏覽器顯示不一致的問題,甚至可能面臨一些特定情況下的不一致,以至于代碼不能通過W3C標準的驗證。因此請使用如下的網頁頭部:

	<!DOCTYPE html>
	<html>
		....
	</html>
  bootstrap依賴于Jquery,所以在引入bootstrap.min.js之前,需要先引入jquery.js
為了讓 Bootstrap 開發的網站對移動設備友好,確保適當的繪制和觸屏縮放,需要在網頁的 head 之中添加 viewport meta 標簽:    
<meta name = "viewport" content = "width=device-width,initial-scale=1.0">

width 屬性控制設備的寬度。假設您的網站將被帶有不同屏幕分辨率的設備瀏覽,那么將它設置為 device-width 可以確保它能正確呈現在不同設備上。
initial-scale=1.0 確保網頁加載時,以 1:1 的比例呈現,不會有任何的縮放。

在移動設備瀏覽器上,通過為 viewport meta 標簽添加 user-scalable=no 可以禁用其縮放(zooming)功能。通常情況下,maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能后,用戶只能滾動屏幕,就能讓您的網站看上去更像原生應用的感覺。

<meta name="viewport" 
content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

全局顯示

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;}

第一條規則設置 body 的默認字體樣式為 "Helvetica Neue", Helvetica, Arial, sans-serif。

第二條規則設置文本的默認字體大小為 14 像素。

第三條規則設置默認的行高度為 1.428571429。

第四條規則設置默認的文本顏色為 #333333。

最后一條規則設置默認的背景顏色為白色。

 

全局鏈接樣式

通過屬性 @link-color 設置全局鏈接的顏色。

以下是鏈接的默認樣式:

a:hover,a:focus {
  color: #2a6496;
  text-decoration: underline;}a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;}

容器(Container)

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

Bootstrap 3 的 container class 用于包裹頁面上的內容。bootstrap.css 文件中的 .container class。

.container {
   padding-right:15px;
   padding-left:15px;
   margin-right:auto;
   margin-left:auto;}

通過上面的代碼,把 container 的左右外邊距(margin-right、margin-left)交由瀏覽器決定。

請注意,由于內邊距(padding)是固定寬度,默認情況下容器是不可嵌套的。

.container:before,.container:after {
  display: table;
  content:" ";}

這會產生偽元素。設置 display 為 table,會創建一個匿名的 table-cell 和一個新的塊格式化上下文。:before 偽元素防止上邊距崩塌,:after 偽元素清除浮動。

如果 conteneditable 屬性出現在 HTML 中,由于一些 Opera bug,圍繞上述元素創建一個空格。這可以通過使用 content: " " 來修復。

.container:after {
  clear: both;}

它創建了一個偽元素,并確保了所有的容器包含所有的浮動元素。

Bootstrap 3 CSS 有一個申請響應的媒體查詢,在不同的媒體查詢閾值范圍內都為 container 設置了max-width,用以匹配網格系統。

@media(min-width:768px){
.container {
      width:750px;
}

引入Bootstrap開始使用Bootstrap。關于bootstrap.min.js和bootstrap.js區別僅在于是否壓縮,此處我們均引入壓縮過會的

<!doctype html><html lang="en"><head><!--網站編碼格式,UTF-8 國際編碼,GBK或 gbgb2312 中文編碼--><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="Keywords" content="關鍵詞一,關鍵詞二"><meta name="Description" content="網站描述內容"><meta name="Author" content="Yvette Lau"><meta name = "viewport" content = " width = device-width, initial-scale = 1 "><title>CSSDemo</title><!--css js 文件的引入--><link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/><script type="text/javascript" src="jquery-1.11.2.min.js"></script><script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script></head><body></body></html>

本文來源:http://www.727crew.com/news/gsxw/70.html

掃二維碼與項目經理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯網交流

鄭重申明:濟南做網站公司以外的任何單位或個人,不得使用該案例作為工作成功展示!
无遮挡啪视频app_人人玩人人添人人澡_韩国美女网