বুটস্ট্র্যাপে <বাটন> কীভাবে ন্যাভ-ট্যাবগুলিতে একটি সাধারণ লিঙ্কের মতো দেখায়?

Question

আমি (পূর্ববর্তী টুইটার) বুটস্ট্র্যাপ 2 এ কাজ করছি এবং আমি বোতামগুলি স্টাইল করতে চেয়েছিলাম যেন তারা সাধারণ লিঙ্ক। যদিও কোনও সাধারণ লিঙ্কগুলি নয়; এই একটি <ul class="nav nav-tabs nav-stacked">পাত্রে যাচ্ছে । মার্কআপটি এভাবে শেষ হবে:

<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li><button type="submit" name="op" value="Link 1">Link 1</button></li>
        <li><button type="submit" name="op" value="Link 2">Link 2</button></li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

বুটস্ট্র্যাপের এগুলি <button>দেখতে আসলে <a>কী সেগুলি দেখতে এমন কোনও উপায় আছে ?

Comments

আপনি <button>উপাদানগুলিতে রাখতে পারেন এমন সমস্ত ক্লাস এখানে দেওয়া হয়েছে : getbootstrap.com/2.3.2/base-css.html#buttons

— রকেট

<a> পরিবর্তে <a> বাটন ব্যবহার করছেন না কেন?

— ভিভিএল

কারণ আমার ফর্মের রাজ্যটি রক্ষা করা দরকার যা বাকী ফর্মের মধ্যে রয়েছে। মূলত এর অর্থ একটি ফর্ম সেশন আইডি, এবং এটিকে আসলে একটি লিঙ্ক তৈরি করার অর্থ পুরো ফর্মটি জিইটি-তে স্যুইচ করা এবং সেই ডেটাটিতে থাকা href। সুতরাং মূলত আমাকে হয় নাটকীয়ভাবে আমার ফর্মটি কীভাবে পরিচালনা করে বা উপস্থাপনাটি পরিবর্তন করতে হবে। উপস্থাপনাটি পরিবর্তন করা কতটা সহজ তা এই প্রশ্নটি আমার প্রয়াস।

— meustrus

@ ভিটারভেনচারিন আমার ব্যবহারের কেস: ডিফল্ট ট্যাবটিতে মার্কডাউন ইনপুট করার জন্য একটি টেক্সারিয়া রয়েছে। ট্যাব 2 এর এইচটিএমএল পূর্বরূপ রয়েছে। তাই আমি চাই না যে ট্যাব 2-এর একটি URL থাকুক যা এটি ডিফল্টরূপে খোলে। যদি আমি লিঙ্কগুলি ব্যবহার করি, তবে ব্যবহারকারীরা মাঝখানে ক্লিক করতে পারেন এবং হোভারে অর্থহীন ঠিকানার অবস্থান দেখতে পারেন। বাটন যে বাধা দেয়।

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件 法轮功

Answer 1

অফিসিয়াল ডকুমেন্টেশনে উল্লিখিত হিসাবে , কেবল ক্লাস (এস) প্রয়োগ করুনbtn btn-link:

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

উদাহরণস্বরূপ, আপনি যে কোড সরবরাহ করেছেন তা সহ:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />


<form action="..." method="post">
  <div class="row-fluid">
    <!-- Navigation for the form -->
    <div class="span3">
      <ul class="nav nav-tabs nav-stacked">
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 1">Link 1</button>
        </li>
        <li>
          <button class="btn btn-link" role="link" type="submit" name="op" value="Link 2">Link 2</button>
        </li>
        <!-- ... -->
      </ul>
    </div>
    <!-- The actual form -->
    <div class="span9">
      <!-- ... -->
    </div>
  </div>
</form>

Comments

এটি এটিকে আর বোতামের মতো দেখতে দেয় না। তবে এটি উল.নাভ-স্ট্যাকড মার্কআপের মধ্যে যেমনটি চাই তেমন প্রদর্শিত হচ্ছে না। এই মার্কআপের জন্য সিএসএস কেবল <a>ট্যাগগুলির সাথেই কাজ করছে বলে মনে হচ্ছে ...

— মেসস্ট্রাস

লিঙ্কগুলির চেয়ে আলাদাভাবে দেখায়।

— সিরো সান্তিলি 法轮功 冠状 病 六四 事件 法轮功

বুটস্ট্র্যাপ 3, বাটন ভালো স্টাইল বর্ণন সংযোগগুলি মত কিন্তু তারা যা লেআউট টা বাজিয়েছে তাদের চারপাশে খুব বেশী প্যাডিং আছে। তবে আপনি সংক্ষিপ্ত পরিমাণ সিএসএস যোগ করে এটি ঠিক করতে পারেন (নীচে @ এমসিএনএক্স উত্তর দেখুন)

— মার্টিন সিআর

Answer 2

কেবল নিয়মিত লিঙ্কটি বোতামের মতো দেখায় :)

<a href="#" role="button" class="btn btn-success btn-large">Click here!</a>

কোনও href কোডের অভ্যন্তরে "ভূমিকা" এটিকে বোতামের মতো দেখায়, আপনি শ্রেণীর মতো আরও ভেরিয়েবল যুক্ত করতে পারেন।

Comments

এটি দরকারী তবে জিজ্ঞাসিত প্রশ্নের উত্তর দেয় না।

— meustrus

I wanted to style buttons as though they were normal linksএটি বিপরীত: এস

— এসডব্লিউ

roleবৈশিষ্ট্যটি aউপাদানটির জন্য কোনও বৈধ বৈশিষ্ট্য নয় । ( w3.org/TR/html5/text-level-semantics.html#the-a-element )

— nZeus

এটি যা জিজ্ঞাসা করা হচ্ছে তার বিপরীত

— কুণাল

এই উত্তরের সমস্যাটি হ'ল এই ক্ষেত্রে বোতামের পাঠ্যটি আসলে একটি লিঙ্কের মতো স্টাইল করা হয়েছে যা ভাল নয় (যেমন আপনি যদি আপনার _variables.scss এ "$ লিংক-সজ্জা: আন্ডারলাইন! ডিফল্ট;" ব্যবহার করেন)। এটি সম্ভবত বিকাশকারীদের দ্বারা লক্ষ করা উচিত - সম্ভবত এটি তারা অর্জন করতে চেয়েছিল না। লিঙ্কটি সম্পূর্ণরূপে একটি বোতাম হিসাবে স্টাইল করা উচিত।

— দিমিত্রি সোমভ

Answer 3

আপনার বোতাম ট্যাগে ক্লাস হিসাবে মুছে ফেলা_ বাটন_সিএসএস যুক্ত করুন। আপনি লিংক 1 এর জন্য কোড যাচাই করতে পারেন

.remove_button_css { 
  outline: none;
  padding: 5px; 
  border: 0px; 
  box-sizing: none; 
  background-color: transparent; 
}

অতিরিক্ত স্টাইল সম্পাদনা করুন

যোগ color: #337ab7;এবং :hoverএবং :focusOOTB (bootstrap3) মেলে

.remove_button_css:focus,
.remove_button_css:hover {
    color: #23527c;
    text-decoration: underline;
}

Comments

পুরোপুরি কাজ করে। জুড়ে দেওয়া হয়েছে :hoverএবং :focusবুটস্ট্রাইপিএইপি সঙ্গে আরও ঘনিষ্ঠ ম্যাচের জন্য।

— স্বাধীনতা-এম

Answer 4

বুটস্ট্র্যাপ 3 এ, এটি আমার পক্ষে ভাল কাজ করে:

.btn-link.btn-anchor {
    outline: none !important;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

ব্যবহৃত:

<button type="button" class="btn-link btn-anchor">My Button</button>

ডেমো

Comments

ধন্যবাদ, এটাই আমার দরকার ছিল। বুটস্ট্র্যাপ 3। বিটিএন-লিঙ্কটি এটি কাটবে না এবং আপনাকে কেবল নিজের হাতে একটি ক্লাস যুক্ত করতে হবে।

— রাফাł সিইলাক

হ্যাঁ এটি পুরোপুরি কাজ করে। তাত্ক্ষণিকভাবে আমার বিএস 3 ফর্ম বিন্যাসের সারিগুলির মধ্যে সঠিক উল্লম্ব ব্যবধান রয়েছে। চমৎকার।

— মার্টিন সিআর

Answer 5

কেবল পটভূমির রঙ, সীমানা থেকে মুক্তি এবং হোভার ইফেক্ট যুক্ত করুন। এখানে একটি বেহালতা: http://jsfiddle.net/yPU29/

<form action="..." method="post">
<div class="row-fluid">
<!-- Navigation for the form -->
<div class="span3">
  <ul class="nav nav-tabs nav-stacked">
    <li><button type="submit" name="op" value="Link 1" class="button-link">Link 1</button></li>
    <li><button type="submit" name="op" value="Link 2" class="button-link">Link 2</button></li>
    <!-- ... -->
  </ul>
</div>
<!-- The actual form -->
<div class="span9">
  <!-- ... -->
</div>
</div>
</form>

সিএসএস:

.button-link {
background-color: transparent;
border: none;
}

.button-link:hover {
color: blue;
text-decoration: underline;
}

Comments

এটিকে ড্রপডাউন লিঙ্কের মতো দেখতে দেখতে আমি আরও কয়েকটি সিএসএস উপাদান যুক্ত করেছি। মোট: .বাটন-লিংক {প্রদর্শন: ব্লক; প্রস্থ: 100%; প্যাডিং: 3px 20px; স্পষ্ট উভয়; রঙ: # 333; সাদা-স্থান: এখনই; পটভূমি রঙ: স্বচ্ছ; সীমানা: কিছুই নয়; পাঠ্য-সারিবদ্ধ: বাম; b বাটন-লিংক: হোভার {পটভূমি-রঙ: # f5f5f5; }

— অ্যান্ডি বেভারলি

Answer 6

আমি এখানে পোস্ট করা সমস্ত উদাহরণ চেষ্টা করেছি, তবে তারা অতিরিক্ত সিএসএস ছাড়া কাজ করে না। এটা চেষ্টা কর:

<a href="http://www.google.com"><button type="button" class="btn btn-success">Google</button></a>

কোনও অতিরিক্ত সিএসএস ছাড়াই নিখুঁতভাবে কাজ করে।

Comments

এটি বৈধ এইচটিএমএল নয়। stackoverflow.com/a/6393863/496046

— tremby