Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > ขอเรียนถามเรื่อง responsive web หน่อยครับ ใช้ Bootstrap3



 

ขอเรียนถามเรื่อง responsive web หน่อยครับ ใช้ Bootstrap3

 



Topic : 111034



โพสกระทู้ ( 190 )
บทความ ( 0 )



สถานะออฟไลน์




ขอเรียนถามเรื่อง responsive web หน่อยครับ ใช้ Bootstrap3

ผมออกแบบโดยใช้ Bootstrap 3 แล้วก็ใส่ Code


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">

แต่พอเข้าดูในแบบมือถือ เว็บกับแสดงผิดเพี้ยนมาก

ผมจึงอยากสอบถามว่า มี Code ตัวไหน ที่ให้แสดงว่า ส่วนนี้สามารถแสดงในเว็บได้ ส่วนนี้ไม่สามารถแสดงบนมือถือได้

หรือมีวิธีอื่นแนะนำไหมครับ หรือต้องไปกำหนดในส่วนไหนอีก พอดีพึงลองจับ Bootstrap ครับ อิอิ

ขอบคุณครับ



Tag : PHP, HTML/CSS, JavaScript, iOS, Android, Tablets







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-09-02 17:16:45 By : the_cop View : 6969 Reply : 11
 

 

No. 1



โพสกระทู้ ( 1,150 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ใช้ class visible-xx ครับ
เช่น

visible-lg
visible-md






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 17:26:37 By : progamer2000
 


 

No. 2



โพสกระทู้ ( 2,311 )
บทความ ( 1 )



สถานะออฟไลน์


ที่บอกเพี้ยนนี่ยังไงครับ คือถ้าออกแบบตามโครงสร้าง Bootstrap จะไม่เพี้ยนนะครับ หากจะแก้ไข ก็จะต้องแก้ในส่วนของการแสดงผล ก็คือ CSS ซะส่วนใหญ่ ผมไม่ได้เก่งอะไรนะครับ อาจจะให้ข้อคิดเห็นได้ไม่มาก แต่ผมลองเล่นแล้ว มันก็โอเคนะ แต่ไม่ได้เล่นแบบจริงจัง เพราะคิดว่ามันเยอะ(ขี้เกียจ) ส่วนใหญ่จะไปโหลดธีมฟรีมาแก้เอมากว่า
ผมชอบใช้ Grid996 เอามาโมเอง มีแต่ CSS Base มาให้ นึกอะไรออกก็จับใส่ไป แล้วแต่ถนัดนะผมว่า
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 17:28:36 By : arm8957
 

 

No. 3



โพสกระทู้ ( 4,169 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์


น่าจะเข้าใจผิดแล้วล่ะครับ
ส่วนแสดงผล กำหนดขนาด responsive web ขึ้นอยู่กับ Class="col" ซึ่งการกำหนดจะแบ่งออกเป็น 4 ประเภท ได้แก่
Phones (<768px) = .col-xs-
Tablets (≥768px) = .col-sm-
Desktops (≥992px) = .col-md-
Desktops (≥1200px) = .col-lg-
โดยทุกบรรทัด Division (div) ต่อ 1 rows หรือ 1 แถว จำเป็นต้องนับด้วย 12 เพื่อการแสดงผลที่ถูกต้อง

ยกตัวอย่าง สำหรับ Phone และ Desktops Full HD
Code (PHP)
<style>
	.bg{
		background-color:#F00;
	}
</style>

<div class="container-fluid">
  <div class="row">
     <div class="col-xs-4 col-lg-4 bg">Description</div> // xs แทน Phone , lg แทน Desktops Full HD
     <div class="col-xs-8 col-lg-8 bg">Description</div>  // xs แทน Phone , lg แทน Desktops Full HD
  </div>
</div>


ลองดูครับ เพราะผมใช้ framework ตัวนี้ทำงานให้ลูกค้า ณ ปัจจุบันที่ update version ล่าสุด


ประวัติการแก้ไข
2014-09-02 17:32:16
2014-09-02 17:34:25
2014-09-02 17:36:53
2014-09-02 18:31:28
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 17:29:53 By : Ex-[S]i[L]e[N]t
 


 

No. 4



โพสกระทู้ ( 1,150 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอนเทสก็ กดย่อขยาย browser ในคอมเอาก็ได้ครับ มันก็แสดงผลเหมือนในมือถือนะแหละ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 17:30:36 By : progamer2000
 


 

No. 5



โพสกระทู้ ( 611 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : Ex-[S]i[L]e[N]t เมื่อวันที่ 2014-09-02 17:29:53
รายละเอียดของการตอบ ::
ลองดูครับ เพราะผมใช้ framework ตัวนี้ทำงานให้ลูกค้า ณ ปัจจุบันที่ update version ล่าสุด



ผมรู้จักคำว่าเริ่มต้น "BootStrap" ก็จากพวกคุณนี่แหละครับ ใช้งานได้ดีเยี่ยมยอดและไร้ที่ติ
ผมอยากใช้ คุณช่วยผม (ขอร้อง) ทำหน้าจอให้ได้แบบนี้ เอาแค่ Table/อะไรก็ได้/Jquery/JavaScript/ ตามสะดวก

ผมจะทำหน้าจอ Advance Search แค่หน้าเดียวและใช้งานได้ทั้ง Application
BootStrap3_Advance_search



ปล. คุณสังเกตุวิธีการประยุกต์ใช้งาน ของผม (ถ้ามีค่าใช้จ่าย กระผมก็สะดวกครับ)
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 18:04:11 By : หน้าฮี
 


 

No. 6



โพสกระทู้ ( 190 )
บทความ ( 0 )



สถานะออฟไลน์


ครับผม ขอบคุณทุกความคิดเห็นครับ

ปัญหาของผม มี 2 จุดครับ คือ

1. ผมมีเมนูด้านบน เขียน Code แบบนี้ครับ

<nav class="navbar navbar-fixed-top navbar-inverse" >

เพื่อทำการ Fix เมนูด้านบน ไว้ ให้เลื่อตามหน้าจอ

** ปัญหา เวลาย่อขยายจอหรือแสดงบนมือถือ ผมไม่อยากให้มัน Fix ตาม เพราะมันบดบัง หน้าจอไปครึ่งหนึ่ง และบดบังรูปโลโก้ของผม
ปัญหานี้ถ้าไม่ให้แสดงในมือถือเลยทำได้ไหมครับ หรือมีวิธีอื่นแนะนำไหมครับ

2.ผมแทรกรูปเข้าไปใน Grid เวลาอยู่ ในจอคอม มันก็ปกติเพราะออแบบให้ขนาดพอดี

** แต่พอขยายจอหรือแสดงบนมือถือ ผรูปกับไม่ลดขนาดตามมาด้วย ควรแก้ตรงไหนดีครับ


ขอบคุณครับผม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 18:07:38 By : the_cop
 


 

No. 7



โพสกระทู้ ( 190 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : progamer2000 เมื่อวันที่ 2014-09-02 17:26:37
รายละเอียดของการตอบ ::
ใช้ class visible-xx ครับ
เช่น

visible-lg
visible-md


เมื่อกี้พึงลองทำตาม แก้ปัญหา ข้อที่ 1 ได้แล้วครับ สั่งให้มันหายไปเลย มันยุ่งยาหนัก อิอิ

ขอบคุณครับ


ประวัติการแก้ไข
2014-09-02 18:19:06
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 18:18:23 By : the_cop
 


 

No. 8



โพสกระทู้ ( 611 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : Ex-[S]i[L]e[N]t เมื่อวันที่ 2014-09-02 17:29:53
รายละเอียดของการตอบ ::
ต่อเนื่องจาก #NO 5


ผมมีข้อจำกัดมากมาย และไม่ได้รุ่มรวยไปทุกฯอย่าง
ณ.วันนี้ 2014-09-02 ผมตัดสินใจใช้ MS Access 2007 (.accdb) เป็นหลักในงานพัฒนา(เรียกอย่างอื่นก็ได้) ของผม

ผมให้คุณดูความขมขื่นซึ่งผมไม่มีทางเลือก คำสั่ง SQL Select บน MS Access แต่นี่คือสิ่งที่ผมเลือก
อันนี้ Join กันแค่ 3 ตาราง (Table) ผมจำเป็นต้องเขียนแบบนี้เท่านั้น


Code (SQL)
SELECT ICH.*, TRN_Tab.Tran_Desc, TRN_Tab.AccCode_NO, WHS_Tab.WHS_Desc, WHS_Tab.Stk_Location
FROM (
	ICH LEFT JOIN TRN_Tab
		ON (
				TRN_Tab.Tran_Type = ICH.Tran_Type
				AND TRN_Tab.Tran_Code = ICH.Tran_Code
				)
	)
LEFT JOIN WHS_Tab
	ON (
			WHS_Tab.WH_Code= ICH.WH_Code
			AND WHS_Tab.OrgCode = 'Default' -- Variable
			)



ประวัติการแก้ไข
2014-09-02 18:21:19
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 18:20:45 By : หน้าฮี
 


 

No. 9



โพสกระทู้ ( 4,169 )
บทความ ( 7 )

Hall of Fame 2012

สถานะออฟไลน์


ตอบความคิดเห็นที่ : 7 เขียนโดย : the_cop เมื่อวันที่ 2014-09-02 18:18:23
รายละเอียดของการตอบ ::
สำหรับคำถามที่ 2 นะครับ
ผมแทรกรูปเข้าไปใน Grid เวลาอยู่ ในจอคอม มันก็ปกติเพราะออแบบให้ขนาดพอดี

ตอบ เพื่อให้ได้รูปที่เหมาะสมกับการใช้งาน ผมแนะนำให้ทำการ Resize ผมจะใช้ .col-md เป็นหลัก ขยายรูปให้เท่า md ที่เราต้องการ ทำไมถึงต้องใช้ col-md เหตุผลคือ เมื่อขยายภาพจะไม่แตก และ ถ้าเมื่อลด ภาพก็จะไม่เละ สุดท้ายเพิ่ม เพิ่ม code ส่วนนี้เข้าไปครับ
Code (PHP)
<img src="resize.jpg" class="col-xs-4 col-lg-4">

และบทความที่คุณจำเป็นต้องศึกษาคือ
https://www.thaicreate.com/php/php-resize-image.html

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 18:36:21 By : Ex-[S]i[L]e[N]t
 


 

No. 10



โพสกระทู้ ( 190 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 9 เขียนโดย : Ex-[S]i[L]e[N]t เมื่อวันที่ 2014-09-02 18:36:21
รายละเอียดของการตอบ ::
อบ เพื่อให้ได้รูปที่เหมาะสมกับการใช้งาน ผมแนะนำให้ทำการ Resize ผมจะใช้ .col-md เป็นหลัก ขยายรูปให้เท่า md ที่เราต้องการ ทำไมถึงต้องใช้ col-md เหตุผลคือ เมื่อขยายภาพจะไม่แตก และ ถ้าเมื่อลด ภาพก็จะไม่เละ สุดท้ายเพิ่ม เพิ่ม code ส่วนนี้เข้าไปครับ
Code (PHP)
1.
<img src="resize.jpg" class="col-xs-4 col-lg-4">

และบทความที่คุณจำเป็นต้องศึกษาคือ
https://www.thaicreate.com/php/php-resize-image.html



ว๊าวว ขอบคุณพี่มากครับผม สำหรับ แนวทางในการฝึกวรยุทธ อีกขั้นนึ่งของผม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 18:43:55 By : the_cop
 


 

No. 11



โพสกระทู้ ( 190 )
บทความ ( 0 )



สถานะออฟไลน์


Code
<img src="..." class="img-responsive">



ไปเจอมาครับ เมื่อใช้กับรูปภาพ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-09-02 21:23:51 By : the_cop
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอเรียนถามเรื่อง responsive web หน่อยครับ ใช้ Bootstrap3
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่