Bootstrap 美化试卷

今天我们来使用 Bootstrap 来美化试卷美化后的效果跟使用 CSS 美化后的效果一样。

美化后的试卷样式

标题居中

在 CSS 美化试卷中，我自己定义 center 来居中标题，在 Bootstrap 中，我们可以使用栅格来将标题居中。
我们用到了 col-md 和 col-md-offset

代码：

    
统一建模语言测试

效果：

标题居中

添加面板

我们需要添加两种面板，一种是默认面板，一种是带标题面板。
首先，我们将科目、姓名之类的设置成默认面板。

代码如下：

    

        

            
考试科目： 统一建模语言
            
时间： 100分
            
得分：
        
    


    

        

            

                班级（必填）：
                
            
            

                学号（必填）：
                
            
            

                姓名（必填）：
                
            
        
    

效果：

默认面板

我们再来添加带标题面板。

代码如下：

    

        
一、填空题（每空5分，共20分）
    
    

        

            

                UML的中文全称是：
                

            
            

                对象最突出的特性是：
                

                    
                    
                    
                
            
        
    

效果：

带标题面板

默认面板只是有 panel-body ，而带标题的面板不仅有 panel-body 还有 panel-heading。

美化所有输入框

给所有输入框加入 .form-control 这样会让输入框变得很好看。
效果：

美化后的输入框

美化提交按钮

提交按钮

最后就用 Bootstrap 将整个试卷都美化完了，看看效果：

最终效果