2. 程式人生 > >bootstrap初體驗

bootstrap初體驗

阿新 • • 發佈：2019-01-19

首先bootstrap框架是基於h5，專案中每個頁面都要參照如下的樣式

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

bootstrap遵循移動裝置優先原則

<meta name="viewport" content="width=device-width, initial-scale=1">
<!--以下是禁用了螢幕的縮放功能  ，設定了user-scalable=no使得移動使用者感覺網頁更像是原生的-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

然後還有網頁的編碼，同時還要保證在ie執行最新的渲染模式，bootstrap不支援ie8以下的ie瀏覽器

<!--設定網頁編碼為utf-8-->
<meta charset="utf-8">
<!--設定在ie瀏覽器中執行最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

由於bootstrap是基於jquery的所以，在引入bootstrap的js檔案時要先引入jquery

<!--此處我將jquery.js檔案下載到了js資料夾下，然後直接引用就好了-->
<script type="text/javascript" src="../js/jquery.js "></script>
<!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 -->
<script type="text/javascript" src="../js/bootstrap.min.js "></script>

最基本的網頁格式如下

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<!--設定網頁編碼為utf-8 -->
		<meta charset="utf-8">
		<!-- 在ie瀏覽器執行最新的渲染模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--支援移動裝置優先 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
		<title>Bootstrap 101 Template</title>
		<!--引入bootstrap的css檔案-->
		<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />

	</head>

	<body>

		<!-- 華麗的分割線—————————————存放js檔案—————————————————————————-->
		<!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) -->
		<script type="text/javascript" src="../js/jquery.js "></script>
		<!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 -->
		<script type="text/javascript" src="../js/bootstrap.min.js "></script>
	</body>

</html>

相關推薦

bootstrap初體驗

首先bootstrap框架是基於h5，專案中每個頁面都要參照如下的樣式 <!DOCTYPE html> <html lang="zh-CN"> ... </html> bootstrap遵循移動裝置優先原則 <meta na

【Bootstrap初體驗之匯入模板完成第一個例項】

首先在Bootstrap中文網中找到導航欄，點選元件 可以看到頁面右邊提供了很多元件 我們隨便選一個，點選導航條，下拉可以看到關於例項的程式碼 我們將程式碼複製到webstorm裡，直接新增到<body>標籤中，什麼都不用再加然後點選執行，發現效

Angular 2 版本的 ng-bootstrap 初體驗

最近 angular-ui 團隊終於正式釋出了基於 Angular 2 的 Bootstrap 介面庫ng-bootstrap ， 工作中一直用 AngularJS 1.x 的UI Bootstrap ， 因此對這個 ng-bootstrap 也是很感興趣， 第一時間進

Bootstrap 4-alpha 初體驗

What is Bootstrap？ 第一句話就是廢話了，作為新時代有理想有節操的開發人員無人不知無人不曉。可能就是熟悉程度因為各種原因不盡相同，有人只是知道他大概是個什麼東西，有些人可能基本可以使用，有些人可能深有體會。但是糾正一下一個比較常見的問題，可能我這個人比較矯情，Bootstrap是一個單詞

小程序初體驗：手把手教你寫出第一個小程序（一）

輸入框 個人 創建 公測 快速 nsh 成功 too 調用 本文筆者將根據quick start中的範例代碼，帶大家簡單地剖析一下小程序的運行方式，並介紹小程序開發中一些通用的特性，帶著大家一步步寫出自己的小程序。 適用對象：前端初學者，對小程序開發感興趣者 tip

vue.js2.0 自定義組件初體驗

最新 解綁 然而 blog bool template 警告 rem 組件 理解 組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些

weblogic初體驗

xsd 體驗 target java語言 註意 true 中間件 鼠標 使用 之前一直是用的tomcat，由於業務需要，需要使用weblogic部署項目，在這裏大概的記錄一下 weblogic是oracle出品的WEB容器，確切的說是一個基於JavaEE架構的中間件，使用

python初體驗

list python 字典 python初體驗:1.python種類 CPython 代碼 -> C字節碼 -> 機器碼 （一行一行） pypy 代碼 -> C字節碼 -> 機器碼 全部轉換完 -> 執行 其他Python 代碼 -&g

Android逆向分析初體驗

目錄 搜索 比較 .com -1 動態調試 總結 為我 修改 一、 準備知識 1. 懂Java Android開發。 2. 懂NDK ，C 語言 Android 動態鏈接庫.SO開發。 3.

【Spark深入學習 -15】Spark Streaming前奏-Kafka初體驗

rod htm 新的 callback tails 包括 -c 舉例 清理 ----本節內容------- 1.Kafka基礎概念 1.1 出世背景 1.2 基本原理 1.2.1.前置知識 1.2.2.架構和原理 1.2.

vue.js 初體驗— Chrome 插件開發實錄

原創 控件 https ext 方案 程序實現 瀏覽器中 display 博客 歡迎大家關註騰訊雲技術社區-博客園官方主頁，我們將持續在博客園為大家推薦技術精品文章哦~ 作者：陳緯傑 背景 對於經常和動畫開發打交道的開發者對於Animate.css這個動畫庫不

1Python全棧之路系列之Django初體驗

編寫程序 online 網絡開發 程序員 堪薩斯 Python全棧之路系列之Django初體驗Django不得不說在Python中是一個非常強大的全棧框架，而且入門也比較簡單，只要你學完了基本的Django知識，接著再做一兩個項目，不大不小就成，然後你再去學其它的框架你會發現，在那些小而美

flask+jsonp跨域前後臺交互（接口初體驗）

script keys 返回 == 方法 png 前後臺 true run 1 # -*- coding: utf-8 -*- 2 from flask import Flask, jsonify 3 import psutil, time,json 4 5

Hibernate_01_初體驗

基礎上 font cal close mysq getprop build nec address Hibernate的一個小例子（慕課網教程整理的代碼）： 首先在eclipse--help--Eclipse MarketPlace中搜索“jboss Tool” 導入hi

zTree初體驗（一）——小試牛刀

插件 root tracking per margin 接受 dsm 獲取 實現 zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大長處。 ——zTree官網 zTree v3

Git初體驗——git項目開發流程

創建目錄 管理 文本 目錄 ria 遠程 歷史 zookeepe clas 眾所周知，Git是一款版本控制軟件，之前總是習慣把每次修改後的代碼打包並且標註好時間等信息加以區分，使用git之後就完全不需要這麽做了。 1.安裝git： 官網下載安裝即可，沒什麽復雜的步驟 2.新

phantomjs2.1 初體驗

http dom canvas ima 行為 pen 廣告 自動 str 上次看了一下scrapy1.1的新手指南 決定寫個小爬蟲實驗一下 目標網站是http://www.dm5.com/manhua-huofengliaoyuan準備爬取漫畫火鳳燎原的已有章節，將圖片保存

Maven項目搭建（一）：Maven初體驗

測試類 java平臺 存在 ack 做的 rar cli maven2 試用 今天給大家介紹一個項目管理和綜合工具：Maven。 Maven: maven讀作 [‘meivin]，本意是指可以被信任的領域專家，致力於傳播知識(來自於http://en.wikip

python的初體驗

多行註釋 導致 passwd 判斷語句 swd pytho 對齊 輸入 tab 最近由於畢業答辯，導致一些博客沒有更新，見諒，今天我們開始一些新的內容 　　1.python的註釋 　　　　單行註釋:# 　　　　多行註釋: 　　　　　　‘‘‘ 　　　　　　　這是多行註釋 　　

mongodb初體驗

增刪 條件 date remove 集成 b- htm 結構 opd 今天上午找資料，發現了mongodb，閑來無事就研究了下，本人用的是phpstudy集成包添加mongodb擴展。 1.添加mongo、mongodb擴展 　　phpstudy集成環境一般