bootstrap自适应在线答题做题考试UI布局代码-html代码-BFW代码库

代码语言：html

代码描述：bootstrap自适应在线答题做题考试UI布局代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        body{
            		
        			background: rgb(255,255,255);
        			background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); 
        			background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 
        			background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
        			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); 
        			background-repeat: no-repeat;
        			background-attachment: fixed;
        
        
            		
            	}
            	.box1{
            	      background:rgba(255,255,255,0.6);
        			  padding: 20px 20px 20px 20px;
        			  border: 1px;
        			  border-radius: 0px;
        			  word-wrap: break-word;
        			  box-shadow:0 3px 6px #dadada;
        			  min-height: 360px;
        		   
            	}
            	.box2{
            		background-color: transparent;
            		border:1px solid #c9cacc;
            		padding: 5px 5px 5px 5px;
        		  	min-height: 360px;
        		  	border-radius: 0px;
        		  	word-wrap: break-word;
        		  	
        		   
            	}
            	p.background {
        		    background: #efefef;
        		    border-radius: 2px;
        		    padding: 10px 10px 10px 10px;
        		    margin-top: 5px;
        		    		    
        		    word-wrap: break-word;
        
        		}
        	
        		  .logo-main {
        		    display: block;
        		    margin: 5px auto;
        		    margin-left: :50%
        		  }
        
        		#footer{
        		    position:fixed;
        		   
        		    z-index: 1;
        		    height:80px;
        		    background:rgba(255,255,255,0.9);
        		    bottom:0px;
        		    left:0px;
        		    padding: 5px 5px 5px 5px;
        		    right:0px;
        		    margin-bottom:0px;
        		    -webkit-box-shadow: -1px -9px 20px -15px rgba(0,0,0,0.75);
        		-moz-box-shadow: -1px -9px 20px -15px rgba(0,0,0,0.75);
        		box-shadow: -1px -9px 20px -15px rgba(0,0,0,0.75);
        		  }
        		hr.style18{
        			border-top: 1px solid #c9cacc;
        		}
        		::-webkit-scrollbar {
        		          width: 2px;
        		         
        		        }
        		         
        		        /* Track */
        		        ::-webkit-scrollbar-track {
        		            -webkit-box-shadow: inset 0 0 6px #fff; 
        		            -webkit-border-radius: 10px;
        		            border-radius: 10px;
        		        }
        		         
        		        /* Handle */
        		        ::-webkit-scrollbar-thumb {
        		            -webkit-border-radius: 10px;
        		            border-radius: 10px;
        		            background: steelblue; 
        		            -webkit-box-shadow: inset 0 0 6px #fff; 
        		        }
        		        ::-webkit-scrollbar-thumb:window-inactive {
        		          background: rgba(255,0,0,0.4); 
        		        }
    </style>


</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top" style="-webkit-box-shadow: -2px 18px 24px -28px rgba(0,0,0,0.75);
		-moz-box-shadow: -2px 18px 24px -28px rgba(0,0,0,0.75);
		box-shadow: -2px 18px 24px -28px rgba(0,0,0,0.75);background:rgba(255,255,255,0.9);">
        <div style="float: left;margin-left: 20px;">
            <img src="//repo.bfw.wiki/bfwrepo/icon/6261f24cd0f34.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" width="60" height="60" alt="Main logo">
        </div>
        <div class="container-fluid">
            <header role="banner">
                <div class="logo-main">
                    <ul class="nav navbar-nav navbar-right" style="margin-top: 10px;margin-right: 20px;">
                        <li><button class="btn btn-default" disabled="" style="float: right;border: none;">Student Name</button></li>
                        <li><button class="btn btn-default" id="timer" disabled="" style="float: right;">Timer(00:00:00)</button></li>
                    </ul>
                </div>
            </header>
        </div>
    </nav>

    <div class="container-fluid " style="margin-top: 120px;margin-bottom: 100px;">
        <div class="row">
            <div class="col-md-9" style="">
                <div class="box1">
                    <div class="box2">
                        <div>
                            <button class="btn btn-default">Q</button>
                        </div>
                        <div class="container-fluid">
                            <p class="background">Loading.....</p>
                        </div>
                        <div>
                            <div class="radio">
                                <label> </label>
                                <label><input type="radio"  name="optradio"><label id="o1">Option 1</label></label>
                            </div>
                            <div class="radio">
                                <label> </label>
                                <label><input type="radio"  name="optradio"><label id="o2">Option 2</label></label>
                            </div>
                            <div class="radio">
                                <label> </label>
                                <label><input type="radio"  name="optradio"><label id="o3">Option 3</label></label>
                            </div>
                            <div class="radio">
                                <label> </label>
                                <label><input type="radio"  name="optradio"><label id="o4">Option 4</label></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3" style="">
                <div class="box1">
                    <div class="box2">
                        <div class="rox">
                            <div style="text-align: center;">
                                <h4>Questions</h4>
                                <hr>
                            </div>
                        </div>
                        <div class="row" style="">
                            <div class="col-md-3 col-xs-3">
                                <div>
                                    <button class="btn btn-default">01</button>
                                </div>
                            </div>
                            <div class="col-md-3 col-xs-3">
                                <div>
                                    <button class="btn btn-default">02</button>
                                </div>
         .........完整代码请登录后点击上方下载按钮下载查看