Twitter bootstrap 样式化组件mp4样式化_Twitter Bootstrap_Reactjs_Styled Components

Twitter bootstrap 样式化组件mp4样式化

twitter-bootstrap reactjs

Twitter bootstrap 样式化组件mp4样式化,twitter-bootstrap,reactjs,styled-components,Twitter Bootstrap,Reactjs,Styled Components,我一直在学习React.js，我在React、样式化组件和引导之间的一些样式设置上遇到了问题。理想的目标是在一行中有3个gif，都有一个居中的按钮，并且它们之间没有间距。我希望每个gif都有100vh 以下内容应包含所有需要了解的内容反应文件： import React from 'react'; import {Bootstrap, Grid, Row, Col} from 'react-bootstrap'; import styled from 'styled-components';

我一直在学习React.js，我在React、样式化组件和引导之间的一些样式设置上遇到了问题。理想的目标是在一行中有3个gif，都有一个居中的按钮，并且它们之间没有间距。我希望每个gif都有100vh

以下内容应包含所有需要了解的内容

反应文件：

import React from 'react';
import {Bootstrap, Grid, Row, Col} from 'react-bootstrap';
import styled from 'styled-components';

const Gif = styled.img`
height: 100vh;
width: 100%;
`;

const Mp4 = styled.video`
    height: '100vh',
    width: '100%'
`;

const workButton = {
    left: '33%',
    top: '40%'
}

const schoolButton = {
    left: '33%',
    top: '40%'
}

const aboutButton = {
    left: '22%',
    top: '40%'
}

const Button = styled.button`
    border-radius: 3px;
    background: transparent;
    color: palevioletred;
    border: 2px solid palevioletred;
    position: absolute;
    font-size: 50px;
`;

class WorkThumbnail extends React.Component {
    constructor(props) {
        super(props);
        this.state = { }
    }


    showBodyClick(value)  {
        this.props.getClick(value); 
    }

    render() {
        return (
            <div>
                <Mp4 src="./app/Components/images/work.mp4" loop autoPlay></Mp4>
                <Button style={workButton} onClick={this.showBodyClick.bind(this, 3)}>Work</Button>
            </div>
        );
    }  
}

class SchoolThumbnail extends React.Component {
    constructor(props) {
        super(props);
        this.state = { }
    }

showBodyClick(value) {
    this.props.getClick(value);
}

render() {
    return (
        <div>
            <Gif src={'./app/Components/images/tracer-ult.gif'}/>
            <Button style={schoolButton} onClick={this.showBodyClick.bind(this, 2)}>School</Button>
        </div>
        );
    }  
}

class AboutThumbnail extends React.Component {
    constructor(props) {
    super(props);
    this.state = { }
    }

showBodyClick(value) {
    this.props.getClick(value);
}

render() {
    return (
        <div>
            <Gif src={'./app/Components/images/tracer-ult.gif'}/>
            <Button style={aboutButton} onClick={this.showBodyClick.bind(this, 1)}>About Me</Button>
        </div>
        );
    }  
}

export { WorkThumbnail, AboutThumbnail, SchoolThumbnail };

索引文件调用“React”文件，该文件实际上名为thumbnail.js

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import {Bootstrap, Grid, Row, Col, Button} from 'react-bootstrap';
import {WorkThumbnail, AboutThumbnail, SchoolThumbnail} from './Components/Thumbnail';
import { Body } from './Components/Body';
import styled from 'styled-components';


const noPadding = {
    paddingLeft: '0px',
    paddingRight: '0px',
    marginLeft: '0px',
    marginRight: '0px',
    textAlign: 'center'
}

export class Layout extends React.Component {
    constructor(){
        super();
        this.state = {
            show: 3
        }
    }

    getClick(value){
        this.setState({
            show: value
        });
    }

    render() {
        return (
            <div>

                    <div className="col-lg-4 col-md-4 col-sm-4 text-center" style ={noPadding}>
                        <WorkThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>

                    <div className="col-lg-4 col-md-4 col-sm-4" style ={noPadding}>
                        <AboutThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>  

                    <div className="col-lg-4 col-md-4 col-sm-4" style ={noPadding}>
                        <SchoolThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>


                <div>
                    <hr />
                    <Body show = {this.state.show}/>
                </div>
            </div>
        );
    }  
}



ReactDOM.render(
  <Layout />,
  document.getElementById('app')
);

从“React”导入React；
从“react dom”导入react dom；
从“react Bootstrap”导入{Bootstrap，Grid，Row，Col，Button}；
从“./Components/Thumbnail”导入{WorkThumbnail，AboutThumbnail，SchoolThumbnail}；
从“./Components/Body”导入{Body}；
从“样式化组件”导入样式化；
常数noPadding={
左填充：“0px”，
填充右侧：“0px”，
marginLeft:'0px'，
marginRight:“0px”，
textAlign:“中心”
}
导出类布局扩展React.Component{
构造函数（）{
超级（）；
此.state={
节目：3
}
}
getClick（值）{
这是我的国家({
显示：价值
});
}
render（）{
返回(

);
}  
}
ReactDOM.render(
,
document.getElementById（'app'）
);

我知道这对有经验的开发人员来说可能很糟糕。我对网络开发还很陌生，所以也欢迎任何指点

import React from 'react';
import ReactDOM from 'react-dom';
import {Bootstrap, Grid, Row, Col, Button} from 'react-bootstrap';
import {WorkThumbnail, AboutThumbnail, SchoolThumbnail} from './Components/Thumbnail';
import { Body } from './Components/Body';
import styled from 'styled-components';


const noPadding = {
    paddingLeft: '0px',
    paddingRight: '0px',
    marginLeft: '0px',
    marginRight: '0px',
    textAlign: 'center'
}

export class Layout extends React.Component {
    constructor(){
        super();
        this.state = {
            show: 3
        }
    }

    getClick(value){
        this.setState({
            show: value
        });
    }

    render() {
        return (
            <div>

                    <div className="col-lg-4 col-md-4 col-sm-4 text-center" style ={noPadding}>
                        <WorkThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>

                    <div className="col-lg-4 col-md-4 col-sm-4" style ={noPadding}>
                        <AboutThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>  

                    <div className="col-lg-4 col-md-4 col-sm-4" style ={noPadding}>
                        <SchoolThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>


                <div>
                    <hr />
                    <Body show = {this.state.show}/>
                </div>
            </div>
        );
    }  
}



ReactDOM.render(
  <Layout />,
  document.getElementById('app')
);