Bootstrap常用样式以及使用(登录)


Bootstrap常用样式以及使用(登录)


一:登录Bootstrap官网:https://www.bootcss.com/
二:在起步——》登录页面——》右键审查元素——》获取到body(见下图)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511125646584.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
三:复制到相应的页面中,然后格式化
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511130016572.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511130040192.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
四:启动项目,但是没有样式
在这里插入图片描述
五:添加样式(映引入css文件,或者直接下载)
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511131014697.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
六:有了一部分样式如下图:
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511131233824.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
七:怎样获取全部样式(右键查看审查元素——》获取相应的文件),然后保存下来
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511131622855.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
八:在django中存放静态文件

  1. 在settings中配置
    ![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511150601641.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
  2. 创建文件夹,名为static里面存放js,cs,imgs,还有插件plugins将Bootstrap存放到plugins中![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511151301765.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
  3. 使用里面的样式![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511152322890.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)
  4. 将静态文件放入到相应的文件夹中使用css以及Bootstrap用link标签,如: `
  5. 重启Django,结果如图![在这里插入图片描述]( https://img-blog.csdnimg.cn/20200511154526266.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MDk2OTE2,size_16,color_FFFFFF,t_70)`
posted @ 2020-06-05 10:25  知秋一叶9527  阅读(800)  评论(0)    收藏  举报