Submit Search
Upload
如何運用Bootstrap 切版?
•
Download as PPTX, PDF
•
1 like
•
6,191 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
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
Alan Tsai
BEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanova
대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest
Terry Cho
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
Amazon Web Services Korea
SignalRブートキャンプ
SignalRブートキャンプ
Kouji Matsui
初心者向けWebinar AWSで開発環境を構築しよう
初心者向けWebinar AWSで開発環境を構築しよう
Amazon Web Services Japan
AWS Black Belt Online Seminar Amazon EC2
AWS Black Belt Online Seminar Amazon EC2
Amazon Web Services Japan
Recommended
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
Asp.net mvc 概觀介紹
Asp.net mvc 概觀介紹
Alan Tsai
BEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanova
대용량 분산 아키텍쳐 설계 #5. rest
대용량 분산 아키텍쳐 설계 #5. rest
Terry Cho
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
천만 사용자를 위한 AWS 클라우드 아키텍처 진화하기::이창수::AWS Summit Seoul 2018
Amazon Web Services Korea
SignalRブートキャンプ
SignalRブートキャンプ
Kouji Matsui
初心者向けWebinar AWSで開発環境を構築しよう
初心者向けWebinar AWSで開発環境を構築しよう
Amazon Web Services Japan
AWS Black Belt Online Seminar Amazon EC2
AWS Black Belt Online Seminar Amazon EC2
Amazon Web Services Japan
はじめてのCouch db
はじめてのCouch db
Eiji Kuroda
SAP on AWS - 국내 60개 이상 고객사가 SAP를 AWS에서 운영하는 이유
SAP on AWS - 국내 60개 이상 고객사가 SAP를 AWS에서 운영하는 이유
Amazon Web Services Korea
メルカリのデータベース戦略 / PHPとMySQLの怖い話 MyNA会2015年8月
メルカリのデータベース戦略 / PHPとMySQLの怖い話 MyNA会2015年8月
Masahiro Nagano
[GuideDoc] Deploy EKS thru eksctl - v1.22_v0.105.0.pdf
[GuideDoc] Deploy EKS thru eksctl - v1.22_v0.105.0.pdf
Jo Hoon
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
Will Huang
Cloud, sdn and nfv 기술동향 atto-research-박문기-20171016
Cloud, sdn and nfv 기술동향 atto-research-박문기-20171016
문기 박
体系的に学ばないXSSの話
体系的に学ばないXSSの話
Yutaka Maehira
ADFS で実現する OpenID Connect の実装
ADFS で実現する OpenID Connect の実装
Suguru Kunii
AWS Summit Seoul 2015 -CloudFront와 Route53 기반 콘텐츠 배포 전략 (GS네오텍-박정수)
AWS Summit Seoul 2015 -CloudFront와 Route53 기반 콘텐츠 배포 전략 (GS네오텍-박정수)
Amazon Web Services Korea
Amazon DocumentDB vs MongoDB 의 내부 아키텍쳐 와 장단점 비교
Amazon DocumentDB vs MongoDB 의 내부 아키텍쳐 와 장단점 비교
Amazon Web Services Korea
AWS Black Belt Online Seminar 2016 Amazon EMR
AWS Black Belt Online Seminar 2016 Amazon EMR
Amazon Web Services Japan
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
CloudFront最近の事例と間違った使い方
CloudFront最近の事例と間違った使い方
Hirokazu Ouchi
CSS For Backend Developers
CSS For Backend Developers
10Clouds
10のJava9で変わるJava8の嫌なとこ!
10のJava9で変わるJava8の嫌なとこ!
bitter_fox
NetApp XCP データ移行ツールインストールと設定
NetApp XCP データ移行ツールインストールと設定
Kan Itani
EKS를 통한 차량 공유 서비스 '타다' 서비스 구축기 - 김태호, VCNC :: AWS Summit Seoul 2019
EKS를 통한 차량 공유 서비스 '타다' 서비스 구축기 - 김태호, VCNC :: AWS Summit Seoul 2019
Amazon Web Services Korea
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
Amazon Web Services Japan
MySQLバックアップの基本
MySQLバックアップの基本
yoyamasaki
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
Amazon Web Services
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
響應式網頁實作坊
響應式網頁實作坊
Chih-cheng Wang
More Related Content
What's hot
はじめてのCouch db
はじめてのCouch db
Eiji Kuroda
SAP on AWS - 국내 60개 이상 고객사가 SAP를 AWS에서 운영하는 이유
SAP on AWS - 국내 60개 이상 고객사가 SAP를 AWS에서 운영하는 이유
Amazon Web Services Korea
メルカリのデータベース戦略 / PHPとMySQLの怖い話 MyNA会2015年8月
メルカリのデータベース戦略 / PHPとMySQLの怖い話 MyNA会2015年8月
Masahiro Nagano
[GuideDoc] Deploy EKS thru eksctl - v1.22_v0.105.0.pdf
[GuideDoc] Deploy EKS thru eksctl - v1.22_v0.105.0.pdf
Jo Hoon
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
Will Huang
Cloud, sdn and nfv 기술동향 atto-research-박문기-20171016
Cloud, sdn and nfv 기술동향 atto-research-박문기-20171016
문기 박
体系的に学ばないXSSの話
体系的に学ばないXSSの話
Yutaka Maehira
ADFS で実現する OpenID Connect の実装
ADFS で実現する OpenID Connect の実装
Suguru Kunii
AWS Summit Seoul 2015 -CloudFront와 Route53 기반 콘텐츠 배포 전략 (GS네오텍-박정수)
AWS Summit Seoul 2015 -CloudFront와 Route53 기반 콘텐츠 배포 전략 (GS네오텍-박정수)
Amazon Web Services Korea
Amazon DocumentDB vs MongoDB 의 내부 아키텍쳐 와 장단점 비교
Amazon DocumentDB vs MongoDB 의 내부 아키텍쳐 와 장단점 비교
Amazon Web Services Korea
AWS Black Belt Online Seminar 2016 Amazon EMR
AWS Black Belt Online Seminar 2016 Amazon EMR
Amazon Web Services Japan
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
CloudFront最近の事例と間違った使い方
CloudFront最近の事例と間違った使い方
Hirokazu Ouchi
CSS For Backend Developers
CSS For Backend Developers
10Clouds
10のJava9で変わるJava8の嫌なとこ!
10のJava9で変わるJava8の嫌なとこ!
bitter_fox
NetApp XCP データ移行ツールインストールと設定
NetApp XCP データ移行ツールインストールと設定
Kan Itani
EKS를 통한 차량 공유 서비스 '타다' 서비스 구축기 - 김태호, VCNC :: AWS Summit Seoul 2019
EKS를 통한 차량 공유 서비스 '타다' 서비스 구축기 - 김태호, VCNC :: AWS Summit Seoul 2019
Amazon Web Services Korea
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
Amazon Web Services Japan
MySQLバックアップの基本
MySQLバックアップの基本
yoyamasaki
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
Amazon Web Services
What's hot
(20)
はじめてのCouch db
はじめてのCouch db
SAP on AWS - 국내 60개 이상 고객사가 SAP를 AWS에서 운영하는 이유
SAP on AWS - 국내 60개 이상 고객사가 SAP를 AWS에서 운영하는 이유
メルカリのデータベース戦略 / PHPとMySQLの怖い話 MyNA会2015年8月
メルカリのデータベース戦略 / PHPとMySQLの怖い話 MyNA会2015年8月
[GuideDoc] Deploy EKS thru eksctl - v1.22_v0.105.0.pdf
[GuideDoc] Deploy EKS thru eksctl - v1.22_v0.105.0.pdf
你一定不能不知道的 Markdown 寫作技巧
你一定不能不知道的 Markdown 寫作技巧
Cloud, sdn and nfv 기술동향 atto-research-박문기-20171016
Cloud, sdn and nfv 기술동향 atto-research-박문기-20171016
体系的に学ばないXSSの話
体系的に学ばないXSSの話
ADFS で実現する OpenID Connect の実装
ADFS で実現する OpenID Connect の実装
AWS Summit Seoul 2015 -CloudFront와 Route53 기반 콘텐츠 배포 전략 (GS네오텍-박정수)
AWS Summit Seoul 2015 -CloudFront와 Route53 기반 콘텐츠 배포 전략 (GS네오텍-박정수)
Amazon DocumentDB vs MongoDB 의 내부 아키텍쳐 와 장단점 비교
Amazon DocumentDB vs MongoDB 의 내부 아키텍쳐 와 장단점 비교
AWS Black Belt Online Seminar 2016 Amazon EMR
AWS Black Belt Online Seminar 2016 Amazon EMR
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
CloudFront最近の事例と間違った使い方
CloudFront最近の事例と間違った使い方
CSS For Backend Developers
CSS For Backend Developers
10のJava9で変わるJava8の嫌なとこ!
10のJava9で変わるJava8の嫌なとこ!
NetApp XCP データ移行ツールインストールと設定
NetApp XCP データ移行ツールインストールと設定
EKS를 통한 차량 공유 서비스 '타다' 서비스 구축기 - 김태호, VCNC :: AWS Summit Seoul 2019
EKS를 통한 차량 공유 서비스 '타다' 서비스 구축기 - 김태호, VCNC :: AWS Summit Seoul 2019
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
20191126 AWS Black Belt Online Seminar Amazon AppStream 2.0
MySQLバックアップの基本
MySQLバックアップの基本
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
How AWS Minimizes the Blast Radius of Failures (ARC338) - AWS re:Invent 2018
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