西树架构| 西树工作室 | 西树课堂

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 18|回复: 0

05.在Document中,引入全局cdn文件bootstrapUI框架样式

[复制链接]

6

主题

6

帖子

50

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
50
发表于 2019-11-25 00:12:44 | 显示全部楼层 |阅读模式

05.在Document中,引入全局cdn文件bootstrapUI框架样式

增加了_document.js 文件

引入了bootstrapUI的css 样式,使用里面nav组件

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="stylesheet" href="https://s.shudong.wang/4-1-3-bootstrap.min.css"/>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

增加个了nav导航组件

import React, { Component } from 'react'
export default class Nav extends Component {
  render () {
    return (
      <div>
        <ul className="nav">
          <li className="nav-item">
            <a className="nav-link active" href="/">home</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="/blog">blog</a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="/about">about</a>
          </li>
          <li className="nav-item">
            <a className="nav-link disabled" href="#" >Disabled</a>
          </li>
        </ul>
      </div>
    )
  }
}

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|西树架构

GMT+8, 2019-12-12 21:53 , Processed in 0.033736 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表