Hướng dẫn react-bootstrap navbar not responsive - thanh điều hướng Reac-bootstrap không phản hồi

Question

i am trying to use React Bootstrap Navbar component. However, after installing bootstrap and pasting the example code, the navbar doesn't seem to load. i can't seem to wrap my head around how this doesn't work. any help will be greatly appreciated! my app.js code is as follows:

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

import 'regenerator-runtime/runtime';
import React from 'react';
import './assets/global.css';
import { Container, Nav, Navbar, NavDropdown} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    
      
        React-Bootstrap
        
        
          
            Features
            Pricing
            
              Action
              
                Another action
              
              Something
              
              
                Separated link
              
            
          
          
            More deets
            
              Dank memes
            
          
        
      
    ,
  );
}

global.css

body {
  margin: 0;
}

Hướng dẫn react-bootstrap navbar not responsive - thanh điều hướng Reac-bootstrap không phản hồ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
```
body {
  margin: 0;
}
```
1
```
body {
  margin: 0;
}
```
1 được cài đặt rất dễ dàng bằng câu lệnh
```
body {
  margin: 0;
}
```
3 hoặc thêm vào file
```
body {
  margin: 0;
}
```
4 thư viện:

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

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

body {
  margin: 0;
}

5

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

body {
  margin: 0;
}

6 và

body {
  margin: 0;
}

7:

Sử dụng thẻ

body {
  margin: 0;
}

8 dưới dạng

body {
  margin: 0;
}

6 hoặc

body {
  margin: 0;
}

7 bằng thuộc tính

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

1 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

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

2 ở thuộc tính

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

3

Có thể disable các

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

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

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

5 trong thẻ

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

6

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
```
{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}
```
7 trong thẻ
```
body {
  margin: 0;
}
```
8

Với

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

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

body {
  margin: 0;
}

8 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>

1

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

<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 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>

3 ta có thể 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>

4 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

<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 cách 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 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

<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>

7 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>

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

Thẻ

body {
  margin: 0;
}

8 trong

<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 được dùng như phần trên.

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>

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

<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, ta có thể dùng 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>

3 để customize cho button menu trên mobile và dùng 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 để customize cho logo và link đến home.

Khi không có 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>

5, 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ẻ

<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

<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 như ví dụ trên, các items trong thẻ

body {
  margin: 0;
}

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

<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 khi chuyển sang chế độ mobile.

Khi dùng 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>

5, tất các các items còn lại được bao 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>

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

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

9 bằng 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>

3 để tạo các items được căn lề phải và

  <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 để 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ẻ

  <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 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

body {
  margin: 0;
}

1 để 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

body {
  margin: 0;
}

1. 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

body {
  margin: 0;
}

1 của

  <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>

0 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

Hướng dẫn react-bootstrap navbar not responsive - thanh điều hướng Reac-bootstrap không phản hồi

I. Tổng quan về Navigation

II. Cài đặt

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

1. Sử dụng navs dưới dạng body { margin: 0; } 6 và body { margin: 0; } 7:

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

1. Sử dụng navs dưới dạng
`body { margin: 0; }`
6 và
`body { margin: 0; }`
7: