一、首先引入相对应的css，js文件，包括bs的以及个人自己的。

二、头部内容及其样式

image.png
分析：1.在写html结构的时候应该从最复杂的开始（尤其是某些元素是隐藏的或者说是有响应式），这里的实际情形就是左面的按钮在middle屏幕一下才显示，而且与下面的三个内容是形成联动的。
2.主要结构有三个：按钮区域（具有响应式），navbar-brand区域（里面有一张图片以及四个文字），第三个区域是与按钮的联动区域。
3.细节点：渡一教育四个文字是需要上下跳动的，而且具有动画的延迟；而在按钮区域在hover的情况下需要正向旋转45deg以及逆向旋转45deg。
4.细节点：导航区域的背景图片是渐变背景，还要自定义类名之后加入背景图片。
image.png

三、leftCon内容的思路和细节

image.png
细节点：1.由于下面内容需要占据的是通栏，所以说在最外层的结构是container-fluid，然后自定义类名main来写自己想要添加的样式。
2.由于下面的内容是一个选项卡，所以说要写出tab相对应的选项卡的结构。
image.png

四、rightCon的思路和细节

4.1 bs中关于table表的固定结构的应用

image.png
image.png

4.2 bs中关于form表单的固定结构以及应用

image.png