Hướng dẫn collapse react-bootstrap - thu gọn react-bootstrap

Question

Nội dung chính Show

I. Tổng quan về Navigation
II. Cài đặt
III. Các cách sử dụng Navigation
V. Kết luận
Cảm ơn đã theo dõi

Đã đăng vào thg 3 27, 2017 3:33 SA 3 phút đọc 3 phút đọc

Navigation là một meta component của bootstrap hỗ trợ tạo một menu tiêu đề điều hướng trong app hoặc website.
Navigation được sử dụng rất dễ dàng bằng cách dùng camelCase thay cho css class trong tag.

II. Cài đặt

Navigation là một component của bootstrap, vì vậy để sử dụng Navigation chỉ cần cài đặt react-bootstrap

react-bootstrap được cài đặt rất dễ dàng bằng câu lệnh

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

1 hoặc thêm vào file

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

2 thư viện:

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

trước khi chạy câu lệnh

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

3

1. Sử dụng navs dưới dạng

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

4 và

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

5:

Sử dụng thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6 dưới dạng

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

4 hoặc

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

5 bằng thuộc tính

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

9 với cấu trúc:

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

Các action được customize trong function

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

0 ở thuộc tính

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

1

Có thể disable các

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

2 bằng cách thêm thuộc tính

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

3 trong thẻ

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

4

Ta cũng có thể căn chỉnh các tabs thành dạng full-width bằng các thêm vào thuộc tính

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

5 trong thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6

Với

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

7, ta dễ dàng style các tab theo chiều dọc bằng các thêm vào thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6 thuộc tính

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

9

Ngoài ra, với các tab có thêm

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

0 dưới dạng

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

1 ta có thể sử dụng thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

2 với cấu trúc:

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

2. Sử dụng Navbars để tạo các header menu:

Ta có thể dễ dàng tạo một

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

3 bằng cách dùng thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

4 với cấu trúc:

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

Có thể thêm thuộc tính

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

5 trong thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

6 để chuyển màu menu sang màu đen.

Thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6 trong

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

8 được dùng như phần trên.

Với

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

9 để hiển thị logo và link đến trang home của web hoặc app. Trong

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

9, ta có thể dùng thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Branda>
      Navbar.Brand>
      <Navbar.Toggle />
    Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">LinkNavItem>
        <NavItem eventKey={2} href="#">LinkNavItem>
      Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link RightNavItem>
        <NavItem eventKey={2} href="#">Link RightNavItem>
      Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        FormGroup>
        <Button type="submit">SubmitButton>
      Navbar.Form>
    Navbar.Collapse>
  Navbar>

1 để customize cho button menu trên mobile và dùng thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Branda>
      Navbar.Brand>
      <Navbar.Toggle />
    Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">LinkNavItem>
        <NavItem eventKey={2} href="#">LinkNavItem>
      Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link RightNavItem>
        <NavItem eventKey={2} href="#">Link RightNavItem>
      Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        FormGroup>
        <Button type="submit">SubmitButton>
      Navbar.Form>
    Navbar.Collapse>
  Navbar>

2 để customize cho logo và link đến home.

Khi không có thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Branda>
      Navbar.Brand>
      <Navbar.Toggle />
    Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">LinkNavItem>
        <NavItem eventKey={2} href="#">LinkNavItem>
      Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link RightNavItem>
        <NavItem eventKey={2} href="#">Link RightNavItem>
      Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        FormGroup>
        <Button type="submit">SubmitButton>
      Navbar.Form>
    Navbar.Collapse>
  Navbar>

3, các items trong menu sẽ không thay đổi khi chuyển sang chế độ mobile, ngược lại, khi ta thêm thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Branda>
      Navbar.Brand>
      <Navbar.Toggle />
    Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">LinkNavItem>
        <NavItem eventKey={2} href="#">LinkNavItem>
      Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link RightNavItem>
        <NavItem eventKey={2} href="#">Link RightNavItem>
      Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        FormGroup>
        <Button type="submit">SubmitButton>
      Navbar.Form>
    Navbar.Collapse>
  Navbar>

3 trong

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrapa>
      Navbar.Brand>
    Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">LinkNavItem>
      <NavItem eventKey={2} href="#">LinkNavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>ActionMenuItem>
        <MenuItem eventKey={3.2}>Another actionMenuItem>
        <MenuItem eventKey={3.3}>Something else hereMenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated linkMenuItem>
      NavDropdown>
    Nav>
  Navbar>

9 như ví dụ trên, các items trong thẻ

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 contentNavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 contentNavItem>
  <NavItem eventKey={3} disabled>NavItem 3 contentNavItem>
Nav>

6 sẽ được thu gọn vào 1

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Branda>
      Navbar.Brand>
      <Navbar.Toggle />
    Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">LinkNavItem>
        <NavItem eventKey={2} href="#">LinkNavItem>
      Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link RightNavItem>
        <NavItem eventKey={2} href="#">Link RightNavItem>
      Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        FormGroup>
        <Button type="submit">SubmitButton>
      Navbar.Form>
    Navbar.Collapse>
  Navbar>

7 khi chuyển sang chế độ mobile.

Khi dùng thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Branda>
      Navbar.Brand>
      <Navbar.Toggle />
    Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">LinkNavItem>
        <NavItem eventKey={2} href="#">LinkNavItem>
      Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link RightNavItem>
        <NavItem eventKey={2} href="#">Link RightNavItem>
      Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        FormGroup>
        <Button type="submit">SubmitButton>
      Navbar.Form>
    Navbar.Collapse>
  Navbar>

3, tất các các items còn lại được bao trong thẻ

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Branda>
      Navbar.Brand>
      <Navbar.Toggle />
    Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">LinkNavItem>
        <NavItem eventKey={2} href="#">LinkNavItem>
      Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link RightNavItem>
        <NavItem eventKey={2} href="#">Link RightNavItem>
      Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        FormGroup>
        <Button type="submit">SubmitButton>
      Navbar.Form>
    Navbar.Collapse>
  Navbar>

9. Trong đó, ta có thể customize các

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">ActionMenuItem>
  <MenuItem eventKey="4.2">Another actionMenuItem>
  <MenuItem eventKey="4.3">Something else hereMenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated linkMenuItem>
NavDropdown>

7 bằng thuộc tính Navigation1 để tạo các items được căn lề phải và Navigation2 để căn lề trái.

Ngoài các item dưới dạng link, ta cũng có thể tạo các form trong header menu bằng thẻ Navigation3 với cấu trúc:

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Branda>
      Navbar.Brand>
      <Navbar.Toggle />
    Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">LinkNavItem>
        <NavItem eventKey={2} href="#">LinkNavItem>
      Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link RightNavItem>
        <NavItem eventKey={2} href="#">Link RightNavItem>
      Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        FormGroup>
        <Button type="submit">SubmitButton>
      Navbar.Form>
    Navbar.Collapse>
  Navbar>

V. Kết luận

Trên đây là những ví dụ cơ bản nhất trong việc sử dụng Navigation của react-bootstrap để tạo ra các menu điều hướng trang. Hi vọng bài viết có thể cung cấp cách nhìn tổng quan, dễ hiểu nhất cho những bạn mới tiếp xúc với các components đơn giản của thư viện react-bootstrap. Chúng ta có thể tìm hiểu rất nhiều components khác rất tiện dụng trong thư viện react-bootstrap của Navigation8 qua trang chính thức: https://react-bootstrap.github.io/components.html Tài liệu tham khảo: https://react-bootstrap.github.io/components.html#navigation

Cảm ơn đã theo dõi

programming bootstrap Input group react-bootstrap Import bootstrap React Navbar Reactjs example Alert react-bootstrap Form react-bootstrap Button react bootstrap React-Bootstrap netlify

Hướng dẫn collapse react-bootstrap - thu gọn react-bootstrap

I. Tổng quan về Navigation

II. Cài đặt

III. Các cách sử dụng Navigation

2. Sử dụng Navbars để tạo các header menu:

V. Kết luận

Cảm ơn đã theo dõi

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội