বুটস্ট্র্যাপ ছাড়াই:
আমরা এক সেকেন্ডে বুটস্ট্র্যাপে যাব, তবে এটি নিজে করার জন্য এখানে সিএসএসের মৌলিক ধারণাটি খেলতে হবে। শিকারের দাড়ি হিসাবে উল্লেখ করা হয়েছে , আপনি ইনপুট উপাদানটির ভিতরে আইকনটি একেবারে অবস্থানের দ্বারা সিএসএস দিয়ে এটি করতে পারেন। তারপরে দু'দিকে প্যাডিং যুক্ত করুন যাতে পাঠ্যটি আইকনটির সাথে ওভারল্যাপ না হয়।
সুতরাং নিম্নলিখিত HTML এর জন্য:
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" />
</div>
আপনি গ্লাইফগুলি বাম এবং ডান সারিবদ্ধ করতে নিম্নলিখিত সিএসএস ব্যবহার করতে পারেন:
/* 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; }
দ্রষ্টব্য : এটি অনুমান করে আপনি গ্লাইফিকন ব্যবহার করছেন তবে হরফ-ফন্টের সাথে সমানভাবে কাজ করে ।
এফএ এর জন্য, কেবল .glyphiconসাথে প্রতিস্থাপন করুন.fa
বুটস্ট্র্যাপ সহ:
বাফার পয়েন্ট হিসাবে , এটি বুটস্ট্র্যাপের মধ্যে id চ্ছিক আইকন সহ বৈধকরণের রাজ্যগুলি ব্যবহার করে স্থানীয়ভাবে সম্পন্ন করা যায় । এটি .form-groupউপাদানটির শ্রেণি .has-feedbackএবং আইকনটির শ্রেণি দিয়ে giving.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।
যেহেতু বিভিন্ন ফর্মের ধরণ, বিভিন্ন নিয়ন্ত্রণের আকার, বিভিন্ন আইকন সেট এবং বিভিন্ন লেবেলের দৃশ্যমানতার চেয়ে অনেকগুলি সম্ভব এইচটিএমএল কনফিগারেশন রয়েছে, তাই আমি একটি পরীক্ষা পৃষ্ঠা তৈরি করেছি যা একটি লাইভ ডেমো সহ প্রতিটি আদেশের জন্য এইচটিএমএলের সঠিক সেট দেখায়।
পুনশ্চ ফ্রিজি যুক্ত করার পরামর্শটি বুটস্ট্র্যাপে যুক্ত pointer-events: none;করা হয়েছে
আপনি যা খুঁজছিলেন তা খুঁজে পাননি ? এই একই প্রশ্ন চেষ্টা করুন:
বাম সারিবদ্ধ প্রতিক্রিয়া আইকনগুলির জন্য সিএসএস যুক্ত করুন
.has-feedback .form-control {
padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
padding-right: 46px;
}
.has-feedback-left .form-control {
padding-right: 12px;
padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
left: 0;
}
.form-control-feedback {
line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
width: 30px;
height: 30px;
line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
width: 46px;
height: 46px;
line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
top: 0;
}
@media (min-width: 768px) {
.form-inline .inline-feedback {
position: relative;
display: inline-block;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .has-feedback-left .form-control-feedback {
left: 15px;
}
