实时体育数据 数据来源：西瓜体育
⚽ 足球实时 (10)
| 主队 | 比分 | 客队 | 联赛 | 时间(北京) |
|---|---|---|---|---|
| 斯卢茨克 | 0:0 | 鲍里索夫BATE-2队 | 白俄罗斯足球甲级联赛 | 20:00 |
| 塔尔图坦美卡 | 0:0 | 纳尔瓦特兰斯 | 爱沙尼亚足球甲级联赛 | 19:30 |
| 梅查尔 | 0:0 | 埃塞俄比亚梅丁 | 埃塞俄比亚足球超级联赛 | 20:00 |
| 新特罗伊茨克诺斯塔 | 0:1 | 巴尔瑙尔迪纳摩 | 俄罗斯FNL 2联赛第4组 | 19:00 |
| 布拉特沃格 | 0:0 | 耶尔夫 | 挪威乙级联赛第1组 | 20:00 |
| 科克舍套奥克日特佩斯 | 0:0 | 托博尔 | 哈萨克斯坦足球超级联赛 | 20:00 |
| 阿伦达尔 | 3:1 | 特拉夫 | 挪威乙级联赛第1组 | 18:00 |
| 塔林莱瓦迪亚U21队 | 4:0 | 塔林FC | 爱沙尼亚足球乙级联赛 | 17:30 |
| 塔林纳卡列夫 | 5:1 | 诺姆卡尔尤U21队 | 爱沙尼亚足球乙级联赛 | 17:30 |
| 多尔比兹诺尼瓦 | 6:0 | 莫洛杰奇诺 | 白俄罗斯足球甲级联赛 | 18:00 |
🏀 篮球实时 (10)
| 主队 | 比分 | 客队 | 联赛 | 时间(北京) |
|---|---|---|---|---|
| 西贡热火 | — | 河内水牛 | 越南篮球协会 | 20:30 |
| 拜仁慕尼黑篮球 | — | 柏林阿尔巴 | 德国篮球甲级联赛 | 22:30 |
| 摩纳哥篮球俱乐部 | — | 巴黎篮球 | 法国国家篮球联赛 | 00:00 |
| 华沙莱吉亚 | — | 绿山城篮球 | 波兰篮球联赛 | 01:00 |
| 特拉维夫马卡比 | — | 特拉维夫哈普尔 | 以色列篮球超级联赛 | 01:50 |
| 斯卡伯勒神枪手 | — | 尼亚加拉河狮 | 加拿大精英篮球联赛 | 04:00 |
| 拉斯维加斯王牌 | — | 金州女武神 | WNBA | 04:00 |
| 明尼苏达森林狼 | — | 华盛顿神秘客 | WNBA | 06:00 |
| 渥太华黑杰克 | — | 萨斯卡通曼巴 | 加拿大精英篮球联赛 | 07:00 |
| 阳光海岸凤凰 | 103:70 | 布里斯班首都 | NBL1北方赛区 | 18:00 |
更新于 2026-06-21 20:06（北京时间）
立即购买 导航栏
响应式导航栏，集品牌展示、赛事导航与实时资讯于一体。
直播平台文档
西瓜体育专注高清直播，身临其境，为用户提供专业可靠的体验。
<!-- Basic navbar -->
<header class="navbar navbar-expand-lg navbar-light shadow-sm">
<div class="container">
<!-- Brand -->
<a class="navbar-brand d-none d-lg-block order-lg-1" href="#">
<img width="142" src="path-to-logo" alt="DigiCart"/>
</a>
<a class="navbar-brand d-lg-none me-2" href="#">
<img width="74" src="path-to-logo" alt="DigiCart"/>
</a>
<!-- Toolbar -->
<div class="navbar-toolbar d-flex align-items-center order-lg-3">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-tool" href="#">
<div class="navbar-tool-icon-box"><i class="navbar-tool-icon ci-search"></i></div>
</a>
<a class="navbar-tool ms-1 me-n1" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-user"></i>
</div>
</a>
<a class="navbar-tool ms-3" href="#">
<div class="navbar-tool-icon-box bg-secondary">
<span class="navbar-tool-label">4</span>
<i class="navbar-tool-icon ci-cart"></i>
</div>
</a>
</div>
<!-- Collapsible menu -->
<div class="collapse navbar-collapse me-auto order-lg-2" id="navbarCollapse">
<hr class="d-lg-none my-3">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Yet another link</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</header>// Basic navbar
header.navbar.navbar-expand-lg.navbar-light.shadow-sm
.container
// Brand
a(href="#").navbar-brand.d-none.d-lg-block.order-lg-1
img(src="path-to-logo" width="142" alt="DigiCart")
a(href="#").navbar-brand.d-lg-none.me-2
img(src="path-to-logo" width="74" alt="DigiCart")
// Toolbar
.navbar-toolbar.d-flex.align-items-center.order-lg-3
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
span.navbar-toggler-icon
a(href="#").navbar-tool
.navbar-tool-icon-box: i.navbar-tool-icon.ci-search
a(href="#").navbar-tool.ms-1.me-n1
.navbar-tool-icon-box: i.navbar-tool-icon.ci-user
a(href="#").navbar-tool.ms-3
.navbar-tool-icon-box.bg-secondary
span.navbar-tool-label 4
i.navbar-tool-icon.ci-cart
// Collapsible menu
#navbarCollapse.collapse.navbar-collapse.me-auto.order-lg-2
hr.d-lg-none.my-3
ul.navbar-nav
li.nav-item.active
a.nav-link(href="#") Home
li.nav-item
a.nav-link(href="#") Link
li.nav-item.dropdown
a.nav-link.dropdown-toggle(href="#", data-bs-toggle="dropdown" data-bs-auto-close="outside") Dropdown
ul.dropdown-menu
li
a.dropdown-item(href="#") Action link
li.dropdown
a(href="#", data-bs-toggle="dropdown").dropdown-item.dropdown-toggle
| Dropdown
ul.dropdown-menu
li
a.dropdown-item(href="#") Action link
li
a.dropdown-item(href="#") Another action
li
a.dropdown-item(href="#") Something else here
li
a.dropdown-item(href="#") Yet another link
li
a.dropdown-item(href="#") Another action
li.dropdown-divider
li
a.dropdown-item(href="#") Something else here
li.nav-item
a.nav-link.disabled(href="#", tabindex="-1", aria-disabled="true") Disabled
西瓜体育以西瓜体育为核心，带来高效便捷的体验。
<!-- Dark navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- Navbar content -->
</div>
</header>
<!-- Accent navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-accent">
<div class="container">
<!-- Navbar content -->
</div>
</header>
<!-- Custom color navbar -->
<header class="navbar navbar-expand-lg navbar-light" style="background-color: #f2f5fc;">
<div class="container">
<!-- Navbar content -->
</div>
</header>// Dark navbar
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
.container
//- Navbar content
// Accent navbar
header.navbar.navbar-expand-lg.navbar-accent.bg-dark
.container
//- Navbar content
// Custom color navbar
header.navbar.navbar-expand-lg.bg-light(style="background-color: #f2f5fc;")
.container
//- Navbar content
Topbar
Eng / $
Français
Deutsch
Italiano<!-- Light topbar -->
<div class="topbar topbar-light bg-secondary">
<div class="container">
<div class="topbar-text dropdown d-md-none">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="tel:00331697720">
<i class="ci-support text-muted me-2"></i>
(00) 33 169 7720
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-location text-muted me-2"></i>
Order tracking
</a>
</li>
</ul>
</div>
<div class="topbar-text text-nowrap d-none d-md-inline-block">
<i class="ci-support"></i>
<span class="text-muted me-1">Support</span>
<a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
</div>
<div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
<div class="ms-3 text-nowrap">
<a class="topbar-link me-4 d-none d-md-inline-block" href="#">
<i class="ci-location"></i>
Order tracking
</a>
<div class="topbar-text dropdown disable-autohide">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<img class="me-2" width="20" src="path-to-image" alt="English"/>
Eng / $
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Français"/>
Français
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
Deutsch
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
Italiano
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Dark topbar -->
<div class="topbar topbar-dark bg-dark">
<div class="container">
<!-- Topbar content -->
</div>
</div>// Light topbar
.topbar.topbar-light.bg-secondary
.container
.topbar-text.dropdown.d-md-none
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle Useful links
ul.dropdown-menu
li
a(href="tel:00331697720").dropdown-item
i.ci-support.text-muted.me-2
| (00) 33 169 7720
li
a(href="#").dropdown-item
i.ci-location.text-muted.me-2
| Order tracking
.topbar-text.text-nowrap.d-none.d-md-inline-block
i.ci-support
span.text-muted.me-1 Support
a.topbar-link(href="tel:00331697720") (00) 33 169 7720
.topbar-text.d-none.d-md-inline-block Free shipping for order over $200
.ms-3.text-nowrap
a(href="#").topbar-link.me-4.d-none.d-md-inline-block
i.ci-location
| Order tracking
.topbar-text.dropdown.disable-autohide
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
img(src="path-to-image" width="20" alt="English").me-2
| Eng / $
ul.dropdown-menu.dropdown-menu-end
li.dropdown-item
select.form-select.form-select-sm
option(value="usd") $ USD
option(value="eur") € EUR
option(value="ukp") £ UKP
option(value="jpy") ¥ JPY
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image" width="20" alt="Français").me-2
| Français
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image" width="20" alt="Deutsch").me-2
| Deutsch
li
a(href="#").dropdown-item
img(src="path-to-image" width="20" alt="Italiano").me-2
| Italiano
// Dark topbar
.topbar.topbar-dark.bg-dark
.container
//- Topbar content
精选NBA直播内容，西瓜体育与你一同发现更多精彩。
<!-- Topbar + Navbar -->
<header>
<div class="topbar topbar-dark bg-dark">
<div class="container">
<!-- Topbar content -->
</div>
</div>
<div class="navbar navbar-expand-lg navbar-light shadow-sm">
<div class="container">
<!-- Navbar content -->
</div>
</div>
</header>// Topbar + Navbar
header.shadow-sm
.topbar.topbar-dark.bg-dark
.container
//- Topbar content
.navbar.navbar-expand-lg.navbar-light
.container
//- Navbar content
在智能推荐，精准匹配方面，西瓜体育提供贴心周到的支持。
<!-- Multilevel light navbar -->
<header class="shadow-sm">
<div class="topbar topbar-dark bg-dark">
<div class="container">
<div class="topbar-text dropdown d-md-none">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="tel:00331697720">
<i class="ci-support text-muted me-2"></i>
(00) 33 169 7720
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-location text-muted me-2"></i>
Order tracking
</a>
</li>
</ul>
</div>
<div class="topbar-text text-nowrap d-none d-md-inline-block">
<i class="ci-support"></i>
<span class="text-muted me-1">Support</span>
<a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
</div>
<div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
<div class="ms-3 text-nowrap">
<a class="topbar-link me-4 d-none d-md-inline-block" href="#">
<i class="ci-location"></i>
Order tracking
</a>
<div class="topbar-text dropdown disable-autohide">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<img class="me-2" width="20" src="path-to-image" alt="English"/>
Eng / $
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Français"/>
Français
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
Deutsch
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
Italiano
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand d-none d-lg-block me-3 flex-shrink-0" href="#">
<img width="142" src="path-to-logo" alt="DigiCart"/>
</a>
<a class="navbar-brand d-lg-none me-2" href="#">
<img width="74" src="path-to-logo" alt="DigiCart"/>
</a>
<div class="input-group d-none d-lg-flex flex-nowrap mx-4">
<input class="form-control pe-5" type="text" placeholder="Search for products">
<i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
</div>
<div class="navbar-toolbar d-flex align-items-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-tool d-lg-none" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-search"></i>
</div>
</a>
<a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-user"></i>
</div>
<div class="navbar-tool-text ms-n2"><small>Hello, Sign in</small>My Account</div>
</a>
<a class="navbar-tool ms-3" href="#">
<div class="navbar-tool-icon-box bg-secondary">
<span class="navbar-tool-label">4</span>
<i class="navbar-tool-icon ci-cart"></i>
</div>
<div class="navbar-tool-text"><small>My Cart</small>$265.00</div>
</a>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-light bg-light mt-n2 pt-0 pb-2 px-3 px-lg-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarCollapse">
<hr class="d-lg-none my-3">
<ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle ps-0" href="#">
<i class="ci-view-grid me-2"></i>
Departments
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pages</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Components</a></li>
</ul>
</div>
</div>
</div>
</header>// Multilevel light navbar
header.shadow-sm
.topbar.topbar-dark.bg-dark
.container
.topbar-text.dropdown.d-md-none
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
| Useful links
ul.dropdown-menu
li
a(href="tel:00331697720").dropdown-item
i.ci-support.text-muted.me-2
| (00) 33 169 7720
li
a(href="#").dropdown-item
i.ci-location.text-muted.me-2
| Order tracking
.topbar-text.text-nowrap.d-none.d-md-inline-block
i.ci-support
span.text-muted.me-1 Support
a(href="tel:00331697720").topbar-link
| (00) 33 169 7720
.topbar-text.d-none.d-md-inline-block Free shipping for order over $200
.ms-3.text-nowrap
a(href="#").topbar-link.me-4.d-none.d-md-inline-block
i.ci-location
| Order tracking
.topbar-text.dropdown.disable-autohide
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
img(src="path-to-image", width="20", alt="English").me-2
| Eng / $
ul.dropdown-menu.dropdown-menu-end
li.dropdown-item
select.form-select.form-select-sm
option(value="usd") $ USD
option(value="eur") € EUR
option(value="ukp") £ UKP
option(value="jpy") ¥ JPY
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image" width="20" alt="Français").me-2
| Français
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image" width="20" alt="Deutsch").me-2
| Deutsch
li
a(href="#").dropdown-item
img(src="path-to-image" width="20" alt="Italiano").me-2
| Italiano
.navbar.navbar-expand-lg.navbar-light.bg-light
.container
a(href="#").navbar-brand.d-none.d-lg-block.me-3.flex-shrink-0
img(src="path-to-logo", width="142", "DigiCart")
a(href="#").navbar-brand.d-lg-none.me-2
img(src="path-to-logo", width="74", "DigiCart")
.input-group.d-none.d-lg-flex.flex-nowrap.mx-4
input(type="text", placeholder="Search for products").form-control.rounded-end.pe-5
i.ci-search.position-absolute.top-50.end-0.translate-middle-y.text-muted.fs-base.me-3
.navbar-toolbar.d-flex.align-items-center
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
span.navbar-toggler-icon
a(href="#").navbar-tool.d-lg-none
.navbar-tool-icon-box: i.navbar-tool-icon.ci-search
a(href="#").navbar-tool.ms-1.ms-lg-0.me-n1.me-lg-2
.navbar-tool-icon-box: i.navbar-tool-icon.ci-user
.navbar-tool-text.ms-n2
small Hello, Sign in
| My Account
a(href="#").navbar-tool.ms-3
.navbar-tool-icon-box.bg-secondary
span.navbar-tool-label 4
i.navbar-tool-icon.ci-cart
.navbar-tool-text
small My Cart
| $265.00
.navbar.navbar-expand-lg.navbar-light.bg-light.mt-n2.pt-0.pb-2.px-3.px-lg-0
.container
#navbarCollapse.collapse.navbar-collapse
hr.d-lg-none.my-3
ul.navbar-nav.navbar-mega-nav.pe-lg-2.me-lg-2
li.nav-item.dropdown
a(href="#").nav-link.dropdown-toggle.ps-0
i.ci-view-grid.me-2
| Departments
ul.navbar-nav
li.nav-item
a.nav-link(href="#") Home
li.nav-item
a.nav-link(href="#") Shop
li.nav-item
a.nav-link(href="#") Pages
li.nav-item
a.nav-link(href="#") Blog
li.nav-item
a.nav-link(href="#") Components
想了解更多西瓜体育相关内容，尽在西瓜体育。
<!-- Multilevel dark navbar -->
<header>
<div class="topbar topbar-dark bg-darker">
<div class="container">
<div class="topbar-text dropdown d-md-none">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="tel:00331697720">
<i class="ci-support text-muted me-2"></i>
(00) 33 169 7720
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<i class="ci-location text-muted me-2"></i>
Order tracking
</a>
</li>
</ul>
</div>
<div class="topbar-text text-nowrap d-none d-md-inline-block">
<i class="ci-support"></i>
<span class="text-muted me-1">Support</span>
<a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
</div>
<div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
<div class="ms-3 text-nowrap">
<a class="topbar-link me-4 d-none d-md-inline-block" href="#">
<i class="ci-location"></i>
Order tracking
</a>
<div class="topbar-text dropdown disable-autohide">
<a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
<img class="me-2" width="20" src="path-to-image" alt="English"/>
Eng / $
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end border border-light">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Français"/>
Français
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
Deutsch
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
Italiano
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand d-none d-lg-block me-3 flex-shrink-0" href="#">
<img width="142" src="path-to-logo" alt="DigiCart"/>
</a>
<a class="navbar-brand d-lg-none me-2" href="#">
<img width="74" src="path-to-logo" alt="DigiCart"/>
</a>
<div class="input-group d-none d-lg-flex flex-nowrap mx-4">
<input class="form-control rounded-end pe-5" type="text" placeholder="Search for products">
<i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
</div>
<div class="navbar-toolbar d-flex align-items-center">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-tool d-lg-none" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-search"></i>
</div>
</a>
<a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#">
<div class="navbar-tool-icon-box">
<i class="navbar-tool-icon ci-user"></i>
</div>
<div class="navbar-tool-text ms-n2"><small>Hello, Sign in</small>My Account</div>
</a>
<a class="navbar-tool ms-3" href="#">
<div class="navbar-tool-icon-box bg-secondary">
<span class="navbar-tool-label">4</span>
<i class="navbar-tool-icon ci-cart"></i>
</div>
<div class="navbar-tool-text"><small>My Cart</small>$265.00</div>
</a>
</div>
</div>
</div>
<div class="navbar navbar-expand-lg navbar-dark bg-dark mt-n2 pt-0 pb-2 px-3 px-lg-0">
<div class="container">
<div class="collapse navbar-collapse" id="navbarCollapse">
<hr class="hr-light d-lg-none my-3">
<ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle ps-0" href="#">
<i class="ci-view-grid me-2"></i>
Departments
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pages</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Components</a></li>
</ul>
</div>
</div>
</div>
</header>// Multilevel dark navbar
header
.topbar.topbar-dark.bg-darker
.container
.topbar-text.dropdown.d-md-none
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
| Useful links
ul.dropdown-menu
li
a(href="tel:00331697720").dropdown-item
i.ci-support.text-muted.me-2
| (00) 33 169 7720
li
a(href="#").dropdown-item
i.ci-location.text-muted.me-2
| Order tracking
.topbar-text.text-nowrap.d-none.d-md-inline-block
i.ci-support
span.text-muted.me-1 Support
a(href="tel:00331697720").topbar-link
| (00) 33 169 7720
.topbar-text.d-none.d-md-inline-block Free shipping for order over $200
.ms-3.text-nowrap
a(href="#").topbar-link.me-4.d-none.d-md-inline-block
i.ci-location
| Order tracking
.topbar-text.dropdown.disable-autohide
a(href="#", data-bs-toggle="dropdown").topbar-link.dropdown-toggle
img(src="path-to-image", width="20", alt="English").me-2
| Eng / $
ul.dropdown-menu.dropdown-menu-dark.dropdown-menu-end.border.border-light
li.dropdown-item
select.form-select.form-select-sm
option(value="usd") $ USD
option(value="eur") € EUR
option(value="ukp") £ UKP
option(value="jpy") ¥ JPY
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image", width="20", alt="Français").me-2
| Français
li
a(href="#").dropdown-item.pb-1
img(src="path-to-image", width="20", alt="Deutsch").me-2
| Deutsch
li
a(href="#").dropdown-item
img(src="path-to-image", width="20", alt="Italiano").me-2
| Italiano
.navbar.navbar-expand-lg.navbar-dark.bg-dark
.container
a(href="#").navbar-brand.d-none.d-lg-block.me-3.flex-shrink-0
img(src="path-to-logo", width="142", alt="DigiCart")
a(href="#").navbar-brand.d-lg-none.me-2
img(src="path-to-logo", width="74", alt="DigiCart")
.input-group.d-none.d-lg-flex.flex-nowrap.mx-4
input(type="text", placeholder="Search for products").form-control.rounded-end.pe-5
i.ci-search.position-absolute.top-50.end-0.translate-middle-y.text-muted.fs-base.me-3
.navbar-toolbar.d-flex.align-items-center
button(type="button", data-bs-toggle="collapse", data-bs-target="#navbarCollapse").navbar-toggler
span.navbar-toggler-icon
a(href="#").navbar-tool.d-lg-none
.navbar-tool-icon-box: i.navbar-tool-icon.ci-search
a(href="#").navbar-tool.ms-1.ms-lg-0.me-n1.me-lg-2
.navbar-tool-icon-box: i.navbar-tool-icon.ci-user
.navbar-tool-text.ms-n2
small Hello, Sign in
| My Account
a(href="#").navbar-tool.ms-3
.navbar-tool-icon-box.bg-secondary
span.navbar-tool-label 4
i.navbar-tool-icon.ci-cart
.navbar-tool-text
small My Cart
| $265.00
.navbar.navbar-expand-lg.navbar-dark.bg-dark.mt-n2.pt-0.pb-2.px-3.px-lg-0
.container
#navbarCollapse.collapse.navbar-collapse
hr.hr-light.d-lg-none.my-3
ul.navbar-nav.navbar-mega-nav.pe-lg-2.me-lg-2
li.nav-item.dropdown
a(href="#").nav-link.dropdown-toggle.ps-0
i.ci-view-grid.me-2
| Departments
ul.navbar-nav
li.nav-item
a.nav-link(href="#") Home
li.nav-item
a.nav-link(href="#") Shop
li.nav-item
a.nav-link(href="#") Pages
li.nav-item
a.nav-link(href="#") Blog
li.nav-item
a.nav-link(href="#") Components
精选JRS直播内容，西瓜体育与你一同发现更多精彩。
<!-- Offcanvas menu example -->
<!-- Use .navbar-expand-* classes to create a dynamic and flexible navigation sidebar -->
<header class="navbar navbar-light shadow-sm">
<div class="container">
<!-- Brand -->
<a class="navbar-brand d-none d-lg-block order-lg-1" href="#">
<img width="142" src="path-to-logo" alt="DigiCart"/>
</a>
<a class="navbar-brand d-lg-none me-2" href="#">
<img width="74" src="path-to-logo" alt="DigiCart"/>
</a>
<!-- Toolbar -->
<div class="navbar-toolbar d-flex align-items-center order-lg-3">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Offcanvas menu -->
<div class="offcanvas offcanvas-end me-auto order-lg-2" id="navbarOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Menu</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action link</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><a class="dropdown-item" href="#">Yet another link</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</header>// Offcanvas menu example
// Use .navbar-expand-* classes to create a dynamic and flexible navigation sidebar
header.navbar.navbar-light.shadow-sm
.container
// Brand
a(href="#").navbar-brand.d-none.d-lg-block.order-lg-1
img(src="path-to-logo" width="142" alt="DigiCart")
a(href="#").navbar-brand.d-lg-none.me-2
img(src="path-to-logo" width="74" alt="DigiCart")
// Toolbar
.navbar-toolbar.d-flex.align-items-center.order-lg-3
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#navbarOffcanvas").navbar-toggler
span.navbar-toggler-icon
// Offcanvas menu
#navbarOffcanvas.collapse.navbar-collapse.me-auto.order-lg-2
.offcanvas-header
h5.offcanvas-title Menu
button(type="button", data-bs-dismiss="offcanvas", aria-label="Close").btn-close.text-reset
.offcanvas-body
ul.navbar-nav
li.nav-item.active
a.nav-link(href="#") Home
li.nav-item
a.nav-link(href="#") Link
li.nav-item.dropdown
a.nav-link.dropdown-toggle(href="#", data-bs-toggle="dropdown" data-bs-auto-close="outside") Dropdown
ul.dropdown-menu
li
a.dropdown-item(href="#") Action link
li.dropdown
a(href="#", data-bs-toggle="dropdown").dropdown-item.dropdown-toggle
| Dropdown
ul.dropdown-menu
li
a.dropdown-item(href="#") Action link
li
a.dropdown-item(href="#") Another action
li
a.dropdown-item(href="#") Something else here
li
a.dropdown-item(href="#") Yet another link
li
a.dropdown-item(href="#") Another action
li.dropdown-divider
li
a.dropdown-item(href="#") Something else here
li.nav-item
a.nav-link.disabled(href="#", tabindex="-1", aria-disabled="true") Disabled