fullscreen
vue
<template>
<Navbar
expand
background-color="white"
>
<Container>
<examples-snippets-navbar-demo-navbar-content-fullscreen />
</Container>
</Navbar>
<Modal id="navModalFullscreen">
<ModalDialog fullscreen>
<ModalContent
background-color="dark"
:opacity="75"
>
<ModalHeader>
<CloseButton
dismiss="modal"
white
/>
</ModalHeader>
<ModalBody>
<Container>
<Row
gutter="5"
margin="y-auto"
text-color="light"
>
<Col
col="lg-6"
>
<b-div headings="2">
Bootstrap
</b-div>
<p>Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.</p>
<Anchor
button
color="light"
to="/lang-en"
icon="bi-chevron-right"
icon-end
>
Learn more
</Anchor>
</Col>
<Col
col="lg-6"
padding="3"
>
<ViewState
v-slot="navs"
src="app-config://usebootstrap/navigations/default"
>
<Anchor
v-for="item in navs.data"
:key="item.name"
header
dynamic-route
:to="item.children[0].path"
link-underline="0"
color="light"
>
<b-h4
headings="2"
margin="y-4"
>
{{ item.name }}
</b-h4>
</Anchor>
</ViewState>
</Col>
</Row>
</Container>
</ModalBody>
</ModalContent>
</ModalDialog>
</Modal>
</template>
vue
<template>
<NavbarBrand
href="/"
aria-label="use bootstrap"
>
<img
src="~/assets/img/logo/logo1.svg"
height="30"
alt="Logo"
/>
</NavbarBrand>
<NavbarToggler />
<NavbarCollapse>
<NavbarNavList margin="e-auto">
<NavItemDropdown>
<NavItemDropdownToggle>
Bootstrap
</NavItemDropdownToggle>
<DropdownMenu
mega
relative-width="100"
background-color="transparent"
border-subtractive
class="animated animated-fade-in"
>
<Container>
<Row
background-color="white"
shadow
gutter="0"
>
<Col
col="lg-6"
>
<Background
background-color="primary-subtle"
overlay-color="pink-500"
overlay-alpha="0.5"
z="1"
padding="5"
relative-height="100"
>
<b-div headings="2">
Bootstrap
</b-div>
<p>Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.</p>
<Anchor
button
color="primary"
to="/lang-en"
icon="bi-chevron-right"
icon-end
>
Learn more
</Anchor>
</Background>
</Col>
<Col
col="lg-6"
padding="3"
>
<ViewState
v-slot="navs"
src="app-config://test"
>
<DropdownItem
v-for="item in navs.data"
:key="item.name"
header
dynamic-route
:to="item.children[0].path"
>
{{ item.name }}
</DropdownItem>
</ViewState>
</Col>
</Row>
</Container>
</DropdownMenu>
</NavItemDropdown>
<NavItemDropdown>
<NavItemDropdownToggle>
Extend
</NavItemDropdownToggle>
<DropdownMenu
mega
relative-width="100"
background-color="transparent"
border-subtractive
class="animated animated-fade-in"
>
<Container>
<Row
background-color="white"
shadow
gutter="0"
>
<Col
col="lg-6"
>
<Background
background-color="primary-subtle"
overlay-color="pink-500"
overlay-alpha="0.5"
relative-height="100"
z="1"
padding="5"
>
<b-div headings="2">
Extend
</b-div>
<p>use-bootstrap builds complete applications by adding features that are not included in Bootstrap.</p>
<Anchor
button
color="primary"
to="/lang-en/extend"
icon="bi-chevron-right"
icon-end
>
Learn more
</Anchor>
</Background>
</Col>
<Col
col="lg-6"
padding="3"
>
<ViewState
v-slot="navs"
src="app-config://usebootstrap/navigations/extend"
>
<DropdownItem
v-for="item in navs.data"
:key="item.name"
header
dynamic-route
:to="item.children[0].path"
>
{{ item.name }}
</DropdownItem>
</ViewState>
</Col>
</Row>
</Container>
</DropdownMenu>
</NavItemDropdown>
<NavItemDropdown>
<NavItemDropdownToggle>
Integration
</NavItemDropdownToggle>
<DropdownMenu
mega
relative-width="100"
background-color="transparent"
border-subtractive
class="animated animated-fade-in"
>
<Container>
<Row
background-color="white"
shadow
gutter="0"
>
<Col
col="lg-6"
>
<Background
background-color="primary-subtle"
overlay-color="pink-500"
overlay-alpha="0.5"
relative-height="100"
z="1"
padding="5"
>
<b-div headings="2">
Integration
</b-div>
<p>use-bootstrap provides powerful components for integrating server and client data.</p>
<Anchor
button
color="primary"
to="/lang-en/integration"
icon="bi-chevron-right"
icon-end
>
Learn more
</Anchor>
</Background>
</Col>
<Col
col="lg-6"
padding="3"
>
<ViewState
v-slot="navs"
src="app-config://usebootstrap/navigations/integration"
>
<DropdownItem
v-for="item in navs.data"
:key="item.name"
header
dynamic-route
:to="item.children[0].path"
>
{{ item.name }}
</DropdownItem>
</ViewState>
</Col>
</Row>
</Container>
</DropdownMenu>
</NavItemDropdown>
<NavItemDropdown>
<NavItemDropdownToggle>
Snippets
</NavItemDropdownToggle>
<DropdownMenu
mega
relative-width="100"
background-color="transparent"
border-subtractive
class="animated animated-fade-in"
>
<Container>
<Row
background-color="white"
shadow
gutter="0"
>
<Col
col="lg-6"
>
<Background
background-color="primary-subtle"
overlay-color="pink-500"
overlay-alpha="0.5"
relative-height="100"
z="1"
padding="5"
>
<b-div headings="2">
Snippets
</b-div>
<p>use-bootstrap builds complete applications by adding features that are not included in Bootstrap.</p>
<Anchor
button
color="primary"
to="/snippets"
icon="bi-chevron-right"
icon-end
>
Learn more
</Anchor>
</Background>
</Col>
<Col
col="lg-6"
padding="3"
>
<ViewState
v-slot="navs"
src="app-config://usebootstrap/navigations/snippets"
>
<DropdownItem
v-for="item in navs.data"
:key="item.name"
header
dynamic-route
:to="item.children[0].path"
>
{{ item.name }}
</DropdownItem>
</ViewState>
</Col>
</Row>
</Container>
</DropdownMenu>
</NavItemDropdown>
<NavItem>
<NavLink
to="/examples"
padding="x-0 x-lg-2"
>
Examples
</NavLink>
</NavItem>
</NavbarNavList>
<NavbarNavList
flex-direction="row"
flex-wrap="wrap"
margin="s-md-auto"
>
<NavItem
padding="y-2"
col="12 lg-auto"
>
<Vr
display="none lg-flex"
relative-height="100"
margin="x-lg-2"
text-color="black-50"
/>
<hr class="d-lg-none my-2 text-black-50" />
</NavItem>
<NavItem col="6 lg-auto">
<NavLink
to="https://stackblitz.com/~/github.com/simplise/use-bootstrap-starter?file=app.vue"
icon="simple-icons:stackblitz"
/>
</NavItem>
<NavItem col="6 lg-auto">
<NavLink
to="https://github.com/simplise/use-bootstrap"
icon="bi:github"
/>
</NavItem>
</NavbarNavList>
</NavbarCollapse>
</template>
Some content
Some content