bootstrap 在我的笔记本电脑上不工作
bootstrap is not working in my laptop
我在我办公室的办公室桌面上使用 asp.net 应用程序和 bootstrap 我的网站页面非常适合桌面显示器屏幕,而在我的笔记本电脑屏幕上屏幕变得非常粗体。
#header {
margin-top:0px;
height:120px;
width:auto;
background-image:url('http://localhost:5172/Images/sd.jpg');
/*border:dashed;*/
border-top-color:green;
}
#header ul{
list-style:none;
height:32px;
float:right;
width: 611px;
margin-top:83px;
display:block;
}
#header ul li{
background-color:red;
border:1px solid white;
width:120px;
height:35px;
line-height:35px;
text-align:center;
float:left;
position:relative;
}
#header ul li a{
text-decoration:none;
color:white;
display:block;
}
#header ul li a:hover
{
background-color:gold;
}
#header ul ul{
display:none
}
#header ul li:hover > ul
{
display:block;
margin-top: 0px;
}
#body {
height:750px;
width:auto;
}
#tableBody {
width: 100%;
height: 750px;
background-color: #CC6600;
}
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS/StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style1 {
width: 4500px;
}
.auto-style2 {
color: maroon;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:1100px;margin:0 auto">
<tr style="width:1100px;height:50px">
<td style="width:60px">
<img src="Images/MyLogo.png" style="width: 100px" />
</td>
<td class="auto-style1">
<marquee>
<asp:Label ID="Label5m" runat="server" Font-Bold="True" Font-Names="Arial Black" ForeColor="#109AC1" Text="Hello Guys I am Ghayaz My website will be updated soon...........stay with us"></asp:Label></marquee>
</td>
<td style="width:900px;text-align:right">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/youtube.png" Width="30px" />  <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/FB.png" Width="37px" />  <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/LINKEDIN.png" Width="36px" />
</td>
</tr>
<tr style="width:1100px;height:40px;background-color:#5f98f3">
<td colspan="3">
<div id="header">
<ul>
<li><a href="#" class="auto-style2"><strong>HOME</strong></a></li>
<li><a href="#" class="auto-style2"><strong>About</strong></a></li>
<li><a href="#" class="auto-style2"><strong>Tutorials</strong></a>
<ul>
<li><a href="#" class="auto-style2"><strong>SALES AND DISTRIBUTION</strong></a></li>
<li><a href="CSHARP.aspx" class="auto-style2"><strong>C-SHARP</strong></a></li>
<li><a href="#" class="auto-style2"><strong>SQL</strong></a></li>
<li><a href="#" class="auto-style2"><strong>WCF</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ASP.NET</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ADO.NET</strong></a></li>
<li><a href="#" class="auto-style2"><strong>LINQ</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ENTITY FRAMEWORK</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ASP.NET MVC</strong></a></li>
<li><a href="#" class="auto-style2"><strong>WPF</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ABAP</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ETL</strong></a></li>
<li><a href="#" class="auto-style2"><strong>SSIS</strong></a></li>
<li><a href="#" class="auto-style2"><strong>SSAS</strong></a></li>
<li><a href="#" class="auto-style2"><strong>SSRS</strong></a></li>
</ul>
</li>
<li><a href="#" class="auto-style2"><strong>IntervieQuestions</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ContactUs</strong></a></li>
</ul>
<span class="auto-style2"><strong>SAP TUTORIALS AND MICROSOFT TUTORIALS</strong></span></div>
</td>
</tr>
<tr style="width:1100px;height:300px">
<td colspan="3">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Image ID="Image1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr style="width:1100px">
<td colspan="3">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr style="width:1100px;height:20px">
<td colspan="3">
</td>
</tr>
</table>
</div>
</form>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
</body>
</html>
Sandhiya 你应该在所有 asp.net 控件中提供 bootstrap class 然后它就可以工作了。
<div class="input-btn-toolbar" style="width: 103%; background-color: #000000; padding-left: 8px; padding-top: 8px; padding-bottom: 8px; height: 100%;">
<asp:TextBox style="text-transform: uppercase; font-size: 23px; text-align: center;" ID="txtReg" runat="server" type="text" class="form-control" placeholder="Enter Registration"></asp:Textbox>
<asp:LinkButton runat="server" OnClick="ButtonSearch_Click" Text="Search" CssClass="btn Jumbt btn-custom" style="color:white" > <i aria-hidden="true" class="glyphicon glyphicon-search"></i> Search</asp:LinkButton>
<asp:Button runat="server" OnClick="ButtonEnterTyreSize_Click" Text="Enter Tyre Size" CssClass="btn Jumbt btn-custom " style="color:white" Width="130px" />
</div>
</div>
首先要注意的是,您必须在母版页的标题部分添加用于页面缩放的元标记。下面是元标记。
<meta name="viewport" content="width=device-width, initial-scale=1">
以上标签将允许页面检查它是移动设备、平板电脑还是计算机等
在此之后,确保在 bootstrap 文件引用之前添加 jquery 引用。下面是示例。
<script src="~/jquery/1.12.4/jquery.min.js"></script>
<link href="~/css/bootstrap.min.css" rel="stylesheet">
<script src="~/js/bootstrap.min.js"></script>
如果以上相同,则检查 body 标签中的主要 <div>
是否装饰有 class container
,如下所示:
<div class="container"></div>
在此 <div>
标签内写入所有内容,这将根据 Bootstrap 标准设置页边距。
如有任何进一步帮助,请发表评论。
我在我办公室的办公室桌面上使用 asp.net 应用程序和 bootstrap 我的网站页面非常适合桌面显示器屏幕,而在我的笔记本电脑屏幕上屏幕变得非常粗体。
#header {
margin-top:0px;
height:120px;
width:auto;
background-image:url('http://localhost:5172/Images/sd.jpg');
/*border:dashed;*/
border-top-color:green;
}
#header ul{
list-style:none;
height:32px;
float:right;
width: 611px;
margin-top:83px;
display:block;
}
#header ul li{
background-color:red;
border:1px solid white;
width:120px;
height:35px;
line-height:35px;
text-align:center;
float:left;
position:relative;
}
#header ul li a{
text-decoration:none;
color:white;
display:block;
}
#header ul li a:hover
{
background-color:gold;
}
#header ul ul{
display:none
}
#header ul li:hover > ul
{
display:block;
margin-top: 0px;
}
#body {
height:750px;
width:auto;
}
#tableBody {
width: 100%;
height: 750px;
background-color: #CC6600;
}
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS/StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style1 {
width: 4500px;
}
.auto-style2 {
color: maroon;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:1100px;margin:0 auto">
<tr style="width:1100px;height:50px">
<td style="width:60px">
<img src="Images/MyLogo.png" style="width: 100px" />
</td>
<td class="auto-style1">
<marquee>
<asp:Label ID="Label5m" runat="server" Font-Bold="True" Font-Names="Arial Black" ForeColor="#109AC1" Text="Hello Guys I am Ghayaz My website will be updated soon...........stay with us"></asp:Label></marquee>
</td>
<td style="width:900px;text-align:right">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/youtube.png" Width="30px" />  <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/FB.png" Width="37px" />  <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/LINKEDIN.png" Width="36px" />
</td>
</tr>
<tr style="width:1100px;height:40px;background-color:#5f98f3">
<td colspan="3">
<div id="header">
<ul>
<li><a href="#" class="auto-style2"><strong>HOME</strong></a></li>
<li><a href="#" class="auto-style2"><strong>About</strong></a></li>
<li><a href="#" class="auto-style2"><strong>Tutorials</strong></a>
<ul>
<li><a href="#" class="auto-style2"><strong>SALES AND DISTRIBUTION</strong></a></li>
<li><a href="CSHARP.aspx" class="auto-style2"><strong>C-SHARP</strong></a></li>
<li><a href="#" class="auto-style2"><strong>SQL</strong></a></li>
<li><a href="#" class="auto-style2"><strong>WCF</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ASP.NET</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ADO.NET</strong></a></li>
<li><a href="#" class="auto-style2"><strong>LINQ</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ENTITY FRAMEWORK</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ASP.NET MVC</strong></a></li>
<li><a href="#" class="auto-style2"><strong>WPF</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ABAP</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ETL</strong></a></li>
<li><a href="#" class="auto-style2"><strong>SSIS</strong></a></li>
<li><a href="#" class="auto-style2"><strong>SSAS</strong></a></li>
<li><a href="#" class="auto-style2"><strong>SSRS</strong></a></li>
</ul>
</li>
<li><a href="#" class="auto-style2"><strong>IntervieQuestions</strong></a></li>
<li><a href="#" class="auto-style2"><strong>ContactUs</strong></a></li>
</ul>
<span class="auto-style2"><strong>SAP TUTORIALS AND MICROSOFT TUTORIALS</strong></span></div>
</td>
</tr>
<tr style="width:1100px;height:300px">
<td colspan="3">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Image ID="Image1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr style="width:1100px">
<td colspan="3">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr style="width:1100px;height:20px">
<td colspan="3">
</td>
</tr>
</table>
</div>
</form>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/bootstrap.js"></script>
</body>
</html>
Sandhiya 你应该在所有 asp.net 控件中提供 bootstrap class 然后它就可以工作了。
<div class="input-btn-toolbar" style="width: 103%; background-color: #000000; padding-left: 8px; padding-top: 8px; padding-bottom: 8px; height: 100%;">
<asp:TextBox style="text-transform: uppercase; font-size: 23px; text-align: center;" ID="txtReg" runat="server" type="text" class="form-control" placeholder="Enter Registration"></asp:Textbox>
<asp:LinkButton runat="server" OnClick="ButtonSearch_Click" Text="Search" CssClass="btn Jumbt btn-custom" style="color:white" > <i aria-hidden="true" class="glyphicon glyphicon-search"></i> Search</asp:LinkButton>
<asp:Button runat="server" OnClick="ButtonEnterTyreSize_Click" Text="Enter Tyre Size" CssClass="btn Jumbt btn-custom " style="color:white" Width="130px" />
</div>
</div>
首先要注意的是,您必须在母版页的标题部分添加用于页面缩放的元标记。下面是元标记。
<meta name="viewport" content="width=device-width, initial-scale=1">
以上标签将允许页面检查它是移动设备、平板电脑还是计算机等
在此之后,确保在 bootstrap 文件引用之前添加 jquery 引用。下面是示例。
<script src="~/jquery/1.12.4/jquery.min.js"></script>
<link href="~/css/bootstrap.min.css" rel="stylesheet">
<script src="~/js/bootstrap.min.js"></script>
如果以上相同,则检查 body 标签中的主要 <div>
是否装饰有 class container
,如下所示:
<div class="container"></div>
在此 <div>
标签内写入所有内容,这将根据 Bootstrap 标准设置页边距。
如有任何进一步帮助,请发表评论。