- ANT DESIGH
- 蚂蚁金服使用
$ npm install antd --save
- 详细信息请查看官网
- 下载头部图标ICONFINDER
- 采用栅格与FLEX布局
- 头部组件采用
Menu控件，子元素为Menu.Item
- 移动端响应式布局，采用
react-response，npm一下。
import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, hashHistory} from 'react-router';
import {Button} from 'antd';
import 'antd/dist/antd.css';
import PCIndex from './components/pc_index';
import MBIndex from './components/mb_index';
import MediaQuery from 'react-responsive';
export default class Root extends React.Component {
render() {
return (
<div>
<MediaQuery query='(min-device-width:1224px)'>
<PCIndex/>
</MediaQuery>
<MediaQuery query='(max-device-width:1224px)'>
<MBIndex />
</MediaQuery>
</div>
);
};
}
ReactDOM.render(
<Root/>, document.getElementById('mainContainer'));
- 在
index.html中记得书写✍️meta标签，帮助识别响应式布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
import React from 'react';
import {Row,Col} from 'antd';
export default class PCFooter extends React.Component {
render(){
return(
<footer>
<Row>
<Col span={2}></Col>
<Col span={20}>
© 2016 ReactNews. All Right Reserved.
</Col>
<Col span={2}></Col>
</Row>
</footer>
)
}
}import React from 'react';
import {Row,Col} from 'antd';
export default class MBFooter extends React.Component {
render(){
return(
<footer>
<Row>
<Col span={2}></Col>
<Col span={20}>
© 2016 ReactNews. All Right Reserved.
</Col>
<Col span={2}></Col>
</Row>
</footer>
)
}
}
- 采用
fech框架进行开发
npm install fech
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent