টুইটার বুটস্ট্র্যাপের সমস্ত বৃত্তাকার কোণ থেকে মুক্তি পাওয়া

Question

আমি টুইটার বুটস্ট্র্যাপ ২.০ পছন্দ করি - আমি এটি পছন্দ করি যে এটি কীভাবে সম্পূর্ণ লাইব্রেরি হয় ... তবে আমি খুব বক্সিক-নন-রাউন্ড সাইটের জন্য একটি বিশ্বব্যাপী পরিবর্তন করতে চাই, যা বুটস্ট্র্যাপের সমস্ত বৃত্তাকার কোণগুলি থেকে মুক্তি পেতে পারে ...

এটি অনেকটা সিএসএসের মাধ্যমে চাগতে হবে। কোনও বিশ্বব্যাপী স্যুইচ আছে, বা সমস্ত বৃত্তাকার সন্ধান এবং প্রতিস্থাপনের সেরা উপায় কী হবে?

Comments

আপনি কি সমস্ত বা কেবল কয়েকটি বৃত্তাকার কোণগুলি সরাতে চাইছেন?

— আন্দ্রেস ইলিচ

আপনি বর্তমানে যা আছে তা যদি আপনি সংশোধন করতে না পারেন তবে আমি একটি মোড ফাইল তৈরি করেছি যা সমস্ত বর্ডার- রেডিয়াই

— মার্ক কামিসেক

ইনা, আমার উত্তর কি আপনার জন্য কাজ করে? আপনি এটি সঠিক হিসাবে চিহ্নিত করবেন?

— ব্রুনোস

হ্যাঁ. ধন্যবাদ! .. কেন ডাউনটোট

— আইএনএ

Answer 1

আমি সমস্ত এলিমেন্টের সীমানা ব্যাসার্ধটিকে "0" তে এভাবে সেট করে রেখেছি:

* {
  border-radius: 0 !important;
}

যেহেতু আমি নিশ্চিত যে আমি এটিকে ওভাররাইট করতে চাই না পরে আমি কেবল ব্যবহার করছি! গুরুত্বপূর্ণ।

আপনি যদি নিজের কম ফাইলগুলি সংকলন না করেন তবে কেবল করুন:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

বুটস্ট্র্যাপ 3-এ আপনি যদি এটি সংকলন করে থাকেন তবে আপনি এখন ভেরিয়েবল.বিহীন ফাইলটিতে ব্যাসার্ধ সেট করতে পারেন:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

বুটস্ট্র্যাপ 4 এ আপনি এটি সংকলন করে দিলে আপনি _custom.scssফাইলটিতে সম্পূর্ণ ব্যাসার্ধ অক্ষম করতে পারবেন :

$enable-rounded:   false;

Comments

আপনি যদি মূল ফাইলগুলি স্পর্শ না করে বুটস্ট্র্যাপটি কাস্টমাইজ করার চেষ্টা করছেন তবে এটি একটি দুর্দান্ত সমাধান। দুর্দান্ত উত্তর!

— শহীদ

হ্যাঁ হ্যাঁ, কুইক এন নোংরা!

— প্রোগ্রামার 0

আমি এটি ব্যবহার করেছি * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }এবং এটি বুটস্ট্র্যাপ 3.2 এর জন্য নিখুঁতভাবে কাজ করছে। থ্যাঙ্কস ফিক্স ম্যান!

— টডর টডোরভ

এই সমাধানটি বুটস্ট্র্যাপ স্টাইলযুক্ত <নির্বাচন> ইনপুটগুলির জন্য কাজ করে না। সম্ভবত ব্যবহারের কারণে -webkit-appearance: menulist।

— জনসোরেন্টিনো

এটি সম্ভবত একটি ভাল সমাধান, তবে সেরা নয়। এটি অকারণে প্রতিটি উপাদানগুলির জন্য প্রচুর পরিমাণে রিলান্ডান্ট সিএসএস উত্পন্ন করবে। আমি মনে করি এটি @ymakux দ্বারা সরবরাহ করা সেরা সমাধানগুলির মধ্যে একটি। আপনি এটি চেষ্টা করতে পারেন

— এমবি পারভেজ রনি

Answer 2

উত্স .lessফাইলগুলি ডাউনলোড করুন এবং .border-radius()মিশ্রণটি ফাঁকা করুন।

Comments

বুটস্ট্র্যাপ সিএসএস প্রসেসিংয়ের উপর দক্ষতার সাথে দক্ষতার পক্ষে এটিই সম্ভবত সেরা সমাধান।

— ক্লিভিস

Answer 3

আপনি যদি বুটস্ট্র্যাপ সংস্করণ <3 ... ব্যবহার করেন

সাস / এসএসএস সহ

$baseBorderRadius: 0;

কম সঙ্গে

@baseBorderRadius: 0;

বুটস্ট্র্যাপ আমদানির আগে আপনাকে এই পরিবর্তনশীলটি সেট করতে হবে । এটি সমস্ত কূপ এবং নৌবারকে প্রভাবিত করবে।

হালনাগাদ

আপনি যদি বুটস্ট্র্যাপ 3 বেসবোর্ডারিয়াস ব্যবহার করছেন তবে এটি সীমানা-ব্যাসার্ধ-বেস হওয়া উচিত

Answer 4

আপনি যদি সমস্ত জিনিস পুনরায় সংশোধন এড়াতে চান, কেবল .btn {border-radius: 0;}আপনার সিএসএসে যুক্ত করুন।

Comments

এটি কেবলমাত্র বোতামগুলিতে এবং যেখানেই আপনি যুক্ত করেছেন সেখানে প্রভাব ফেলবে.btn

— zVictor

Answer 5

code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

Answer 6

এই প্রশ্নটি বেশ পুরানো তবে এটি বুটস্ট্র্যাপ 4-এ এমনকি অনুসন্ধান ইঞ্জিনগুলিতে অত্যন্ত দৃশ্যমান সম্পর্কিত অনুসন্ধানে । আমি মনে করি বৃত্তাকার কোণগুলি, BS4 উপায় অক্ষম করার জন্য একটি উত্তর যুক্ত করা মূল্যবান।

ইন _variables.scssবিভিন্ন বিশ্বব্যাপী সংশোধনকারীদের দ্রুত যেমন সক্ষম বা আনমন হত্তয়া সিস্টেম, বৃত্তাকার কোণ, গ্রেডিয়েন্ট ইত্যাদি নিষ্ক্রিয় যেমন কাপড় পরিবর্তন করতে বিদ্যমান আছে:

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

গোলাকার কোণগুলি enabledডিফল্টরূপে হয়।

আপনি যদি সাস ব্যবহার করে এবং আপনার _custom.scssমত আমার নিজের (বা অফিসিয়াল কাস্টমাইজার ব্যবহার করে) ব্যবহার করে বুটস্ট্র্যাপ 4 সংকলন করা পছন্দ করেন তবে সম্পর্কিত ভেরিয়েবলকে ওভাররাইড করা যথেষ্ট:

$enable-rounded : false

Comments

আপনি রক করেন;) বুটস্ট্র্যাপ 4 ভাইরাল হয়ে গেলে এটি গ্রহণযোগ্য উত্তর হওয়া উচিত ... দুঃখিত, প্রকাশ্য। এটি ইতিমধ্যে আলফাতে এটি ব্যবহার করছে তাদের জন্য এটি এখানে লুকিয়ে রয়েছে।

— kub1x

Answer 7

.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

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

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

Comments

pxঅপ্রয়োজনীয়, না?

— ta.speot.is

আমি সাধারণত 'px' রাখি যাতে আমাকে যদি মান পরিবর্তন করতে হয় তবে আমাকে আবার 'px' টাইপ করতে হবে না।

— nkkollaw

তবে ডেটার অতিরিক্ত বাইটস

— অ্যান্টনি শ ২

Answer 8

বুটস্ট্র্যাপ> = 3.0উত্স ফাইলগুলি ( SASSবা LESS) ব্যবহার করার সময় আপনাকে সমস্ত কিছুকে বৃত্তাকার কোণগুলি থেকে মুক্তি দিতে হবে না যদি কেবলমাত্র একটি উপাদান থাকে যা আপনাকে বগ করছে, উদাহরণস্বরূপ, কেবল নভবারের বৃত্তাকার কোণগুলি থেকে মুক্তি পেতে, ব্যবহার করুন:

এসসিএসএস সহ:

$navbar-border-radius: 0;

কম সহ:

@navbar-border-radius: 0;

যাইহোক, আপনি যদি সমস্ত কিছুর উপর বৃত্তাকার কোণগুলি থেকে মুক্তি পেতে চান তবে আপনি @ অ্যাডামওয়ং 246 উল্লিখিত এবং ব্যবহার করতে পারেন:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

এই দুটি সেটিংস হ'ল "রুট" সেটিংস যা navbar-border-radiusথেকে অন্যান্য মানগুলি নির্দিষ্ট না করা হয় তার মতো অন্যান্য সেটিংস এর উত্তরাধিকারী হবে।

একটি তালিকার জন্য সমস্ত ভেরিয়েবল ভেরিয়েবল.বিহীন বা ভেরিয়েবল.এসএসএস পরীক্ষা করে দেখুন

Answer 9

@ ব্রুনোএস দ্বারা উপরে পোস্ট করা কোডটি আমার পক্ষে কাজ করে না,

* {
  .border-radius(0) !important;
}

আমি যা ব্যবহার করেছি তা ছিল

* {
  border-radius: 0 !important;
}

আমি আশা করি এটা কারো সাহায্যে লাগবে

Comments

@ ব্রুনোস ব্যবহার করছিলেনLESS

— আফোলোক

Answer 10

বুটস্ট্র্যাপ কাস্টমাইজ করার একটি খুব সহজ উপায় আছে:

1. শুধু http://getbootstrap.com/customize/ এ যান
2. সমস্ত "ব্যাসার্ধ" সন্ধান করুন এবং আপনার ইচ্ছামত এগুলি সংশোধন করুন।
3. "সংকলন এবং ডাউনলোড করুন" ক্লিক করুন এবং বুটস্ট্র্যাপের নিজস্ব সংস্করণ উপভোগ করুন।

Answer 11

অথবা আপনি যে এলিমেন্টটি সীমানা ব্যাসার্ধটি অপসারণ করতে চান তার এইচটিএমএলতে এটি যুক্ত করতে পারেন (এইভাবে আপনি এটি সমস্ত বোতাম / উপাদান থেকে সরাবেন না):

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

Answer 12

SASS বুটস্ট্র্যাপের সাহায্যে - আপনি নিজে বুটস্ট্র্যাপ সংকলন করছেন - আপনি সমস্ত সীমানা ব্যাসার্ধ (বা আরও নির্দিষ্ট) কেবল শূন্যে সেট করতে পারেন:

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

Comments

যথাযথভাবে। উদাহরণস্বরূপ এই ঘোষণাগুলি রাখুন @import "../node_modules/bootstrap/scss/bootstrap";এবং বুটস্ট্র্যাপ এগুলি ওভাররাইড করবে না, যেহেতু সেগুলি !defaultবুটস্ট্র্যাপ উত্সে মূলশব্দ দিয়ে ঘোষণা করা হয়েছে ।

— জেপ্পি

Answer 13

বুটস্ট্র্যাপের সীমানার জন্য এটির নিজস্ব ক্লাস রয়েছে যার .rounded-0সাথে কোনও উপাদানকে বৃত্তাকার কোণগুলি পরিত্রাণ পাওয়া যায়buttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>

Answer 14

আপনি ফ্ল্যাটট্র্যাপটি দেখতে চান । এটি বৃত্তাকার কোণ, গ্রেডিয়েন্ট এবং ড্রপ ছায়া ছাড়াই বুটস্ট্র্যাপ সিএসএসের জন্য একটি মেট্রো-স্টাইল প্রতিস্থাপন সরবরাহ করে।

Comments

ফ্ল্যাটট্র্যাপের সমস্যাটি হ'ল তাদের কাছে এখনও ভি 3 এর জন্য এসসিএসএস সমর্থন নেই :(

— এইচপি

Answer 15

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে কোনও বৃত্তাকার কোণ ছাড়াই ধারালো প্রান্ত দিয়ে সীমানা তৈরি করতে আপনি কেবল বুটস্ট্র্যাপ শ্রেণি = "বৃত্তাকার -0" ব্যবহার করতে পারেন <button class="btn btn-info rounded-0"">Generate</button></span>

Comments

বুটস্ট্র্যাপের কোন সংস্করণ

— আইএনএ

Answer 16

আমি অন্য একটি সিএসএস ফাইল তৈরি করেছি এবং নিম্নলিখিত কোডটি যুক্ত করেছি সমস্ত উপাদান অন্তর্ভুক্ত নয়

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}