বুটস্ট্র্যাপ 3 এ প্রয়োজনীয় ক্ষেত্রগুলিতে তারকাচিহ্ন যুক্ত করা হচ্ছে

Question

আমার এইচটিএমএল নামে একটি ক্লাস রয়েছে যা .requiredপ্রয়োজনীয় ক্ষেত্রগুলিতে নির্ধারিত।

এইচটিএমএল:

<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
    <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
    <div class="form-group required">
       <label class="col-md-2 control-label">Username</label>
       <div class="col-md-4">
         <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
       </div>
    </div>
    <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">&#160;</label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-primary">
              <span class="glyphicon glyphicon-star"></span> Sign Me Up!
           </button>
        </div>
    </div>
</form>

আমি আমার সিএসএসে নিম্নলিখিতগুলি যুক্ত করেছি;

.form-group .required .control-label:after {
  content:"*";color:red;
}

তবুও *এটি প্রয়োজনীয় ক্ষেত্রগুলির চারপাশে একটি লাল দেয় না । আমি এখানে কি মিস করছি? *প্রয়োজনীয় ক্ষেত্রগুলির সাথে পরিচয় করানোর জন্য বুটস্ট্র্যাপ 3-তে সরাসরি কোনও উপায় নেই ?

---

সম্পাদনা

*চুক্তি ও শর্তাদি একটি চেকবক্স অবিলম্বে প্রদর্শিত হবে না। কিভাবে এটি ঠিক করবেন?

Comments

উত্তর দেওয়া প্রশ্ন চিহ্নিত করুন।

— লাভএন্ডহ্যাপিনেস

Answer 1

.form-group.requiredস্থান ছাড়া ব্যবহার করুন ।

.form-group.required .control-label:after {
  content:"*";
  color:red;
}

সম্পাদনা:

চেকবাক্সের জন্য আপনি ছদ্ম শ্রেণিটি ব্যবহার করতে পারেন: (নয়)। আপনি প্রতিটি লেবেলের পরে প্রয়োজনীয় * যুক্ত করুন যদি না এটি চেকবক্স হয়

.form-group.required:not(.checkbox) .control-label:after, 
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
   content:"*";
   color:red;
}

দ্রষ্টব্য: পরীক্ষিত নয়

আপনার .text ক্লাসটি ব্যবহার করা উচিত বা লক্ষ্যবস্তু করা উচিত অন্যথায় সম্ভবত, এইচটিএমএল চেষ্টা করুন:

<div class="form-group required">
   <label class="col-md-2 control-label">&#160;</label>
   <div class="col-md-4">
      <div class="checkbox">
         <label class='text'> <!-- use this class -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

ঠিক আছে তৃতীয় সম্পাদনা:

সিএসএস যা ছিল তা ফিরে

.form-group.required .control-label:after { 
   content:"*";
   color:red;
}

এইচটিএমএল:

<div class="form-group required">
   <label class="col-md-2">&#160;</label> <!-- remove class control-label -->
   <div class="col-md-4">
      <div class="checkbox">
         <label class='control-label'> <!-- use this class as the red * will be after control-label -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

Comments

আমি সম্পাদিতটি চেষ্টা করেছিলাম, তবে এটি কার্যকর হয়নি। আপনি কি চেক করতে পারেন?

— মস্তিষ্কে ঝড়

— সিএসএসেও

জেনেরিক BS3 বলে মনে হচ্ছে না, তবে কাস্টম সিএসএস? এটি আমার কাছেও প্রতিক্রিয়াশীল বলে মনে হচ্ছে, সুতরাং এটি যুক্ত করা ঠিক আছে (আপনার বিএস থিম ফাইলটিতে, যেমন bootstrap-theme.css)।

— রোল্যান্ড

সিউডো-শ্রেণি এবং সিউডো-উপাদানগুলিকে আলাদা করতে আপনি ব্যবহার করতে পারেন ::after। স্তর 3 সিএসএস জল্পনা শেষ।

— নিয়ঙ্গাবো

Answer 2

এইচটিএমএল দেখতে দেখতে এটিই মনে হচ্ছে

<div class="form-group required">
   <label class="col-md-2 control-label">E-mail</label>
   <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>

লেবেলের ডানদিকে একটি তারকাচিহ্ন প্রদর্শন করতে:

.form-group.required .control-label:after { 
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top:7px;
}

বা লেবেলের বাম দিকে:

.form-group.required .control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -15px;
}

একটি দুর্দান্ত বড় লাল অষ্টিকা তৈরি করতে আপনি এই লাইনগুলি যুক্ত করতে পারেন:

font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;

অথবা আপনি যদি হরফ হ'ল ফন্ট ব্যবহার করছেন তবে এই লাইনগুলি যুক্ত করুন (এবং সামগ্রীর লাইনটি পরিবর্তন করুন):

font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";

Comments

top:7px;লেবেলটি বহু-লাইন হলে সমস্যার সৃষ্টি করবে। margin-top: -4px;উদাহরণস্বরূপ এটির সাথে প্রতিস্থাপন করা ভাল ।

— শাশা_গুদ

Answer 3

.form-group .required .control-label:afterসম্ভবত হওয়া উচিত .form-group.required .control-label:after। .For- গ্রুপ এবং। প্রয়োজনীয়গুলির মধ্যে স্থান অপসারণ হল পরিবর্তন is

Comments

ধন্যবাদ! বুটস্ট্র্যাপ ২.৩-এর সাথে কাজ করে .control-group.required .control-label:after { content:"*"; color:red; }

— এডিটর 14

Answer 4

অন্য দুটি উত্তর সঠিক। আপনি যখন নিজের সিএসএস নির্বাচকগুলিতে শূন্যস্থান অন্তর্ভুক্ত করবেন আপনি শিশু উপাদানগুলিকে লক্ষ্য করছেন তাই:

.form-group .required {
    styles
}

"ফর্ম-গ্রুপ" শ্রেণীর সাথে একটি উপাদানটির ভিতরে থাকা "প্রয়োজনীয়" শ্রেণীর সাথে এমন একটি উপাদানকে লক্ষ্যবস্তু করা হচ্ছে।

স্থান ব্যতীত এটি এমন একটি উপাদানকে লক্ষ্য করে যেখানে উভয় শ্রেণি থাকে। 'প্রয়োজনীয়' এবং 'ফর্ম-গ্রুপ'

Comments

এটি আপনার মূল প্রশ্ন থেকে পৃথক সমস্যা। আপনার সিএসএস আপনি যা বলছেন ঠিক তাই করছে। এটি লেবেল ক্ষেত্রের সাথে তারকাচিহ্ন স্থাপন করছে (যা আপনার শর্তাদি এবং শর্তাবলী ফাঁকা) এবং ইনপুট ক্ষেত্রটি নয়। আপনি যদি সেগুলি একসাথে উপস্থিত হতে চান তবে আপনাকে সেগুলি এইচটিএমএলে একসাথে গ্রুপ করতে হবে। তবে তারপরে আপনার একটি ফাঁকা লেবেল ক্ষেত্র রয়েছে যা খারাপ। আমি কেবল শর্তাদি এবং শর্তাবলী লেবেল খনন করতে হবে তবে বৈধতা রাখা।

— কোরি 21

Answer 5

এই সিএসএস আমার পক্ষে কাজ করেছে:

.form-group.required.control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -10px;
}

এবং এই এইচটিএমএল:

<div class="form-group required control-label">
  <label for="emailField">Email</label>
  <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>

Comments

ডিভের উপর কন্ট্রোল-লেবেল থাকা লেবেল এবং ইনপুট উভয়ই থাকা একটু অদ্ভুত।

— ডেভলিন কার্নেট