Django + Bootstrap 创建blog
Django + Bootstrap 创建blog
RabbitZack 发表于2年前
Django + Bootstrap 创建blog
  • 发表于 2年前
  • 阅读 41
  • 收藏 0
  • 点赞 1
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 记录使用Django和Bootstrap的过程

首先是制作home,也就是网站的首页。

由于Djangotemplates可以包含基础(暂时先跳过)。

简单来讲就是base.html中有navibar、content和footer等block,由于每个页面都有导栏和尾栏,所以使用{% include %}包含以便复用navibar和footer。

 

简单记录怎么在html中使用bootstrap的导航栏自己不知道,查到的点:

1)bootstrap有专门的导航栏实例,直接copy和paste即可(详见http://v3.bootcss.com/components/#navbar)。

2)如果使用响应式下拉导航条,需要在script标签加jQuery的js(需在bootstrap的js前)。

3)如果使用的标签不是nav而是div需要制定role是navigation。

4)增加一层div为container可以是导航栏有居中的效果

5)增加注册、登陆按钮,可以新建一个navbar-form,然后再在里面建立a标签,例如:

<form class="navbar-form navbar-right">
        <a class="btn btn-primary" href="https://beta.umbreo.com/login">Log In</a>
        <a class="btn btn-primary" href="https://beta.umbreo.com/signup">Sign Up</a>
    </form>

6)靠右,如果有多个class有.navbar-right,则前面的在后面的右边。

 

ps:补充css学到的一个水平居中的知识点:

    如果是块元素居中,设置style为

width: auto; display: table; margin-left: auto; margin-right: auto

    如果是行内元素,使用

text-align: center

就可以了

遗留问题:

1)品牌图标嵌入导航栏,导航条不居中。

2)pycharm总是不识别utf-8的中文,改了配置还不行。

 

项目发到github的远程目录上了,改天再看弄到自己的目录下吧

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 1
码字总数 398
×
RabbitZack
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: