Gist网站实现(6)-使用BootStrap优化网站样式

BootStrap

BootStrap是一个前端组件库，包括一系列CSS和jQuery实现的组件，非常流行。

• 通过Reboot清理统一了各个浏览器的样式
• 通过Layout提供了一个支持复杂布局的网格结构
• 通过Component提供了一系列常用的增强组件
• 通过其生态提供了大量风格各异的主题

优化网站样式

选择网站主题

在BootStrap网站主题页面选择主题，在选择主题的download下拉按钮下，右键点击bootstrap.min.css选择复制链接。

导入BootStrap

由于Express使用的是pug(原jade)模版，故需要将html转换为pug(jade)语法。可使用在线转换网站，进行转换。

把 CSS 放到 head 标签里边，而 JS 放到 body 结束之前。 这样页面在载入时不会丢失样式，又不会因为 JS 文件延迟页面显示速度。

<!--CSS-->
link(rel='stylesheet', href='https://bootswatch.com/4/cyborg/bootstrap.min.css')
<!--JavaScript-->
script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', integrity='sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6', crossorigin='anonymous')

修改相关样式样式

1. 点击模版页面的preview按钮进入模版组件样式页面。
   

2. 选择对应的样式，在右边点击<>按钮复制html代码。通过在线转换网站进行pug(jade)语法转换
   
   

3. 将转换后的语法放在页面对应位置。
   

4. 进行样式调整

最终效果

1. 主页及登陆页面
   
   
   

2. 我的代码页面
   

3. 修改代码页面
   

4. 查看代码详情