เพิ่ม Bootstrap Glyphicon ไปยังกล่องอินพุต


340

ฉันจะเพิ่ม glyphicon ลงในช่องป้อนข้อความได้อย่างไร ตัวอย่างเช่นฉันต้องการ 'ไอคอนผู้ใช้' ในการป้อนชื่อผู้ใช้สิ่งนี้:

ป้อนคำอธิบายรูปภาพที่นี่


5
นี่เป็นโซลูชันทางเลือกของฉัน (สำหรับ 2014) JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Richard Cotrina

ไปงานปาร์ตี้สาย แต่ลองดูคำตอบของฉันฉันใช้ bootstrap เท่านั้นเพื่อให้ได้เอฟเฟกต์นั้นและเพื่อเปลี่ยนสีและเส้นขอบฉันใช้ css สองบรรทัด มันแก้ปัญหาอื่น ๆ ที่ได้รับการกล่าวถึงในคำตอบส่วนstackoverflow.com/a/40945821/2914407
Dheeraj

คำตอบ:


755

โดยไม่ต้อง Bootstrap:

เราจะไปที่ Bootstrap ภายในไม่กี่วินาที แต่นี่คือแนวคิดพื้นฐาน CSS ในการเล่นเพื่อที่จะทำสิ่งนี้ด้วยตัวเอง เมื่อเคราของเหยื่อชี้คุณสามารถทำสิ่งนี้ได้ด้วย CSS โดยการวางตำแหน่งไอคอนภายในองค์ประกอบอินพุต จากนั้นเพิ่มการขยายไปที่ด้านใดด้านหนึ่งเพื่อให้ข้อความไม่ทับซ้อนกับไอคอน

ดังนั้นสำหรับ HTML ต่อไปนี้:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

คุณสามารถใช้ CSS ต่อไปนี้เพื่อจัดตำแหน่งสัญลักษณ์ทางซ้ายและขวา:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

การสาธิตใน Plunker

ภาพหน้าจอ css

หมายเหตุ : สิ่งนี้ทึกทักว่าคุณกำลังใช้glyphiconsแต่ใช้ได้ดีกับตัวอักษรที่ยอดเยี่ยม
สำหรับ FA ให้แทนที่.glyphiconด้วย.fa


ด้วย Bootstrap:

ในฐานะที่เป็นบัฟเฟอร์ชี้ให้เห็นนี้สามารถทำได้โดยกำเนิดภายใน Bootstrap โดยใช้การตรวจสอบสหรัฐอเมริกาที่มีไอคอนตัวเลือก นี้จะกระทำโดยการให้.form-groupองค์ประกอบของชั้นเรียนของและไอคอนระดับของ.has-feedback.form-control-feedback

ตัวอย่างที่ง่ายที่สุดจะเป็นดังนี้:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

ข้อดี :

  • รวมถึงการสนับสนุนสำหรับรูปแบบที่แตกต่างกัน (พื้นฐาน, แนวนอน, อินไลน์)
  • รองรับการควบคุมขนาดต่าง ๆ (ค่าเริ่มต้น, เล็ก, ใหญ่)

ข้อเสีย :

  • ไม่รวมการสนับสนุนไอคอนจัดแนวด้านซ้าย

เพื่อเอาชนะข้อเสียฉันได้รวบรวมคำร้องขอแบบดึงนี้พร้อมกับการเปลี่ยนแปลงเพื่อสนับสนุนไอคอนจัดชิดซ้าย เนื่องจากเป็นการเปลี่ยนแปลงที่ค่อนข้างใหญ่จึงถูกยกเลิกไปจนกว่าจะมีการเปิดตัวในอนาคต แต่หากคุณต้องการคุณสมบัติเหล่านี้ในวันนี้นี่คือคำแนะนำการใช้งานที่ง่าย:

เพียงแค่รวมการเปลี่ยนแปลงแบบฟอร์มเหล่านี้ใน css (เช่นการแทรกผ่านส่วนย่อยที่ซ่อนอยู่ที่ด้านล่าง)
* น้อยลง : อีกทางหนึ่งถ้าคุณเป็นสร้างน้อยกว่านี่คือรูปแบบการเปลี่ยนแปลงที่น้อยลง

จากนั้นสิ่งที่คุณต้องทำคือรวมคลาส.has-feedback-leftในกลุ่มใด ๆ ที่มีคลาส.has-feedbackเพื่อให้จัดแนวไอคอนด้านซ้าย

เนื่องจากมีการกำหนดค่า html ที่เป็นไปได้จำนวนมากในรูปแบบที่แตกต่างกันขนาดการควบคุมที่แตกต่างกันชุดไอคอนที่แตกต่างกันและการมองเห็นฉลากที่แตกต่างกันฉันสร้างหน้าทดสอบที่แสดงชุด HTML ที่ถูกต้องสำหรับการเปลี่ยนแปลงแต่ละครั้ง

นี่คือตัวอย่างใน Plunker

ภาพหน้าจอข้อเสนอแนะ

คำแนะนำการเพิ่มPS frizipointer-events: none;ถูกเพิ่มใน bootstrap

ไม่พบสิ่งที่คุณกำลังมองหา ? ลองคำถามที่คล้ายกันเหล่านี้:

CSS เพิ่มเติมสำหรับไอคอนคำติชมชิดซ้าย


ดูการแก้ไขของฉันฉันได้เลือก css ของ focusInput ชัดเจนมากขึ้นมิฉะนั้นมันจะถูกเขียนทับโดย. input-group-addon
Michel Müller

@ MichelMüllerฉันไม่แน่ใจว่าฉันเห็นคุณค่าในการแก้ไขที่คุณแนะนำ .focusedInputชั้นถูกกำหนดหลังจาก.input-group-addonดังนั้นเมื่อผ้าสไตล์Cascadeลงรูปแบบหลังควรจะมีความสำคัญ คุณช่วยอธิบายสถานการณ์ให้ดีขึ้นซึ่งนำไปสู่ปัญหานี้ได้หรือไม่?
KyleMit

2
ฉันแนะนำให้เพิ่ม "pointer-events: none;" สำหรับไอคอนเนื่องจากโดยค่าเริ่มต้นพวกมันจะรบกวนการโฟกัสอินพุต
Frizi

1
@ Leandro มันแน่นอน! . มันเป็นเพียงเพราะ FontAwesome แนะนำหมดเปลี่ยนแปลงในเวอร์ชัน 4. ถ้าคุณต้องการอัพเกรดจาก3.xจะ4.xคุณจะมีการเปลี่ยนแปลงไป<i class="icon-user"></i> <i class="fa fa-user"></i>เมื่อใดก็ตามที่คุณต้องการอัปเดตไลบรารีภายนอกโปรดอ่านบันทึกย่อประจำรุ่นและเอกสารใหม่เพื่อตรวจสอบว่าแอปของคุณยังใช้งานได้หรือไม่
KyleMit

1
@Leando คุณสามารถอ่านเพิ่มเติมเกี่ยวกับอนุสัญญาการตั้งชื่อใหม่ใน FA 4.0เช่นเดียวกับคู่มือการโยกย้ายเต็มรูปแบบจาก 3.21 ถึง 4
KyleMit

62

อย่างเป็นทางการของวิธีการ ไม่จำเป็นต้องใช้ CSS ที่กำหนดเอง:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

ตัวอย่างนี้มีพื้นฐานจากตัวอย่างใน Bootstrap docs เลื่อนลงไปที่ "With Icons เสริม" ที่นี่http://getbootstrap.com/css/#forms-control-validation

ป้อนคำอธิบายรูปภาพที่นี่


3
+1 - ดีอย่างแน่นอนที่มีวิธีการดั้งเดิมที่สร้างขึ้นใน bootstrap แม้ว่าสิ่งนี้จะไม่ร้อนจัดที่ไอคอนจัดแนวซ้ายเหมือนคำถามที่ต้องการ แต่ก็เป็นแนวทางที่ดี
KyleMit

1
การเพิ่ม{left:0}คลาส glyphicon ควรดูแลการจัดตำแหน่งด้านซ้าย jsfiddle.net/LS2Ek/30 ฉันชอบวิธีเค้าร่าง + กล่องเงาของคุณ ดูเรียบร้อย!
ผู้ใช้

นั่นคือสิ่งที่ฉันคิดเช่นกัน แต่คุณจะเลิกสร้าง CSS จำนวนมากอีกครั้งในสถานการณ์ที่แตกต่างกัน หากคุณเพิ่มป้ายกำกับคุณจะเห็นปัญหาบางอย่าง บนฟอร์มอินไลน์left:0ไม่ระบุจุดเริ่มต้นของอินพุตอีกต่อไป นอกจากนี้คุณจะต้องเพิ่มการขยายไปทางซ้ายของอินพุตและลบทางด้านขวา ยังคงเป็นทางออกที่ดีและสะอาด ฉันคิดว่าการระบุทางซ้ายของอินพุตนั้นเป็นส่วนที่ยากซึ่งเป็นที่ซึ่งเสื้อคลุมที่position:relativeมาพร้อมกับมือถือ
KyleMit

คุณควรเพิ่มโปรแกรมแก้ไขนี้ลงใน bootstrap มันเป็นคุณสมบัติที่มีประโยชน์และใช้บ่อย
ผู้ใช้

43

นี่เป็นทางเลือก CSS-only ฉันตั้งค่านี้สำหรับช่องค้นหาเพื่อให้ได้ผลคล้ายกับ Firefox (& อีกร้อยแอพอื่น ๆ )

นี่คือไวโอลิน

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

+1 โซลูชันที่ยอดเยี่ยม ฉันปรับมันเป็นคลาสยูทิลิตี้ซ้ายและขวา แต่วิธีการที่เหมาะสมแน่นอน
KyleMit

ใช่ง่ายและสมบูรณ์แบบ
PeMa

11

นี่คือวิธีที่ฉันทำโดยใช้เฉพาะ bootstrap CSS v3.3.1 ที่เป็นค่าเริ่มต้น:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

และนี่คือลักษณะที่ปรากฏ:

ป้อนคำอธิบายรูปภาพที่นี่


8

'การโกง' นี้จะทำงานกับผลข้างเคียงที่ระดับ glyphicon จะเปลี่ยนแบบอักษรสำหรับการควบคุมอินพุต

ซอ

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

หากคุณต้องการกำจัดผลข้างเคียงคุณสามารถลบคลาส "glyphicon" และเพิ่ม CSS ต่อไปนี้ (อาจมีวิธีที่ดีกว่าในการกำหนดสไตล์องค์ประกอบตัวยึดตำแหน่งและฉันทดสอบบน Chrome เท่านั้น)

ซอ

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

อาจเป็นวิธีที่สะอาดยิ่งขึ้น:

ซอ

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

8

มันสามารถทำได้โดยใช้คลาสจาก bootstrap 3.x รุ่นอย่างเป็นทางการโดยไม่ต้อง CSS ใด ๆ ที่กำหนดเอง

ใช้input-group-addonก่อนแท็กอินพุตด้านในจากinput-groupนั้นใช้ glyphicons ใด ๆ นี่คือรหัส

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

นี่คือผลลัพธ์

ป้อนคำอธิบายรูปภาพที่นี่

ในการปรับแต่งเพิ่มเติมเพิ่ม css ที่กำหนดเองสองสามบรรทัดไปยังไฟล์ custom.css ของคุณเอง (ปรับการขยายหากจำเป็น)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

ด้วยการทำให้พื้นหลังของinput-group-addonโปร่งใสและทำให้การไล่ระดับสีด้านซ้ายของแท็กอินพุตเป็นศูนย์อินพุตจะมีลักษณะที่ไร้รอยต่อ นี่คือเอาต์พุตที่กำหนดเอง

ป้อนคำอธิบายรูปภาพที่นี่

นี่คือตัวอย่าง jsbin

วิธีนี้จะแก้ปัญหา CSS ที่กำหนดเองของการซ้อนทับกับป้ายกำกับการจัดตำแหน่งในขณะที่ใช้input-lgและมุ่งเน้นไปที่ปัญหาแท็บ


6

ต่อไปนี้เป็นโซลูชันที่ไม่ใช่บูตสแตรปที่ทำให้มาร์กอัปของคุณง่ายขึ้นโดยการฝังการแทนรูปภาพของ glyphicon โดยตรงใน CSS โดยใช้การเข้ารหัส base64 URI

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">



5

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">


ยอดเยี่ยม "jugad" แต่มันมีประโยชน์มากในการตั้งค่าไอคอนที่กำหนดเองขอบคุณ
Dhruv Raval

4

นี่เป็นอีกวิธีที่จะทำได้โดยการวาง glyphicon โดยใช้:beforeองค์ประกอบหลอกใน CSS

สาธิตการทำงานใน jsFiddle

สำหรับ HTML นี้:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

ใช้ CSS นี้ ( Bootstrap 3.x และเบราว์เซอร์ที่ใช้ Webkit )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

ดังที่ @Frizi กล่าวเราต้องเพิ่ม pointer-events: none;เพื่อให้เคอร์เซอร์ไม่รบกวนการทำงานของโฟกัสเข้า กฎ CSS อื่น ๆ ทั้งหมดใช้สำหรับการจัดกึ่งกลางและเพิ่มระยะห่างที่เหมาะสม

ผลลัพธ์:

ภาพหน้าจอ


2

คุณสามารถใช้ Unicode HTML ได้

ดังนั้นในการเพิ่มไอคอนผู้ใช้เพียงเพิ่ม&#xe008;ไปที่placeholderแอตทริบิวต์หรือที่ใดก็ตามที่คุณต้องการ

คุณอาจต้องการตรวจสอบชีตชีตนี้

ตัวอย่าง:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

อย่าลืมตั้งค่าฟอนต์ของอินพุตเป็น Glyphicon หนึ่งโดยใช้รหัสต่อไปนี้: font-family: 'Glyphicons Halflings', Arialโดยที่ Arialเป็นฟอนต์ของข้อความปกติในอินพุต


1

ฉันยังมีหนึ่งการตัดสินใจสำหรับกรณีนี้ด้วย Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

ในการป้อนข้อมูลฉันมีสิ่งนี้: ป้อนคำอธิบายรูปภาพที่นี่


1

ทดสอบกับ Bootstrap 4

ใช้ a form-controlและเพิ่มis-validในคลาส สังเกตว่าตัวควบคุมเปลี่ยนเป็นสีเขียวได้อย่างไร แต่ที่สำคัญกว่านั้นสังเกตเห็นไอคอนเครื่องหมายถูกที่ด้านขวาของตัวควบคุม นี่คือสิ่งที่เราต้องการ!

ตัวอย่าง:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>


0

หากคุณโชคดีพอที่ต้องการเพียงเบราว์เซอร์รุ่นใหม่ลองใช้ css transform translate สิ่งนี้ไม่จำเป็นต้องใช้ตัวห่อหุ้มและสามารถปรับแต่งเพื่อให้คุณสามารถเว้นระยะห่างสำหรับอินพุต [type = number] เพื่อรองรับสปินเนอร์อินพุตหรือย้ายไปทางซ้ายของที่จับ

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110


0

คุณควรจะทำสิ่งนี้กับคลาส bootstrap ที่มีอยู่และสไตล์ที่กำหนดเองเล็กน้อย

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

แก้ไข ไอคอนถูกอ้างอิงผ่านicon-userคลาส คำตอบนี้ถูกเขียนขึ้นในเวลา Bootstrap เวอร์ชั่น 2 คุณสามารถดูการอ้างอิงในหน้าต่อไปนี้: http://getbootstrap.com/2.3.2/base-css.html#images


ไม่เห็นการอ้างอิง glyphicon ของบูตสแตรปในคำตอบนี้
Kirby

@Kirby ไอคอนอ้างอิงผ่านคลาสผู้ใช้ไอคอน คำตอบนี้เขียนเมื่อ Bootstrap เวอร์ชั่น 2 คุณสามารถดูการอ้างอิงได้ในหน้าต่อไปนี้ - getbootstrap.com/2.3.2/base-css.html#images
YOOOEE
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.