2. 程式人生 > >快速使用 bootstrap 開發響應式網頁[ bootstrap學習筆記 一 ]

快速使用 bootstrap 開發響應式網頁[ bootstrap學習筆記 一 ]

阿新 • • 發佈：2018-11-19

 使用 BootCDN 提供的免費 CDN 加速服務（同時支援 http 和 https 協議）

<!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
 
[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap 基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <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 -->
    <link href="https://cdn.jsdelivr.net/npm/
 
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支援 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

 

 

相關推薦

快速使用 bootstrap 開發響應式網頁[ bootstrap學習筆記 一 ]

 使用 BootCDN 提供的免費 CDN 加速服務（同時支援 http 和 https 協議） <!-- 最新版本的 Bootstrap 核心 CSS 檔案 --> <link rel="stylesheet" href="https://cdn.jsdelivr.

【Bootstrap】響應式網頁程式設計教程

Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。Bootstrap提供了優雅的HTML和CSS規範

響應式布局學習筆記【1】----基礎知識

網頁設計 water com 文章 tar 屏幕分辨率 優點 light gin 本篇文章主要解決：什麽是響應式布局？有什麽優點和缺點？ 一 什麽是響應式布局？ 伊桑·馬科特（Ethan Marcotte）在2010年首先提出了響應式網頁設計（RWD,Responsive

快速傅立葉變換FFT的學習筆記一：C語言程式碼的簡單實現

快速傅立葉變換FFT的學習筆記一：C語言程式碼的簡單實現 fft.c #include "math.h" #include "fft.h" void conjugate_complex(int n,complex in[],complex out[]) { int i = 0

<Bootstrap> 學習筆記一. 配置環境, 簡單使用, 響應式表格, 響應式圖片

ref container oot png tle api lower bsp -c <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

前端開發響應式設計之媒體查詢（bootstrap）

媒體查詢就是可以根據裝置顯示器的特性（視口寬度、螢幕比例、裝置方向-橫向或者豎向等）為其設定CSS樣式 為什麼響應式設計需要媒體查詢？因為沒有CSS3的媒體查詢模組，就不能針對裝置特性（尤其是視口寬度）設定特定的CSS樣式 bootstrap.css檔案最後的若干

bootstrap-表格-響應式表格

bootstrap-表格-響應式表格1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" co

響應式(2)——bootstrap的響應式

view war warning ble trap dia nbsp file ont <meta name="viewport" content="width=device-width,user-scalable=no"/> <href="bs/css/

bootstrap寫響應式導航欄

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 例項 - 響應式的導航欄</title> <link rel="styl

如何根據不同裝置型別快速地實現網頁介面的響應式佈局，只需一句程式碼立馬實現。

在學習網頁製作的過程中，如何根據不用的裝置讓網頁介面能夠顯示出最佳的效果，這是讓廣大初學者為之煩惱的事情，但是今天如果你看了這篇博文，你的憂慮將一掃而光，會讓你感受到前端的樂趣。 首先，如何實現這樣的佈局呢？只需要一句程式碼就能實現，接下來讓我們看一下吧！ 當我們在進行程式碼編寫時，我們只需要這樣編寫：

bootstrap v3 響應式導航欄目設計

<!DOCTYPE html>   <html>       <head>           <meta charset="utf-8">           <meta name="viewport" content="width=device

響應式網頁開發的基本規則

響應式網頁設計是針對多螢幕問題的一個很好的解決方案，但從印刷的視角來看有點困難。沒有固定的頁面尺寸，沒有毫米或英寸，沒有任何的物理限制，無從下手。為了desktop和mobile單獨使用畫素設計的方法也成為了過去，因為越來越多的裝置都可以開啟網站。因此，我們需要弄清楚響應

響應式網頁開發你不知道的那些事

簡介 原文地址：www.dpfblog.com 響應式網頁設計通過使用彈性網格和佈局、響應式圖片、CSS media query等技術手段，使頁面能夠自動切換解析度、圖片尺寸及相關指令碼功能，以適應不同裝置，來滿足使用者在各種裝置環境下的需求。響應式網頁設計

Metronic – 超讚！基於 Bootstrap 的響應式後臺管理模板

　　Metronic 是一套精美的響應式後臺管理模板，基於強大的 Twitter Bootstrap 框架實現。Metronic 擁有簡潔優雅的 Metro UI 風格介面，6 種顏色可選，76 個模板頁面，包括圖表、表格、地圖、訊息中心、監控面板等後臺管理專案所需的各種元件。 您可能感興趣的相關文章

從零開始構建部署上線Node.js+Express+Bootstrap+Jade響應式網站應用—RSPT丨留學生活第一站（三）

一、Nodejs 線上伺服器部署與釋出綜述 伺服器配置生產環境所需要的步驟大致為： 整個專案部署詳細流程文字解析： 部署流程圖依照學習課程的流程： 看著這個圖，Scott老師有一段精彩的故事詮釋它： 故事還得從左下腳的角落開始，一把椅子

使用bootstrap製作響應式導航欄

所謂響應式導航欄，便是能根據窗體大小適配的導航欄，以前見著覺得很高階，而現在終於有機會自己寫一個了，先上幾張效果圖。 這是正常螢幕： 這是手機等小螢幕： 點選右邊後能夠顯示出選單 要實現這個效果，首先要先匯入bootstrap框架 &

Bootstrap禁用響應式佈局

在Bootstrap中極其重要的一個技術內容便是響應式佈局了，一次編碼針對不同裝置終端的強大能力使得響應式技術愈發流行。 不過正所謂“蘿蔔青菜各有所愛”，如果你想要使用Bootstrap開發自己的專案卻又恰巧不太喜歡響應式佈局（或者你所設計的頁面佈局不允許你使用響應式技術

2017.1.08用bootstrap構造響應式輪播圖

要求：利用bootstrap中的carousel外掛建立一個響應式輪播圖，輪播圖要求是：1、當螢幕為大螢幕時讓輪播圖中的圖片大小為2000px*410px大小，當螢幕寬度小於768px時，輪播圖中的圖片大小為640px*340px；2：當螢幕為小螢幕時，:螢幕進行縮放時，高

響應式網頁設計初探

blog ots 樣式 ... amp con height ron 電視機 我首次接觸響應式網頁設計還要從應用bootstrap說起。我們運用bootstrap的網格類簡單的將響應式設計帶入我們的網頁設計當中，當然bootstrap框架其實還做了其他事情以支持網頁響應式設

iPhone X 響應式網頁設計

以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。 24小時前，蘋果公司推出了iPhone X。隨之而來的是一個新的白色線條，幸福地坐在底部的觸摸板上，它替代了原有的home鍵。這也喚起了人們對物理home鍵的懷舊情結。