বুটস্ট্র্যাপের সাহায্যে একটি লিঙ্ক কীভাবে রাখবেন?


92

বুটস্ট্র্যাপের সাহায্যে একটি বোতামে কীভাবে একটি লিঙ্ক স্থাপন করবে?

বুটস্ট্র্যাপ ডকুমেন্টেশনে 4 টি পদ্ধতি রয়েছে:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

প্রথমটি আমার পক্ষে কাজ করে না, কোনও বোতাম প্রদর্শন করে না, লিঙ্কটির সাথে কেবল পাঠ্য রয়েছে, এটির থিমটি ব্যবহার করার মতো অনুভূতি রয়েছে।

দ্বিতীয়টি বোতামটি দেখায় যা আমি চাই তা কি হয় তবে ক্লিক করার সাথে কোডটি অন্য পৃষ্ঠায় লিঙ্কটি কী করে?

চিয়ার্স


4
jsfiddle.net/Lstcymqo সমস্যাটি আপনি যে থিমটি ব্যবহার করছেন তা হতে পারে
linktoahref

উত্তর:


68

আপনি ক্লিক করুন বাটন ক্লিক ইভেন্টে একটি ফাংশন কল করতে পারেন।

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

অথবা এই কোডটি ব্যবহার করুন

<a href="#link" class="btn btn-info" role="button">Link Button</a>

22
বেশ খারাপ গ্রহণযোগ্য উত্তর: আপনার লিঙ্কগুলি কীভাবে ওয়েব ক্রলারের দ্বারা পার্স হয়? কোনও শিরোনাম, লক্ষ্য নেই, এটি কোনও লিঙ্ক নয়, এটি একটি পুনঃনির্দেশ ...
হাগসবার্গস

8
এটি সম্পূর্ণ অপ্রয়োজনীয় এবং এসইও এর পক্ষে সত্যই খারাপ। নীচে আমার সমাধানটি দেখুন ( stackoverflow.com/a/44130105/1202214 )।
Andreas Bergström

4
আমার ভাল উত্তর।
মো 1

135

আপনার যদি সত্যিই বোতামের উপাদানটির প্রয়োজন না হয় তবে কেবল ক্লাসগুলিকে একটি নিয়মিত লিঙ্কে নিয়ে যান:

<div class="btn-group">
    <a href="/save/1" class="btn btn-primary active">
        <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
    </a>
    <a href="/cancel/1" class="btn btn-default">Cancel</a>
</div>

বিপরীতে, আপনি একটি লিঙ্কের মতো উপস্থিত হতে একটি বোতামও পরিবর্তন করতে পারেন:

<button type="button" class="btn btn-link">Link</button>

11
গৃহীত প্রশ্নের চেয়ে আরও ভাল উত্তর - জাভাস্ক্রিপ্টের দরকার নেই .. ধন্যবাদ
বালাজী কৃষ্ণন

4
শব্দার্থগতভাবে এবং অ্যাক্সেসযোগ্যতার জন্য সচেতন হন কখন আপনার একটি বোতাম ব্যবহার করা উচিত এবং কখন আপনার কোনও লিঙ্ক ব্যবহার করা উচিত। সাধারণত, পৃষ্ঠায় ক্রিয়াগুলির জন্য বোতাম এবং পৃষ্ঠাতে লিখিত সামগ্রীগুলির জন্য লিঙ্ক বা পৃষ্ঠা থেকে দূরে নেভিগেট করতে।
জেমস ওয়েস্টগেট

দ্বিতীয় বিকল্পটি আরও ভাল;)
প্যাথ্রোস

132

সবচেয়ে সহজ সমাধানটি আপনার উদাহরণগুলির মধ্যে প্রথমটি:

<a href="#link" class="btn btn-info" role="button">Link Button</a>

এটি আপনার পক্ষে কাজ না করার কারণটি সম্ভবত আপনি যেমন বলেছিলেন যে থিমটি আপনি ব্যবহার করছেন তাতে সমস্যা। এটির জন্য ফুল ফোটানো অতিরিক্ত মার্কআপ বা ইনলাইন জাভাস্ক্রিপ্ট অবলম্বন করার কোনও কারণ নেই।


6
এটি সবার কাছে সহজ।
নানা পার্টিকার 21

4
ওয়ান-লাইনার সেরা;)
ইভান

12

লিঙ্কটির রঙটি <button>মার্কআপের ভিতরে সঠিকভাবে কাজ করার জন্য আর একটি কৌশল

<button type="button" class="btn btn-outline-success and-all-other-classes"> 
  <a href="#" style="color:inherit"> Button text with correct colors </a>
</button>

দয়া করে মনে রাখবেন যে বিএস 4 বিটাতে যেমন btn-primary-outlineপরিবর্তিত হয়েছেbtn-outline-primary


btn-outline-primaryএবং btn-outline-primaryএকই জিনিস। টাইপো আছে?
ইসমাইলালিক


9

এভাবেই সমাধান করেছি solved

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>  

3

উপরের উত্তরগুলির সংমিশ্রণে আমি একটি সহজ সমাধান পেয়েছি যা সম্ভবত আপনাকেও সহায়তা করবে:

<button type="submit" onclick="location.href = 'your_link';">Login</button>

স্রেফ ইনলাইন জেএস কোড যুক্ত করে আপনি একটি লিঙ্কে একটি বোতাম রূপান্তর করতে এবং তার নকশাটি রাখতে পারেন।


2

আপনি কেবল নিম্নলিখিত কোড যুক্ত করতে পারেন;

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.