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

Question

আমি টুইটার বুটস্ট্র্যাপ ব্যবহার করতে চাই, তবে কেবলমাত্র নির্দিষ্ট উপাদানগুলিতে, তাই আমার নিজের উপসর্গের সাথে সমস্ত টুইটার বুটস্ট্র্যাপ শ্রেণিতে উপসর্গের উপায় খুঁজে বের করতে হবে, বা কম মিশ্রিনগুলি ব্যবহার করতে হবে। আমি এটি নিয়ে এখনও অভিজ্ঞ নই তাই এটি কীভাবে করা যায় তা আমি যথেষ্ট বুঝতে পারি না। এইচটিএমএলের একটি উদাহরণ যা আমি স্টাইল করার চেষ্টা করছি:

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

এই উদাহরণে, টুইটার বুটস্ট্র্যাপ উভয় ধরণের স্টাইলকেই পছন্দ করবে h1তবে আমি কোন অঞ্চলে টুইটার বুটস্ট্র্যাপ শৈলী প্রয়োগ করি সে সম্পর্কে আমি আরও নির্বাচনী হতে চাই।

Comments

বিদ্যমান স্টাইলশিট সহ কোনও অ্যাপ্লিকেশনের জন্য সিএসএস কাঠামোর

— শেরব্রো

এই সাহায্য করবে "কিভাবে বিছিন্ন বুটস্ট্র্যাপ সিএসএস এড়াতে দ্বন্দ্ব" formden.com/blog/isolate-bootstrap

— স্যামুয়েল ইভ

Answer 1

এটি আমি যা ভাবি তার চেয়ে সহজ হতে প্রমাণিত। কম এবং এসএসএস উভয়ই নেমস্প্যাকিং সমর্থন করে (এমনকি একই সিনট্যাক্স ব্যবহার করে)। আপনি যখন বুটস্ট্র্যাপ অন্তর্ভুক্ত করবেন, আপনি নামের জন্য কোনও নির্বাচকের মধ্যে এটি করতে পারেন:

.bootstrap-styles {
  @import 'bootstrap';
}

আপডেট: LESS এর নতুন সংস্করণগুলির জন্য এটি এটি কীভাবে করা যায় তা এখানে:

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

অনুরূপ প্রশ্নের উত্তর এখানে দেওয়া হয়েছিল।

Comments

আরে, আমি এটি অনুসরণ করার চেষ্টা করছি তবে আমি কিছুটা বিভ্রান্ত। আমি কৌণিকের সাথে কাজ করছি। সিডিএন ব্যবহার করে আমি বুটস্ট্র্যাপ.মিন.জেএস, কম.মিন.জেএস, এবং বুটস্ট্র্যাপ.মিন.সিএসএস ফাইলগুলি উল্লেখ করেছি। যদিও আমার আবেদনে নাম স্পেসিং করতে হবে তা আমি সত্যই নিশ্চিত নই।

— ব্যাটম্যান

এটি করার পরে, আমার মডেলটি এটি ব্যবহার হিসাবে কার্যকর হয় না। এটা কি আশা করা যায়?

— ব্যাটম্যান

@ ব্যাটম্যান আপনি একটি সিডিএন ব্যবহার করতে চান না, কারণ আপনি একটি উপসর্গ অন্তর্ভুক্ত করতে মূলত সমস্ত বুটস্ট্র্যাপ পুনর্লিখন করছেন। @importআসল বুটস্ট্র্যাপে আপনাকে SASS এর মতো একটি প্রিপ্রেসেসর ব্যবহার করতে হবে । আমারও মডেলগুলির সাথে সমস্যা ছিল, আমি মনে করি কারণ বুটস্ট্র্যাপ শীর্ষ স্তরের বডি ট্যাগটিতে নির্দিষ্ট ক্লাস প্রয়োগ করে। আমি কোন সমাধান খুঁজে পেয়েছি কিনা মনে নেই। শেষ পর্যন্ত, আমি আমার নিজের মডেল প্রতিস্থাপনটি লিখে শেষ করেছি বলে মনে করি।

— অ্যান্ড্রু

সংস্করণ 3 ( hereswhatidid.com/2014/02/… ) এর পরে এটি আর কাজ করবে না

— adamj

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

— ই

Answer 2

@ অ্যান্ড্রু দুর্দান্ত উত্তর। আপনি আরও নোট করতে চাইবেন যে বুটস্ট্র্যাপ প্রধানত ফন্ট যুক্ত করতে শরীরে {। পরিবর্তন করে। সুতরাং আপনি যখন এটি কম / SASS এর মাধ্যমে নামকরণ করেন তখন আপনার আউটপুট CSS ফাইলটি দেখতে এমন লাগে: (বুটস্ট্র্যাপ 3 এ)

.bootstrap-styles body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;
}

তবে স্পষ্টতই আপনার ডিভের অভ্যন্তরে কোনও বডি ট্যাগ থাকবে না, সুতরাং আপনার বুটস্ট্র্যাপের সামগ্রীতে বুটস্ট্র্যাপ ফন্ট থাকবে না (যেহেতু সমস্ত বুটস্ট্র্যাপ পিতামাতার কাছ থেকে ফন্টের উত্তরাধিকারী)

ঠিক করার জন্য, উত্তরটি হওয়া উচিত:

.bootstrap-styles {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;

    @import 'bootstrap';
}

Comments

আপনি ভুলে গেছেনmargin: 0;

— kolobok

মনোযোগ! আমি জানি না, তবে কিছু জায়গায় সিএসএসের মতো কম উত্পাদিত।। আমার-উপসর্গ। আমার-উপসর্গ ..., সুতরাং এটি অনুসন্ধান এবং প্রতিস্থাপন করার জন্য আপনারও দরকার।

— kolobok

Answer 3

@ অ্যান্ড্রু, @ কেভিন এবং @ অ্যাডামজ-এর উত্তরগুলি একসাথে রেখে (আরও কয়েকটি স্টাইল), আপনি যদি "বুটস্ট্র্যাপ-নেমস্পিড.বিহীন" নামের একটি ফাইলের মধ্যে নিম্নলিখিতটি অন্তর্ভুক্ত করেন তবে আপনি কেবল 'বুটস্ট্র্যাপ-নেমস্পিড.নেস' কোনও ক্ষেত্রেই আমদানি করতে পারবেন ফাইল:

// bootstrap-namespaced.less

// This less file is intended to be imported from other less files. 
// Example usage:
// my-custom-namespace {
//  import 'bootstrap-namespaced.less';
// }

// Import bootstrap.css (but treat it as a less file) to avoid problems 
// with the way Bootstrap is using the parent operator (&).
@import (less) 'bootstrap.css';

// Manually include styles using selectors that will not work when namespaced.

@import 'variables.less';

& {
    // From normalize.less

    // Previously inside "html {"
    // font-family: sans-serif; // Overridden below
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    // Previously inside "body {"
    margin: 0;

    // From scaffolding.less

    // Previously inside "html {"
    // font-size: 10px; // Overridden below
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    // Previously inside "body {"
    font-family: @font-family-base;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @text-color;
    background-color: @body-bg;
}

Comments

ধন্যবাদ। এটি সত্যিই সেরা সমাধান।

— kolobok

পুরোপুরি কাজ করে!

— কেভিন বার্থোমিয়ার

Answer 4

বুটস্ট্র্যাপ সিএসএসে একটি নেমস্পেস যুক্ত করা মডেল কার্যকারিতা ভঙ্গ করবে কারণ বুটস্ট্র্যাপ সরাসরি শরীরে একটি 'মডেল-ব্যাকড্রপ' শ্রেণি যুক্ত করে। একটি কার্যপ্রণালী হ'ল মডেলটি খোলার পরে এই উপাদানটি স্থানান্তর করা, যেমন:

$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder); 

আপনি 'লুকানো.বস.মডাল' ইভেন্টের জন্য কোনও হ্যান্ডলারের উপাদানটি সরাতে পারেন।

Comments

আপনি যদি এনজিবুটস্ট্র্যাপের সাহায্যে কৌণিক ব্যবহার করছেন তবে আপনি কোনও নির্দিষ্ট ধারকের ভিতরে মডেলটি খুলতে বেছে নিতে পারেন। this.modalService.open('myModal', {container: '#modalgoeshere'})

— এনা

Answer 5

ফাইলগুলির .বিহীন সংস্করণ ব্যবহার করুন। আপনার কোন কম ফাইলের প্রয়োজন তা নির্ধারণ করুন, তারপরে সেই .বিহীন ফাইলগুলিকে মোড়ানো করুন:

.bootstrap-styles {

    h1 { }

}

এটি আপনাকে এর ফলাফল প্রদান করবে:

.bootstrap-styles h1 { }

Answer 6

আমি বুটস্ট্র্যাপ 3 দিয়ে একটি জিআইএসটি করেছি। বুটস্ট্র্যাপ-র্যাপার নামে একটি শ্রেণীর মধ্যে https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

আমি এই সরঞ্জামটি দিয়ে শুরু করেছি: http://www.css-prefix.com/ এবং বাকীটি অনুসন্ধানের সাথে ঠিক করুন এবং পিএইচপিস্টর্মে প্রতিস্থাপন করুন। সমস্ত ফন্ট @ ফন্ট-ফেস ম্যাক্সডিএন-তে হোস্ট করা হয়।

প্রথম লাইনের উদাহরণ

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

Answer 7

নেমস্পেসিংটি মোডাল প্লাগইনের ব্যাকড্রপ ডিভ ভাঙে, যেহেতু এটি সর্বদা <body> ট্যাগে যুক্ত হয় আপনার নামস্পেসিং উপাদানটি বাইপাস করে যা এতে স্টাইলগুলি প্রয়োগ করে।

প্লাগইনটি $bodyব্যাকড্রপ দেখানোর আগে এর রেফারেন্সটি পরিবর্তন করে আপনি এটি ঠিক করতে পারেন :

myDialog.modal({
    show: false
});

myDialog.data("bs.modal").$body = $(myNamespacingElement);

myDialog.modal("show");

$bodyযেখানে পরিপ্রেক্ষিত যোগ করা হবে সম্পত্তি সিদ্ধান্ত নেয়।

Answer 8

যারা কম কী জানেন না তাদের জন্য অ্যান্ড্রু কী কী পদক্ষেপের কথা বলছিলেন তা আরও ভালভাবে ব্যাখ্যা করার জন্য। এখানে একটি লিঙ্ক দেওয়া হয়েছে যা কীভাবে ধাপে ধাপে এটি করা হয় তা কীভাবে বুটস্ট্র্যাপ বা অন্যান্য সিএসএস লাইব্রেরিগুলি বিচ্ছিন্ন করা যায় তা ব্যাখ্যা করে

Answer 9

সর্বাধিক সহজ সমাধান - বুটস্ট্র্যাপের জন্য কাস্টম বিল্ড বিচ্ছিন্ন সিএসএস ক্লাস ব্যবহার শুরু করুন।

উদাহরণস্বরূপ, বুটস্ট্র্যাপ ৪.১ এর জন্য CSS4.1 ডিরেক্টরি থেকে ফাইলগুলি ডাউনলোড করুন -

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

এবং ক্লাস বুটস্ট্রাপিসো দিয়ে একটি ডিভিতে আপনার এইচটিএমএল মোড়ানো:

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

বিচ্ছিন্ন বুটস্ট্র্যাপ 4 সহ পৃষ্ঠা টেম্পলেট হবে

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <title>Page1</title>

    <!-- Isolated Bootstrap4 CSS - -->
    <link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">   

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>

  </head>

  <body>

  <div class="bootstrapiso">
  <!-- Any HTML here will be styled with Bootstrap CSS -->
  </div>

  </body>
</html>

Answer 10

@ অ্যান্ড্রু দ্বারা প্রস্তাবিত একই সমস্যা এবং পদ্ধতিটির মুখোমুখি আমি দুর্ভাগ্যক্রমে আমার নির্দিষ্ট ক্ষেত্রে সহায়তা করি নি। বুটস্ট্র্যাপ ক্লাসগুলি অন্য ফ্রেমওয়ার্কের ক্লাসগুলির সাথে সংঘর্ষে। এই প্রকল্পটি https://github.com/sneas/bootstrap-sass-namespace এভাবেই চালু করা হয়েছে । বিনামূল্যে নির্দ্বিধায়।

Answer 11

প্রত্যেকের জন্য আরও নোট হিসাবে। মোডালগুলি ব্যাকড্রপের সাথে কাজ করার জন্য আপনি কেবল বুটস্ট্র্যাপ 3 থেকে এই স্টাইলগুলি অনুলিপি করতে পারবেন

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

Answer 12

গিথুব থেকে প্রথম ক্লোন বুটস্ট্র্যাপ:

git clone https://github.com/twbs/bootstrap.git

প্রয়োজনীয়তা ইনস্টল করুন:

npm install

Scss / bootstrap.scss খুলুন এবং আপনার নাম স্থান যুক্ত করুন:

.your-namespace {
    @import "functions";
    ...
    @import "utilities/api";
}

সংকলন বুটস্ট্র্যাপ:

npm run dist

dist/css/bootstrap.cssনাম htmlএবং bodyস্থানটি ট্যাগ থেকে খুলুন এবং সরান ।

এরপরে ডিস্ট ফোল্ডারের সামগ্রীটি আপনার প্রকল্পে অনুলিপি করুন এবং আপনি সমস্ত প্রস্তুত।

আনন্দ কর!