বুটস্ট্র্যাপে কীভাবে টগল বোতাম তৈরি করবেন

Question 1

আমি মূলত এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে একটি ওয়েব অ্যাপ তৈরি করেছি, তারপরে এটি আবার বুটস্ট্র্যাপেও তৈরি করতে বলা হয়েছিল। আমি এটি সব ঠিকঠাক করে ফেলেছি, তবে ওয়েব অ্যাপে আমার টোগল বোতামগুলি ছিল যা আমি মূলত টগল বোতামগুলির পরিবর্তে রেডিওতে (মূলত চেকবক্স) বোতামে ফিরে এসেছি।

বোতামগুলির জন্য কোডটি হ'ল:

<label>
  Notifications
  <span class='toggle'>
    <input type='radio'
      class='notifications'
      name='notifications'
      id='notifications' />
  </span>
</li>
<label>
  Preview
  <span class='toggle'>
    <input type='radio'
      class='preview'
      name='preview'
      id='preview' />
  </span>
</li>

এবং জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলির সাথে এইচটিএমএল পৃষ্ঠা লিঙ্ক করা রয়েছে:

<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

কোডটি পরিবর্তন করার কোনও উপায় আছে যাতে আমি টগল বোতামটি ফিরে পেতে পারি?

Question 2

2013 থেকে প্রাথমিক উত্তর

একটি দুর্দান্ত (অফিশিয়াল) বুটস্ট্র্যাপ সুইচ উপলব্ধ ।

<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();

এটি সুইচ হিসাবে বেতার ধরণের বা চেকবক্স ব্যবহার করে । typeভি .১.৮ থেকে একটি বৈশিষ্ট্য যুক্ত করা হয়েছে।

সোথ কোডটি গিথুবে পাওয়া যায় ।

2018 থেকে নোট

আমি এখন those ধরণের পুরানো সুইচ বোতামগুলি এখনই ব্যবহার করার পরামর্শ দেব না, কারণ তারা মনে করে যে তারা সর্বদা ব্যবহারের কারণে সমস্যায় ভুগছে বলে মনে হচ্ছে অনেক লোক।

প্রতিক্রিয়া উপাদান ফ্রেমওয়ার্ক (বুটস্ট্র্যাপ সম্পর্কিত নয়, তবে বুটস্ট্র্যাপ গ্রিড এবং ইউআইতে যদিও সংহত করা যেতে পারে) থেকে এটির মতো আধুনিক স্যুইচগুলি দেখে নিন ।

অন্যান্য বাস্তবায়ন কৌনিক, দেখুন বা jQuery এর জন্য বিদ্যমান।

import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'

class Switcher extends React.Component {
  state = {
    disabled: false,
  }

  toggle = () => {
    this.setState({
      disabled: !this.state.disabled,
    })
  }

  render() {
    return (
      <div style={{ margin: 20 }}>
        <Switch
          disabled={this.state.disabled}
          checkedChildren={'开'}
          unCheckedChildren={'关'}
        />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Switcher />, document.getElementById('__react-content'))

নেটিভ বুটস্ট্র্যাপ সুইচ

দেখুন ohkts11 এর উত্তর নিচে সম্পর্কে নেটিভ বুটস্ট্র্যাপ পরিবর্তন ।

Question 3

আপনি যদি আপনার এইচটিএমএল পরিবর্তন করতে আপত্তি না করেন তবে আপনি এসটিতে data-toggleবৈশিষ্ট্যটি ব্যবহার করতে পারেন <button>। বোতামের উদাহরণগুলির একক টগল বিভাগটি দেখুন :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>

Question 4

চেকবক্স বা রেডিও বোতামের উপর ভিত্তি করে টগল বোতাম তৈরি করার জন্য বুটস্ট্র্যাপ 3-এ বিকল্প রয়েছে: http://getbootstrap.com/ javascript/# buttons

চেকবাক্স

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

রেডিওর বোতামগুলি

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

এগুলি কাজ করার জন্য আপনাকে .btnবুটস্ট্র্যাপের জাভাস্ক্রিপ্ট দিয়ে সূচনা করতে হবে :

$('.btn').button();

Question 5

আমি জাভাস্ক্রিপ্ট দিয়ে ম্যানুয়ালি 'সক্রিয়' শ্রেণিকে সক্রিয় করার চেষ্টা করছি been এটি একটি সম্পূর্ণ গ্রন্থাগারের মতো ব্যবহারযোগ্য নয়, তবে সহজ ক্ষেত্রে এটি যথেষ্ট বলে মনে হয়:

var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});

আপনি যদি সাবধানতার সাথে চিন্তা করেন, 'সক্রিয়' ক্লাসটি বোতামটি চাপার সময় বুটস্ট্র্যাপ দ্বারা ব্যবহৃত হয়, তার আগে বা পরে (আমাদের ক্ষেত্রে) নয়, সুতরাং একই শ্রেণীর পুনরায় ব্যবহারে কোনও বিরোধ নেই।

এই উদাহরণটি ব্যবহার করে দেখুন এবং এটি ব্যর্থ হলে আমাকে বলুন: http://jsbin.com/oYoSALI/1/edit?html,js , আউটপুট

Question 6

আপনি যদি একটি ছোট কোড বেস রাখতে চান এবং আপনার কেবলমাত্র অ্যাপ্লিকেশনটির একটি ছোট অংশের জন্য টগল বোতামের প্রয়োজন হবে। আমি পরিবর্তে আপনার নিজের জাভাস্ক্রিপ্ট কোড বজায় রাখার পরামর্শ দিচ্ছি (অ্যাংুলারজ, জাভাস্ক্রিপ্ট, জ্যাকোয়ারি) এবং কেবল সরল সিএসএস ব্যবহার করুন।

ভাল টগল বোতাম জেনারেটর: https://proto.io/freebies/onoff/

Question 7

বুটস্ট্র্যাপ টগল বোতামের জন্য এটি এখানে খুব দরকারী । কোড স্নিপেটে উদাহরণ !! এবং নীচে jsfiddle।

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
    <button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

স্নিপেট প্রসারিত করুন

আমি আপনাকে উপরের কয়েকটি উদাহরণ দেখিয়েছি। আমি আসা করি এটা সাহায্য করবে. জেএস ফিডল এখানে রয়েছে সোর্স কোডটি গিটহাবের উপর উপলভ্য।

বুটস্ট্র্যাপ 4 এর জন্য 2020 আপডেট করুন

আমি 2020 -এ বুটস্ট্র্যাপ 4-টগল করার প্রস্তাব দিয়েছি ।

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>

<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

স্নিপেট প্রসারিত করুন

Question 8

আপনি সিএসএস টগল স্যুইচ লাইব্রেরি ব্যবহার করতে পারেন। কেবল সিএসএস অন্তর্ভুক্ত করুন এবং জেএসকে নিজে প্রোগ্রাম করুন: http://ghinda.net/css-toggle-switch/bootstrap.html

Question 9

আপনি বুটস্ট্র্যাপ 3.3.0 এর জন্য মেটালিয়াল ডিজাইন স্যুইচ ব্যবহার করতে পারেন

http://bootsnipp.com/snippets/featured/matory-design-switch

Question 10

বুটস্ট্র্যাপ 4 সমাধান

বুটস্ট্র্যাপ 4 টি জাহাজ অন্তর্নির্মিত টগল। এখানে ডকুমেন্টেশন দেওয়া আছে। https://getbootstrap.com/docs/4.3/components/forms/#switches

Question 11

যদি কেউ এখনও একটি সুন্দর স্যুইচ / টগল বোতামটি সন্ধান করছে, আমি রিকের পরামর্শ অনুসরণ করে এবং এর চারপাশে একটি কৌনিক নির্দেশিকা, কৌণিক-সুইচ তৈরি করেছি । উইন্ডোজ স্টাইলযুক্ত স্যুইচটিকে প্রাধান্য দেওয়ার পাশাপাশি, উপরে ডাউনলোড করা কৌণিক-বুটস্ট্র্যাপ-সুইচ এবং বুটস্ট্র্যাপ-স্যুইচের একসাথে উল্লিখিত তুলনায় মোট ডাউনলোডটি আরও অনেক ছোট (2 কেবি বনাম 23 কেবি মিনিফাইড সিএসএস + জেএস)।

আপনি নিম্নলিখিত হিসাবে এটি ব্যবহার করবে। প্রথমে প্রয়োজনীয় জেএস এবং সিএসএস ফাইল অন্তর্ভুক্ত করুন:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

এবং এটি আপনার কৌণিক অ্যাপে সক্ষম করুন:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

এখন আপনি নিম্নলিখিত হিসাবে এটি ব্যবহার করতে প্রস্তুত:

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>