Help us understand the problem. What is going on with this article?

React-Bootstrapで色々使ってみる -Navbar-

React-Bootstrapを使えるようにするでboot-strapが使えるようになったので、色々触ってみる。今回はNavbar。
ほぼ本家のコピペなので、詳しくは本家参照。

Navbar

ヘッダーにあたる部分。多分全アプリで必要だと思う。

とりあえずコピペしてみる。

App.js
import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import LOGO from './logo.svg';

class App extends Component {
    render() {
        return (
            <Navbar bg="dark" variant="dark">
                <img
                    src={LOGO}
                    width="30"
                    height="30"
                    alt="React Bootstrap logo"
                />
                <Nav className="mr-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#features">Features</Nav.Link>
                    <Nav.Link href="#pricing">Pricing</Nav.Link>
                </Nav>
            </Navbar >
        );
    }
}
export default App;

↓実行結果
スクリーンショット 2019-12-18 23.39.36.png

これだとスマホとか画面が小さくなったときに選択肢が多いと、画面崩れが起きてしまう。悲しい。
スクリーンショット 2019-12-18 23.43.39.png



スマホとかでレスポンシブに動かしたいんや!!というときは、
下記のように書くといい感じにレスポンシブにしてくれるっぽい。

app.js
import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import LOGO from './logo.svg';

class App extends Component {
    render() {
        return (
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand href="#home">
                    <img
                        src={LOGO}
                        width="30"
                        height="30"
                        alt="React Bootstrap logo"
                    />
                    SampleApp
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link href="#home">Home</Nav.Link>
                        <Nav.Link href="#features">Features</Nav.Link>
                        <Nav.Link href="#pricing">Pricing</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar >
        );
    }
}
export default App;

スクリーンショット 2019-12-18 23.51.20.png

expand="true"にするとずっとハンバーガーメニューが表示されるようになる。
で囲った部分は、collapseされずに表示される

公式が用意していない色への変更とかはそのうち書く。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした