Breac-bhràghad
Sònraich far a bheil an duilleag làithreach taobh a-staigh rangachd seòlaidh a chuireas gu fèin-obrachail dealadairean tro CSS.
eisimpleir
Cleachd liosta òrdaichte no neo-òrdaichte le nithean liosta co-cheangailte gus criomag arain le glè bheag de stoidhle a chruthachadh. Cleachd na goireasan againn gus stoidhlichean a bharrachd a chuir ris mar a thogras tu.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Luchd-sgaraidh
Bithear a’ cur luchd-sgaraidh gu fèin-ghluasadach ann an CSS tro ::before
agus content
. Faodar an atharrachadh le bhith ag atharrachadh togalach àbhaisteach CSS ionadail --bs-breadcrumb-divider
, no tron $breadcrumb-divider
chaochladair Sass - agus $breadcrumb-divider-flipped
airson a bhuidheann RTL, ma tha feum air. Bidh sinn bunaiteach don chaochladair Sass againn, a tha air a shuidheachadh mar chùl-raon don t-seilbh àbhaisteach. San dòigh seo, gheibh thu roinneadh cruinne as urrainn dhut a dhol thairis air gun a bhith ag ath-chruinneachadh CSS aig àm sam bith.
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
Nuair a bhios tu ag atharrachadh tro Sass, tha feum air a’ ghnìomh cuòt gus na luachan timcheall sreang a ghineadh. Mar eisimpleir, a’ cleachdadh >
mar an divider, faodaidh tu seo a chleachdadh:
$breadcrumb-divider: quote(">");
Tha e comasach cuideachd ìomhaigh SVG freumhaichte a chleachdadh . Cuir a-steach e tron t-seilbh àbhaisteach CSS againn, no cleachd an caochladair Sass.
A’ cleachdadh SVG freumhaichte
Le bhith a’ toirt a-steach SVG mar dàta URI feumaidh URL teicheadh bho ghrunn charactaran, gu sònraichte <
, >
agus #
. Sin as coireach gu bheil an $breadcrumb-divider
caochladair air a dhol tron escape-svg()
ghnìomh Sass againn . Nuair a bhios tu a’ cleachdadh seilbh àbhaisteach CSS, feumaidh tu URL teicheadh às an SVG agad leat fhèin. Leugh na mìneachaidhean aig Kevin Weber air CodePen airson fiosrachadh mionaideach air dè as urrainn dhut teicheadh.
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");
Faodaidh tu cuideachd an suidheachadh roinneadh a thoirt air falbh --bs-breadcrumb-divider: '';
(tha sreangan falamh ann an togalaichean àbhaisteach CSS a’ cunntadh mar luach), no suidheachadh caochladair Sass gu $breadcrumb-divider: none;
.
<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
$breadcrumb-divider: none;
Ruigsinneachd
Leis gu bheil crùbanan arain a’ toirt seachad seòladh, is e deagh bheachd a th’ ann bileag brìoghmhor a chuir ris leithid aria-label="breadcrumb"
cunntas a thoirt air an t-seòrsa seòlaidh a tha air a sholarachadh san <nav>
eileamaid, a bharrachd air a bhith a’ cur an sàs anns aria-current="page"
an rud mu dheireadh den t-seata gus sealltainn gu bheil e a’ riochdachadh na duilleige gnàthach.
Airson tuilleadh fiosrachaidh, faic pàtran crùbagan arain Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA .
CSS
Caochlaidhean
Air a chur ris ann an v5.2.0Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap a tha a’ fàs, bidh crùbagan a-nis a’ cleachdadh caochladairean CSS ionadail .breadcrumb
airson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
caochladairean Sass
$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote("/");
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;