ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
in English

ଉପଯୋଗିତା API

ୟୁଟିଲିଟି କ୍ଲାସ୍ ସୃଷ୍ଟି କରିବାକୁ ୟୁଟିଲିଟି API ହେଉଛି ଏକ ସାସ୍-ଆଧାରିତ ଉପକରଣ |

ବୁଟଷ୍ଟ୍ରାପ୍ ୟୁଟିଲିଟିଗୁଡିକ ଆମର ୟୁଟିଲିଟି API ସହିତ ସୃଷ୍ଟି ହୋଇଥାଏ ଏବଂ ସାସ୍ ମାଧ୍ୟମରେ ଆମର ୟୁଟିଲିଟି କ୍ଲାସ୍ ର ଡିଫଲ୍ଟ ସେଟ୍ ପରିବର୍ତ୍ତନ କିମ୍ବା ବିସ୍ତାର କରିବାକୁ ବ୍ୟବହୃତ ହୋଇପାରେ | ଆମର ଉପଯୋଗୀତା API ବିଭିନ୍ନ ବିକଳ୍ପ ସହିତ ଶ୍ରେଣୀର ପରିବାର ସୃଷ୍ଟି ପାଇଁ ସାସ୍ ମାନଚିତ୍ର ଏବଂ କାର୍ଯ୍ୟଗୁଡ଼ିକର ଏକ କ୍ରମ ଉପରେ ଆଧାରିତ | ଯଦି ଆପଣ ସାସ୍ ମାନଚିତ୍ର ସହିତ ଅପରିଚିତ, ତେବେ ଆରମ୍ଭ କରିବାକୁ ଅଫିସିଆଲ୍ ସାସ୍ ଡକସ୍ ଉପରେ ପ read ନ୍ତୁ |

ମାନଚିତ୍ରଟି ଆମର ସମସ୍ତ ଉପଯୋଗିତା ଧାରଣ କରିଥାଏ ଏବଂ ପରେ ଉପସ୍ଥିତ ଥିଲେ ଆପଣଙ୍କ କଷ୍ଟମ୍ ମାନଚିତ୍ର $utilitiesସହିତ ମିଶ୍ରିତ ହୁଏ | $utilitiesୟୁଟିଲିଟି ମାନଚିତ୍ରରେ ଉପଯୋଗୀ ଗୋଷ୍ଠୀର ଏକ ଚାବି ତାଲିକା ଅଛି ଯାହା ନିମ୍ନଲିଖିତ ବିକଳ୍ପଗୁଡ଼ିକୁ ଗ୍ରହଣ କରେ:

ବିକଳ୍ପ ଟାଇପ୍ କରନ୍ତୁ | ବର୍ଣ୍ଣନା
property ଆବଶ୍ୟକ ସମ୍ପତ୍ତିର ନାମ, ଏହା ଏକ ଷ୍ଟ୍ରିଙ୍ଗ୍ କିମ୍ବା ଷ୍ଟ୍ରିଙ୍ଗର ଏକ ଆରେ ହୋଇପାରେ (ଉଦାହରଣ ସ୍ୱରୂପ, ଭୂସମାନ୍ତର ପ୍ୟାଡିଂ କିମ୍ବା ମାର୍ଜିନ) |
values ଆବଶ୍ୟକ ମୂଲ୍ୟଗୁଡିକର ତାଲିକା, କିମ୍ବା ଏକ ମାନଚିତ୍ର ଯଦି ଆପଣ ଶ୍ରେଣୀ ନାମ ମୂଲ୍ୟ ସହିତ ସମାନ ହେବାକୁ ଚାହୁଁନାହାଁନ୍ତି | ଯଦି nullମାନଚିତ୍ର ଚାବି ଭାବରେ ବ୍ୟବହୃତ ହୁଏ, ଏହା ସଂକଳିତ ନୁହେଁ |
class ବ tion କଳ୍ପିକ ଶ୍ରେଣୀ ନାମ ପାଇଁ ପରିବର୍ତ୍ତନଶୀଳ ଯଦି ଆପଣ ଏହା ସମ୍ପତ୍ତି ସହିତ ସମାନ ହେବାକୁ ଚାହୁଁନାହାଁନ୍ତି | ଯଦି ଆପଣ ଚାବି ପ୍ରଦାନ କରନ୍ତି ନାହିଁ classଏବଂ propertyଚାବି ହେଉଛି ଷ୍ଟ୍ରିଙ୍ଗର ଏକ ଆରେ, ଶ୍ରେଣୀ ନାମ propertyଆରେର ପ୍ରଥମ ଉପାଦାନ ହେବ |
state ବ tion କଳ୍ପିକ ଉପଯୋଗିତା ପାଇଁ ସୃଷ୍ଟି :hoverକିମ୍ବା ସୃଷ୍ଟି କରିବାକୁ ଛଉ-ଶ୍ରେଣୀ ପ୍ରକାରଗୁଡ଼ିକର ତାଲିକା | :focusକ default ଣସି ଡିଫଲ୍ଟ ମୂଲ୍ୟ ନାହିଁ |
responsive ବ tion କଳ୍ପିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀଗୁଡିକ ସୃଷ୍ଟି ହେବା ଆବଶ୍ୟକ କି ବୋଲି ବୁଲିୟନ୍ ସୂଚାଇଥାଏ | falseପ୍ରଥମ ରୁ ନିର୍ଧାରିତ।
rfs ବ tion କଳ୍ପିକ ତରଳ ଉଦ୍ଧାରକୁ ସକ୍ଷମ କରିବାକୁ ବୁଲିଅନ୍ | ଏହା କିପରି କାମ କରେ ଜାଣିବା ପାଇଁ RFS ପୃଷ୍ଠାକୁ ଦେଖନ୍ତୁ | falseପ୍ରଥମ ରୁ ନିର୍ଧାରିତ।
print ବ tion କଳ୍ପିକ ପ୍ରିଣ୍ଟ୍ କ୍ଲାସ୍ ସୃଷ୍ଟି ହେବା ଆବଶ୍ୟକ କି ନୁହେଁ ବୋଲି ବୁଲିୟାନ୍ ସୂଚିତ କରେ | falseପ୍ରଥମ ରୁ ନିର୍ଧାରିତ।
rtl ବ tion କଳ୍ପିକ ଉପଯୋଗିତାକୁ RTL ରେ ରଖିବା ଉଚିତ କି ନାହିଁ ବୁଲିୟାନ୍ ସୂଚାଇଥାଏ | trueପ୍ରଥମ ରୁ ନିର୍ଧାରିତ।

API ବ୍ୟାଖ୍ୟା କଲା |

ସମସ୍ତ ୟୁଟିଲିଟି ଭେରିଏବଲ୍ ଗୁଡିକ $utilitiesଆମ _utilities.scssଷ୍ଟାଇଲ୍ ଶୀଟ୍ ମଧ୍ୟରେ ଭେରିଏବଲ୍ ସହିତ ଯୋଡା ଯାଇଛି | ପ୍ରତ୍ୟେକ ଉପଯୋଗୀତା ଗୋଷ୍ଠୀ ଏହିପରି କିଛି ଦେଖାଯାଏ:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

ଯାହା ନିମ୍ନଲିଖିତ ଫଳାଫଳ କରେ:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

କଷ୍ଟମ୍ କ୍ଲାସ୍ ଉପସର୍ଗ |

classସଂକଳିତ CSS ରେ ବ୍ୟବହୃତ ଶ୍ରେଣୀ ଉପସର୍ଗ ପରିବର୍ତ୍ତନ କରିବାକୁ ବିକଳ୍ପ ବ୍ୟବହାର କରନ୍ତୁ :

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

ଆଉଟପୁଟ୍:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

ରାଜ୍ୟଗୁଡିକ |

stateଛଉ-ଶ୍ରେଣୀ ପରିବର୍ତ୍ତନ ସୃଷ୍ଟି କରିବାକୁ ବିକଳ୍ପ ବ୍ୟବହାର କରନ୍ତୁ | ଉଦାହରଣ ଛଉ ଶ୍ରେଣୀଗୁଡ଼ିକ ହେଉଛି :hoverଏବଂ :focus। ଯେତେବେଳେ ରାଜ୍ୟଗୁଡିକର ଏକ ତାଲିକା ପ୍ରଦାନ କରାଯାଏ, ସେହି ଛଉ ଶ୍ରେଣୀ ପାଇଁ ଶ୍ରେଣୀ ନାମଗୁଡ଼ିକ ସୃଷ୍ଟି ହୁଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ହୋଭରରେ ସ୍ୱଚ୍ଛତା ପରିବର୍ତ୍ତନ କରିବାକୁ, ଯୋଡନ୍ତୁ state: hoverଏବଂ ଆପଣ .opacity-hover:hoverଆପଣଙ୍କର ସଂକଳିତ CSS ରେ ପ୍ରବେଶ କରିବେ |

ଏକାଧିକ ଛଉ କ୍ଲାସ୍ ଆବଶ୍ୟକ କରନ୍ତି କି? ରାଜ୍ୟଗୁଡିକର ଏକ ସ୍ପେସ୍ ପୃଥକ ତାଲିକା ବ୍ୟବହାର କରନ୍ତୁ : state: hover focus

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

ଆଉଟପୁଟ୍:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗିତା |

ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟଗୁଡିକରେresponsive ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗିତା (ଯଥା, .opacity-md-25) ସୃଷ୍ଟି କରିବାକୁ ବୁଲିଅନ୍ ଯୋଡନ୍ତୁ |

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

ଆଉଟପୁଟ୍:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

ଉପଯୋଗୀତା ପରିବର୍ତ୍ତନ

ସମାନ ଚାବି ବ୍ୟବହାର କରି ବିଦ୍ୟମାନ ଉପଯୋଗିତାକୁ ନବଲିଖନ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ଯଦି ଆପଣ ଅତିରିକ୍ତ ପ୍ରତିକ୍ରିୟାଶୀଳ ଓଭରଫ୍ଲୋ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଚାହୁଁଛନ୍ତି, ଆପଣ ଏହା କରିପାରିବେ:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

printଅପ୍ସନ୍ ସକ୍ଷମ କରିବା ପ୍ରିଣ୍ଟ୍ ପାଇଁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ମଧ୍ୟ ସୃଷ୍ଟି କରିବ, ଯାହା କେବଳ @media print { ... }ମିଡିଆ ଜିଜ୍ଞାସା ମଧ୍ୟରେ ପ୍ରୟୋଗ ହେବ |

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

ଆଉଟପୁଟ୍:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

ଗୁରୁତ୍ୱ

API ଦ୍ ated ାରା ଉତ୍ପାଦିତ ସମସ୍ତ ଉପଯୋଗୀତା !importantନିଶ୍ଚିତ କରେ ଯେ ସେମାନେ ଉପାଦାନ ଏବଂ ମୋଡିଫାୟର୍ କ୍ଲାସ୍କୁ ଉଦ୍ଦିଷ୍ଟ ଭାବରେ ନବଲିଖନ କରନ୍ତି | $enable-important-utilitiesଭେରିଏବଲ୍ (ଡିଫଲ୍ଟ ଟୁ true) ସହିତ ଆପଣ ଏହି ସେଟିଂକୁ ସର୍ବଭାରତୀୟ ସ୍ତରରେ ଟୋଗଲ୍ କରିପାରିବେ |

API ବ୍ୟବହାର କରି |

ବର୍ତ୍ତମାନ ଯେହେତୁ ଆପଣ ଉପଯୋଗୀତା API କିପରି କାର୍ଯ୍ୟ କରେ ତାହା ସହିତ ଆପଣ ପରିଚିତ, ଆପଣଙ୍କର ନିଜସ୍ୱ କଷ୍ଟମ୍ କ୍ଲାସ୍ କିପରି ଯୋଡାଯାଏ ଏବଂ ଆମର ଡିଫଲ୍ଟ ଉପଯୋଗିତାକୁ କିପରି ରୂପାନ୍ତର କରିବେ ଶିଖନ୍ତୁ |

ଉପଯୋଗିତା ଯୋଗକର |

$utilitiesଏକ ସହିତ ଡିଫଲ୍ଟ ମାନଚିତ୍ରରେ ନୂତନ ଉପଯୋଗିତା ଯୋଗ କରାଯାଇପାରିବ map-merge| ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଆମର ଆବଶ୍ୟକୀୟ ସାସ୍ ଫାଇଲଗୁଡିକ ଏବଂ _utilities.scssପ୍ରଥମେ ଆମଦାନୀ ହୋଇଛି, ତାପରେ map-mergeଆପଣଙ୍କର ଅତିରିକ୍ତ ଉପଯୋଗିତା ଯୋଡିବାକୁ ବ୍ୟବହାର କରନ୍ତୁ | cursorଉଦାହରଣ ସ୍ୱରୂପ, ଏଠାରେ ତିନୋଟି ମୂଲ୍ୟ ସହିତ ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗିତା କିପରି ଯୋଡାଯାଏ ତାହା ଏଠାରେ ଅଛି |

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

ଉପଯୋଗିତାକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

$utilitiesଡିଫଲ୍ଟ ମାନଚିତ୍ରରେ map-getଏବଂ map-mergeକାର୍ଯ୍ୟଗୁଡ଼ିକ ସହିତ ବିଦ୍ୟମାନ ଉପଯୋଗିତାକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ widthଉପଯୋଗିତା ପାଇଁ ଏକ ଅତିରିକ୍ତ ମୂଲ୍ୟ ଯୋଗ କରୁଛୁ | ଏକ ପ୍ରାରମ୍ଭିକରୁ ଆରମ୍ଭ କରନ୍ତୁ map-mergeଏବଂ ତାପରେ ଆପଣ କେଉଁ ଉପଯୋଗିତାକୁ ପରିବର୍ତ୍ତନ କରିବାକୁ ଚାହୁଁଛନ୍ତି ତାହା ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ | ସେଠାରୁ, ଉପଯୋଗୀତାର ବିକଳ୍ପ ଏବଂ ମୂଲ୍ୟଗୁଡ଼ିକୁ ଆକସେସ୍ ଏବଂ ରୂପାନ୍ତର କରିବାକୁ ନେଷ୍ଟେଡ୍ "width"ମାନଚିତ୍ର ଆଣ |map-get

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

ପ୍ରତିକ୍ରିୟାଶୀଳ ସକ୍ଷମ କରନ୍ତୁ |

ଏକ ବିଦ୍ୟମାନ ଉପଯୋଗୀତା ସେଟ୍ ପାଇଁ ଆପଣ ପ୍ରତିକ୍ରିୟାଶୀଳ କ୍ଲାସ୍ ସକ୍ଷମ କରିପାରିବେ ଯାହା ଡିଫଲ୍ଟ ଭାବରେ ସମ୍ପ୍ରତି ପ୍ରତିକ୍ରିୟାଶୀଳ ନୁହେଁ | ଉଦାହରଣ ସ୍ୱରୂପ, borderଶ୍ରେଣୀଗୁଡ଼ିକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ କରିବାକୁ:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

ଏହା ବର୍ତ୍ତମାନ .borderଏବଂ .border-0ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ ସୃଷ୍ଟି କରିବ | ଆପଣଙ୍କର ଉତ୍ପାଦିତ CSS ଏହିପରି ଦେଖାଯିବ:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

ଉପଯୋଗିତାଗୁଡ଼ିକର ନାମ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

V4 ଉପଯୋଗିତା ହରାଉଛି, କିମ୍ବା ଅନ୍ୟ ନାମକରଣ ସମ୍ମିଳନୀରେ ଅଭ୍ୟସ୍ତ? ପ୍ରଦତ୍ତ ଉପଯୋଗିତା ର ଫଳାଫଳକୁ ନବଲିଖନ କରିବା ପାଇଁ ଉପଯୋଗିତା API କୁ ବ୍ୟବହାର କରାଯାଇପାରିବ class- ଉଦାହରଣ ସ୍ୱରୂପ, .ms-*ଉପଯୋଗିତାକୁ ପୁରୁଣା ନାମରେ ନାମିତ କରିବା ପାଇଁ .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

ଉପଯୋଗିତା ହଟାନ୍ତୁ |

ଗ୍ରୁପ୍ କି କୁ ସେଟ୍ କରି ଯେକ any ଣସି ଡିଫଲ୍ଟ ଉପଯୋଗୀତା ଅପସାରଣ କରନ୍ତୁ null| ଉଦାହରଣ ସ୍ୱରୂପ, ଆମର ସମସ୍ତ widthଉପଯୋଗିତାକୁ ଅପସାରଣ କରିବାକୁ, ଏକ ସୃଷ୍ଟି $utilities map-mergeଏବଂ ଭିତରେ ଯୋଡ "width": null|

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

RTL ରେ ଉପଯୋଗିତା ହଟାନ୍ତୁ |

କେତେକ ଧାର ମାମଲା RTL ଷ୍ଟାଇଲିଂକୁ କଷ୍ଟସାଧ୍ୟ କରିଥାଏ, ଯେପରିକି ଆରବୀରେ ରେଖା ବ୍ରେକ୍ | rtlଏହିପରି, ବିକଳ୍ପକୁ ସେଟିଂ କରି RTL ଆଉଟପୁଟରୁ ଉପଯୋଗିତାକୁ ଡ୍ରପ କରାଯାଇପାରିବ false|

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

ଆଉଟପୁଟ୍:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

RTLCSS removeନିୟନ୍ତ୍ରଣ ନିର୍ଦ୍ଦେଶନାମା ଯୋଗୁଁ ଏହା RTL ରେ କିଛି ଆଉଟପୁଟ୍ କରେନାହିଁ |