Submit Search
Upload
如何運用Bootstrap 切版?
•
Download as PPTX, PDF
•
1 like
•
6,194 views
S
shiang huang
Follow
如何運用Bootstrap 切版?
Read less
Read more
Technology
Report
Share
Report
Share
1 of 14
Download now
Recommended
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
MaxScaleを触ってみた
MaxScaleを触ってみた
Fujishiro Takuya
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
Alan Tsai
01 slack導入の提案
01 slack導入の提案
ssuser68dea4
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
20170518_今さら聞けないHANAのハナシの基本のき by SAPジャパン株式会社 新久保浩二
20170518_今さら聞けないHANAのハナシの基本のき by SAPジャパン株式会社 新久保浩二
Insight Technology, Inc.
Db2をAWS上に構築する際のヒント&TIPS 2019年7月版
Db2をAWS上に構築する際のヒント&TIPS 2019年7月版
Akira Shimosako
Elasticsearchインデクシングのパフォーマンスを測ってみた
Elasticsearchインデクシングのパフォーマンスを測ってみた
Ryoji Kurosawa
Recommended
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
MaxScaleを触ってみた
MaxScaleを触ってみた
Fujishiro Takuya
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
Alan Tsai
01 slack導入の提案
01 slack導入の提案
ssuser68dea4
WebSocketのキホン
WebSocketのキホン
You_Kinjoh
20170518_今さら聞けないHANAのハナシの基本のき by SAPジャパン株式会社 新久保浩二
20170518_今さら聞けないHANAのハナシの基本のき by SAPジャパン株式会社 新久保浩二
Insight Technology, Inc.
Db2をAWS上に構築する際のヒント&TIPS 2019年7月版
Db2をAWS上に構築する際のヒント&TIPS 2019年7月版
Akira Shimosako
Elasticsearchインデクシングのパフォーマンスを測ってみた
Elasticsearchインデクシングのパフォーマンスを測ってみた
Ryoji Kurosawa
Measurement of Maximum new NAT-sessionsper second / How to send packets
Measurement of Maximum new NAT-sessionsper second / How to send packets
@ otsuka752
プロトコル/NAT/HTTP通信の中身 〜 ネットワーク勉強会資料
プロトコル/NAT/HTTP通信の中身 〜 ネットワーク勉強会資料
Ken SASAKI
JSONBはPostgreSQL9.5でいかに改善されたのか
JSONBはPostgreSQL9.5でいかに改善されたのか
NTT DATA OSS Professional Services
10年効く分散ファイルシステム技術 GlusterFS & Red Hat Storage
10年効く分散ファイルシステム技術 GlusterFS & Red Hat Storage
Etsuji Nakai
Zabbixで学ぶ統計解析入門
Zabbixで学ぶ統計解析入門
Takeo Noda
RDB開発者のためのApache Cassandra データモデリング入門
RDB開発者のためのApache Cassandra データモデリング入門
Yuki Morishita
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
Amazon Web Services Japan
技術選定をしてみたというお話
技術選定をしてみたというお話
ssuser000144
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
NTT DATA Technology & Innovation
Glue DataBrewでデータをクリーニング、加工してみよう
Glue DataBrewでデータをクリーニング、加工してみよう
takeshi suto
pg_bigmを触り始めた人に伝えたいこと
pg_bigmを触り始めた人に伝えたいこと
Masahiko Sawada
OVF, OVA, ovftool
OVF, OVA, ovftool
tshiroyama
STNSサーバーを書いてみた
STNSサーバーを書いてみた
Yoshinori Teraoka
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
nasa9084
Cassandraのしくみ データの読み書き編
Cassandraのしくみ データの読み書き編
Yuki Morishita
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
Kouhei Sutou
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
真乙 九龍
Design your application using Persistent Graphs and OrientDB
Design your application using Persistent Graphs and OrientDB
Luca Garulli
【第26回Elasticsearch勉強会】Logstashとともに振り返る、やっちまった事例ごった煮
【第26回Elasticsearch勉強会】Logstashとともに振り返る、やっちまった事例ごった煮
Hibino Hisashi
DEXCS2015のWindows10 PCへのインストール
DEXCS2015のWindows10 PCへのインストール
stebee19
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
響應式網頁實作坊
響應式網頁實作坊
Chih-cheng Wang
More Related Content
What's hot
Measurement of Maximum new NAT-sessionsper second / How to send packets
Measurement of Maximum new NAT-sessionsper second / How to send packets
@ otsuka752
プロトコル/NAT/HTTP通信の中身 〜 ネットワーク勉強会資料
プロトコル/NAT/HTTP通信の中身 〜 ネットワーク勉強会資料
Ken SASAKI
JSONBはPostgreSQL9.5でいかに改善されたのか
JSONBはPostgreSQL9.5でいかに改善されたのか
NTT DATA OSS Professional Services
10年効く分散ファイルシステム技術 GlusterFS & Red Hat Storage
10年効く分散ファイルシステム技術 GlusterFS & Red Hat Storage
Etsuji Nakai
Zabbixで学ぶ統計解析入門
Zabbixで学ぶ統計解析入門
Takeo Noda
RDB開発者のためのApache Cassandra データモデリング入門
RDB開発者のためのApache Cassandra データモデリング入門
Yuki Morishita
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
Amazon Web Services Japan
技術選定をしてみたというお話
技術選定をしてみたというお話
ssuser000144
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
NTT DATA Technology & Innovation
Glue DataBrewでデータをクリーニング、加工してみよう
Glue DataBrewでデータをクリーニング、加工してみよう
takeshi suto
pg_bigmを触り始めた人に伝えたいこと
pg_bigmを触り始めた人に伝えたいこと
Masahiko Sawada
OVF, OVA, ovftool
OVF, OVA, ovftool
tshiroyama
STNSサーバーを書いてみた
STNSサーバーを書いてみた
Yoshinori Teraoka
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
nasa9084
Cassandraのしくみ データの読み書き編
Cassandraのしくみ データの読み書き編
Yuki Morishita
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
Kouhei Sutou
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
真乙 九龍
Design your application using Persistent Graphs and OrientDB
Design your application using Persistent Graphs and OrientDB
Luca Garulli
【第26回Elasticsearch勉強会】Logstashとともに振り返る、やっちまった事例ごった煮
【第26回Elasticsearch勉強会】Logstashとともに振り返る、やっちまった事例ごった煮
Hibino Hisashi
DEXCS2015のWindows10 PCへのインストール
DEXCS2015のWindows10 PCへのインストール
stebee19
What's hot
(20)
Measurement of Maximum new NAT-sessionsper second / How to send packets
Measurement of Maximum new NAT-sessionsper second / How to send packets
プロトコル/NAT/HTTP通信の中身 〜 ネットワーク勉強会資料
プロトコル/NAT/HTTP通信の中身 〜 ネットワーク勉強会資料
JSONBはPostgreSQL9.5でいかに改善されたのか
JSONBはPostgreSQL9.5でいかに改善されたのか
10年効く分散ファイルシステム技術 GlusterFS & Red Hat Storage
10年効く分散ファイルシステム技術 GlusterFS & Red Hat Storage
Zabbixで学ぶ統計解析入門
Zabbixで学ぶ統計解析入門
RDB開発者のためのApache Cassandra データモデリング入門
RDB開発者のためのApache Cassandra データモデリング入門
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
AWS Lambda ハンズオン 2-Tier アーキテクチャで未来へ
技術選定をしてみたというお話
技術選定をしてみたというお話
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
オススメのJavaログ管理手法 ~コンテナ編~(Open Source Conference 2022 Online/Spring 発表資料)
Glue DataBrewでデータをクリーニング、加工してみよう
Glue DataBrewでデータをクリーニング、加工してみよう
pg_bigmを触り始めた人に伝えたいこと
pg_bigmを触り始めた人に伝えたいこと
OVF, OVA, ovftool
OVF, OVA, ovftool
STNSサーバーを書いてみた
STNSサーバーを書いてみた
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
Cassandraのしくみ データの読み書き編
Cassandraのしくみ データの読み書き編
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
MySQL・PostgreSQLだけで作る高速あいまい全文検索システム
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
Design your application using Persistent Graphs and OrientDB
Design your application using Persistent Graphs and OrientDB
【第26回Elasticsearch勉強会】Logstashとともに振り返る、やっちまった事例ごった煮
【第26回Elasticsearch勉強会】Logstashとともに振り返る、やっちまった事例ごった煮
DEXCS2015のWindows10 PCへのインストール
DEXCS2015のWindows10 PCへのインストール
Viewers also liked
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
響應式網頁實作坊
響應式網頁實作坊
Chih-cheng Wang
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
Chih-cheng Wang
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
ilovejoomla
那些年網頁Ps切板的小事
那些年網頁Ps切板的小事
Aaron King
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
五行完成網頁多國語系
五行完成網頁多國語系
amostsai
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Chih-cheng Wang
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
wantingj
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Jocelyn Hsu
Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21
CQD
從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合
Joel Zhong
TrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTW
Ryan Chung
PHP WEB 应用组织与结构
PHP WEB 应用组织与结构
HonestQiao
APP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCoda
Ryan Chung
教學課程Pdf備份
教學課程Pdf備份
楷霖 顏
Grpc go-in-php
Grpc go-in-php
光照 刘
Flexbox版面配置
Flexbox版面配置
景智 張
UI guide Example
UI guide Example
Howlin Yang
Viewers also liked
(20)
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
響應式網頁實作坊
響應式網頁實作坊
專業前端 都如何管理 CSS
專業前端 都如何管理 CSS
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
【 I Love Joomla 】HtmlxCSS切版教學[基礎篇]
那些年網頁Ps切板的小事
那些年網頁Ps切板的小事
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
五行完成網頁多國語系
五行完成網頁多國語系
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
Sass 基礎教學 - 高雄前端社群(CSS 讀書會)
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
Grid - 新時代的排版利器
Grid - 新時代的排版利器
Opensource 是人生的好朋友 2016-07-21
Opensource 是人生的好朋友 2016-07-21
從 Php unit 到 ci 持續整合
從 Php unit 到 ci 持續整合
TrainingProgramAtMobileDevTW
TrainingProgramAtMobileDevTW
PHP WEB 应用组织与结构
PHP WEB 应用组织与结构
APP Development Learning Experience Share - AppCoda
APP Development Learning Experience Share - AppCoda
教學課程Pdf備份
教學課程Pdf備份
Grpc go-in-php
Grpc go-in-php
Flexbox版面配置
Flexbox版面配置
UI guide Example
UI guide Example
如何運用Bootstrap 切版?
1.
www
2.
Bootstrap 基本排版方式
3.
Bootstrap請至http://getbootstrap.com/ 下載最新版本 開發環境: 任何文字編輯器都行。
4.
建立資料夾
5.
開啟編輯器 1. 這段主要的意義是讓螢幕可以在縮小時,區塊也能更著變動 2.掛載 bootstrap
(主要以bootstrap放置路徑位置為主) 3.放置自己寫的CSS(最好放置在最下方,才能改寫覆蓋掉上頭寫的CSS)
6.
假設以這張layout為範例
7.
以bootstrap的佈局 會分成12 欄 網格 主要表示法 col-xs- col-sm- col-md- col-lg- 手機 平板 筆電 桌電
8.
所以 以這張 layout為例 可以想像成這樣
9.
電腦 平板 手機 想好畫面就可以開始動手切版了 EX: col-lg-2
col-lg-10 EX: col-sm-3 col-sm-9 EX: col-xs-3 col-xs-9
10.
Bootstrap 主要布局最外層(基底) 一定要先包 一個 container-fluid滿版
container非滿版或
11.
在 container-fluid container
下方一定要包 row 以版面規劃這裡會包4個 row 1 1 1 1 或
12.
切版由小尺寸到大尺寸比較建議 這邊主要是分顏色用,才下的樣式可以不必理 手 機 板 手 機 板
13.
平 板 、 筆 電 、 電 腦
14.
範例下載 : 參考: http://getbootstrap.com/css/ https://drive.google.com/file/d/0B3zZminnMtSMNGd0cF FlZk5ValU/view?usp=sharing
Download now