我正在使用bootstrap简单的html代码。但在移动视图中它没有正常使用。我的代码中没有发现任何问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link class="cssdeck" rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css" class="cssdeck">
<script class="cssdeck" src="css/jquery.min.js"></script>
<script class="cssdeck" src="js/bootstrap.min.js"></script>
<title>Doctor Log In</title>
</head>
<body>
<!--<div style="width:100%; background-color:#1d719a; height:100px;">
<img src="nature/logo.png" style="margin:23px 0px 0px 30px;">
<div style="width:30%; float:right; text-align:right; margin-right:20px; margin-top:20px;">
<a href="pdashboard.html" title="Home"><img src="images/home_icon.png" height="32" width="32"/></a>
<a href="patientlog.html" title="Logout"><img src="images/logout.png" height="32" width="32" /></a>
</div>
</div>
-->
<div class="container" style="background-color: #1d719a; width: 100%;">
<div class="row-fluid">
<div class="span12">
<div class="span6">
<img src="nature/logo.png" style="margin: 23px 0px 20px 30px;">
</div>
<div class="span6" style="text-align: right;">
<a href="app.html" title="Home" style="margin-right: 10px;">
<img src="images/home_icon.png" height="32" width="32" style="margin-top: 20px;" /></a>
<a href="doclog.html" title="Logout" style="margin-right: 20px;">
<img src="images/logout.png" height="32" width="32" style="margin-top: 20px;" /></a>
</div>
</div>
</div>
</div>
<div id="loginModal">
<div class="modal-body" style="max-height: 1400px; margin-top: 70px;">
<div class="well">
<ul class="nav nav-tabs">
<li class="active"><a href="#login" data-toggle="tab">Login</a></li>
<li><a href="#create" data-toggle="tab">Create Account</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="login">
<form class="form-horizontal" action='dash_board.html' method="POST">
<fieldset>
<div id="legend">
<legend class="">Login</legend>
</div>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username" name="username" placeholder="" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" id="password" name="password" placeholder="" class="input-xlarge">
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-success">Login</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="create">
<form id="tab">
<label>Username</label>
<input type="text" value="" class="input-xlarge">
<label>First Name</label>
<input type="text" value="" class="input-xlarge">
<label>Last Name</label>
<input type="text" value="" class="input-xlarge">
<label>Email</label>
<input type="text" value="" class="input-xlarge">
<label>Address</label>
<textarea value="Smith" rows="3" class="input-xlarge">
</textarea>
<div>
<button class="btn btn-primary">Create Account</button>
</div>
</form>
<!--<form class="form-horizontal" action='' method="POST">
<fieldset>
<div id="legend">
<legend >Personal Details</legend>
</div>
<div class="control-group">
<label class="control-label"><strong>First Name</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<input id="first-name" name="first-name" type="text" >
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>Middle Name</strong></label>
<div class="controls">
<input id="middle-name" name="middle-name" type="text" >
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>Last Name</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<input id="last-name" name="last-name" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>Username</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<input id="username" name="username" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>Password</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<input id="password" name="password" type="text">
</div>
</div>
<div id="legend">
<legend >Professional Details</legend>
</div>
<div class="control-group">
<label class="control-label"><strong>Specialist</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<select id="specialty" name="specialty">
<option value="" selected="selected">(please select a specialty)</option>
<option value="AF">Acupuncture</option>
<option value="AF">Ayurvedic</option>
<option value="AF">Cardiologist(Heart)</option>
<option value="AF">Clinical Psychologist</option>
<option value="AF">Cosmetic Surgeon</option>
<option value="AF">Dentist(Teeth)</option>
<option value="AF">Dermatologist(skin)</option>
<option value="AF">Diabetologist</option>
<option value="AF">ECG</option>
<option value="AF">Endocrinologist(Hormones)</option>
<option value="AF">ENT(Ear,Nose,Throat)</option>
<option value="AF">Gastroenterologist(Digestion)</option>
<option value="AF">Gynaecologist</option>
<option value="AF">Homeopathic</option>
<option value="AF">Infertility Specialist</option>
<option value="AF">Neurologist</option>
<option value="AF">OPG X-Ray</option>
<option value="AF">Ophthalnologist(Eye)</option>
<option value="AF">Orthopaedician(Bone)</option>
<option value="AF">Paediatrician(child specialist)</option>
<option value="AF">Physician</option>
<option value="AF">Physiotherapist</option>
<option value="AF">Pilates</option>
<option value="AF">Plastic Surgeon</option>
<option value="AF">Psychotherapist</option>
<option value="AF">Pulmonologist(lungs and respiratory)</option>
<option value="AF">Sexologist</option>
<option value="AF">Surgeon</option>
<option value="AF">Urologist(kidney)</option>
<option value="AF">Veterinarian(Pets)</option>
<option value="AF">X-Ray</option>
<option value="AF">Yoga</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>License</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<input type="text">
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>Expertise</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<input type="text">
</div>
</div>
<div id="legend">
<legend >Contact Details</legend>
</div>
<div class="control-group">
<label class="control-label"><strong>Email</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<input id="password" name="password" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>Address Line 1</strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<textarea rows="3"></textarea>
<p class="help-block">Street address, P.O. box, company name, c/o</p>
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>Address Line 2</strong></label>
<div class="controls">
<textarea rows="3"></textarea>
<p class="help-block">Apartment, suite , unit, building, floor, etc.</p>
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>State</strong></label>
<div class="controls">
<input id="region" name="region" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>City</strong></label>
<div class="controls">
<select id="country" name="country">
<option value="" selected="selected">(please select a City)</option>
<option value="AF">Bangalore</option>
<option value="AL">Bhubaneswar</option>
<option value="DZ">Kolkata</option>
<option value="AS">Delhi</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label"><strong>Zip / Postal Code</strong></strong><span style="color:#F00; font-size:24px">*</span></label>
<div class="controls">
<input id="postal-code" name="postal-code" type="text">
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-success">Submit</button>
</div>
</div>
</fieldset>
</form> -->
</div>
</div>
</div>
</div>
<div class="container" style="background-color: #1d719a; width: 100%; height: 80px; margin-top: 150px;">
<div class="row-fluid">
<div class="span12" style="font: Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold; color: #FFF;">
<div class="span6">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
<tr>
<td style="height: 10px;" colspan="2"> </td>
</tr>
<tr>
<td style="width: 5%"> </td>
<td>Copyrights 2013. All Rights Reserved.</td>
</tr>
</table>
</div>
<div class="span6" style="text-align: right;">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
<tr>
<td style="height: 20px;" colspan="2"> </td>
</tr>
<tr>
<td style="width: 5%"> </td>
<td>G3 Soft Tech Pvt. Ltd.</td>
<td style="width: 5%"> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
对于响应式视图,我使用 bootstrap-responsive.css ,路径正确。任何解决方案都会很棒。
答案 0 :(得分:0)
在HTML的HEAD部分添加此内容 -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
说明:
这告诉较小的设备浏览器如何缩放页面。您可以在此处详细了解:https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
答案 1 :(得分:0)
你应该在结束标记之前的页面底部放置Bootstrap的JavaScript核心文件:-)喜欢这个:
<!-- core JavaScript -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
我也想知道你为什么这样: class =“cssdeck”src =“css / jquery.min.js”放在CSS文件夹中的JavaScript文件?那条路可能与它有关......
class =“cssdeck”src =“js / bootstrap.min.js” 不确定为什么要为脚本定义一个类:这在下面是正确的:
script type =“text / javascript”src =“js / bootstrap.min.js”