相关文章推荐
侠义非凡的吐司  ·  spring websocket ...·  2 年前    · 

展示导航信息

  • 设置导航之前,我们想要给他一个好看的样式

  • 导航条 https://v4.bootcss.com/docs/components/navbar/

  • 复制Supported content的内容

  • 来到 base.html的body部分

    #<body>
    	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">  # light --> dark 背景颜色更深
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    	<div class='container'> # CSS容器
    		{% block content %}
    		{% endblock %}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbXpsr50-1592669235743)()]

  • 删掉用不到的标签,更改标签名字,只留下 Navbar Link (之间在上面删掉,在对应位置更改即可) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ne3H432G-1592669235745)()]

  • https://api.github.com github直接提供的接口地址,这里有很多,我们随便进入一个 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OQ8sxDnx-1592669235747)()]
    - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8CMXXe1z-1592669235750)()]
    - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gBFHYVlv-1592669235753)()]
    - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qh2QkKXX-1592669235755)()]

  • 你也可以获取所有的用户,点击 list user [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9qbeSCj-1592669235756)()]
    - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6OAxLc2A-1592669235757)()]

  • 还有很多接口 https://jsonplaceholder.typicode.com [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传()]

接口请求和解析