ट्विटर बूटस्ट्रैप में सभी गोल कोनों से छुटकारा पाना

Question

मैं ट्विटर बूटस्ट्रैप 2.0 से प्यार करता हूं - मुझे प्यार है कि यह पूरी तरह से पुस्तकालय कैसे है ... लेकिन मैं एक बहुत ही बॉक्स-न-राउंड साइट के लिए एक वैश्विक संशोधन करना चाहता हूं, जिसे बूटस्ट्रैप में सभी गोल कोनों से छुटकारा पाना है ...

यह बहुत सीएसएस के माध्यम से चुग है। क्या कोई वैश्विक स्विच है, या सभी राउंडेड को खोजने और बदलने का सबसे अच्छा तरीका क्या होगा?

Comments

क्या आप सभी या सिर्फ कुछ गोल कोनों को हटाना चाहते हैं?

— एंड्रेस इलिच

यदि आप वर्तमान में आपके पास मौजूद स्थान को संशोधित नहीं कर सकते हैं, तो मैंने एक मॉड फ़ाइल बनाई है जिसमें सभी बॉर्डर- राडाई

— मार्क Kamyszek

आईएनए, क्या मेरे जवाब ने आपके लिए काम किया? क्या आप इसे सही मानेंगे?

— ब्रूनो

हाँ। धन्यवाद! .. क्यों नीचे हालांकि

— ina

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

यह एक बहुत अच्छा समाधान है अगर आप कोर फ़ाइलों को छूने के बिना बूटस्ट्रैप को अनुकूलित करने की कोशिश कर रहे हैं। बहुत बढ़िया जवाब!

— मार्टी

बिल्ली हाँ, जल्दी n गंदा!

— प्रोग्रामर

मैंने इसका इस्तेमाल किया था * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }और यह बूटस्ट्रैप 3.2 के लिए पूरी तरह से काम कर रहा है। ठीक आदमी के लिए Thanx!

— टोडोर टोडोरोव

यह समाधान बूटस्ट्रैप स्टाइल के लिए काम नहीं करता है <select> इनपुट। शायद के उपयोग के कारण -webkit-appearance: menulist।

— जॉनसनोरेंटिनो

यह शायद एक अच्छा समाधान है, लेकिन सबसे अच्छा नहीं है। यह अनावश्यक रूप से प्रत्येक तत्व के लिए बड़ी संख्या में अनावश्यक सीएसएस उत्पन्न करेगा। मुझे लगता है कि यह @ymakux द्वारा प्रदान किया गया सबसे अच्छा समाधान है। आप यह कोशिश कर सकते हैं

— एमबी परवेज रॉन

Answer 2

स्रोत .lessफ़ाइलों को डाउनलोड करें और .border-radius()मिक्सिन को खाली करें।

Comments

यह शायद सबसे अच्छा समाधान है जहां तक ​​दक्षता बूटस्ट्रैप सीएसएस प्रसंस्करण में महारत हासिल है।

— क्लेविस

Answer 3

यदि आप बूटस्ट्रैप संस्करण का उपयोग कर रहे हैं <3 ...

Sass / scss के साथ

$baseBorderRadius: 0;

कम के साथ

@baseBorderRadius: 0;

बूटस्ट्रैप आयात करने से पहले आपको इस चर को सेट करना होगा । यह सभी कुओं और नावों को प्रभावित करेगा।

अपडेट करें

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो 3 बेसबॉर्डरेडियस सीमा-त्रिज्या-आधार होना चाहिए

Answer 4

यदि आप सभी चीज़ों को पुनः प्राप्त करने से बचना चाहते हैं, तो बस .btn {border-radius: 0;}अपने CSS में जोड़ें ।

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 संबंधित खोजों में भी खोज इंजन पर बहुत अधिक दिखाई देता है । मुझे लगता है कि यह गोल कोनों, बीएस 4 के तरीके को अक्षम करने के लिए एक जवाब जोड़ने के लायक है।

इसमें _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डिफ़ॉल्ट रूप से हैं।

यदि आप Sass का उपयोग करके बूटस्ट्रैप 4 को संकलित करना पसंद करते हैं और आपके _custom.scssजैसे मेरे (या आधिकारिक कस्टमाइज़र का उपयोग करके), संबंधित चर को ओवरराइड करना पर्याप्त है:

$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

मैं आमतौर पर 'पीएक्स' रखता हूं ताकि अगर मुझे मूल्य बदलना पड़े तो मुझे फिर से 'पीएक्स' टाइप न करना पड़े।

— nkkollaw

लेकिन डेटा के अतिरिक्त बाइट्स

— एंथनी शॉ

Answer 8

बूटस्ट्रैप> = 3.0स्रोत फ़ाइलों ( SASSया LESS) का उपयोग करते समय आपको हर चीज पर गोल कोनों से छुटकारा पाने की ज़रूरत नहीं है अगर सिर्फ एक तत्व है जो आपको खराब कर रहा है, उदाहरण के लिए, बस नेवबार पर गोल कोनों से छुटकारा पाने के लिए, उपयोग:

SCSS के साथ:

$navbar-border-radius: 0;

कम के साथ:

@navbar-border-radius: 0;

हालाँकि, यदि आप हर चीज पर गोल कोनों से छुटकारा पाना चाहते हैं, तो आप @ adamwong246 का उल्लेख और उपयोग कर सकते हैं:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

वे दो सेटिंग्स "रूट" सेटिंग्स हैं जिनमें से अन्य सेटिंग्स जैसे navbar-border-radiusकि अन्य मान निर्दिष्ट किए जाने से विरासत में मिलेंगी।

एक सूची के लिए सभी चर, चर.विषय या चर की जाँच करते हैं

Answer 9

@BrunoS द्वारा ऊपर पोस्ट किए गए कोड ने मेरे लिए काम नहीं किया,

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

मैंने क्या उपयोग किया था

* {
  border-radius: 0 !important;
}

मुझे उम्मीद है इससे किसी को सहायता मिलेगी

Comments

@brunos का उपयोग कर रहा थाLESS

— afaolek

Answer 10

बूटस्ट्रैप को अनुकूलित करने का एक बहुत आसान तरीका है:

1. बस http://getbootstrap.com/customize/ पर जाएं
2. सभी "त्रिज्या" ढूंढें और उन्हें अपनी इच्छानुसार संशोधित करें।
3. "संकलन और डाउनलोड करें" पर क्लिक करें और बूटस्ट्रैप के अपने स्वयं के संस्करण का आनंद लें।

Answer 11

या आप इसे उस तत्व के HTML में जोड़ सकते हैं जिसे आप सीमा त्रिज्या को हटाना चाहते हैं (इस तरह से आप इसे सभी बटन / तत्वों से नहीं निकालेंगे):

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

तुम भी FlatStrap पर एक नज़र रखना चाहते हो सकता है । यह गोल कोनों, ग्रेडिएंट और ड्रॉप शैडो के बिना बूटस्ट्रैप सीएसएस के लिए मेट्रो-स्टाइल प्रतिस्थापन प्रदान करता है।

Comments

फ्लैटस्ट्रैप के साथ समस्या यह है कि उनके पास अभी तक v3 के लिए SCSS समर्थन नहीं है :(

— HP।

Answer 15

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो आप बूटस्ट्रैप क्लास = "राउंडेड -०" का उपयोग कर सकते हैं, जिसके किनारे बिना नुकीले कोने वाले नुकीले हों <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;
}