Я хочу сделать свою страницу отзывчивой в HTML с помощью boostrap
I want to make My page Responsive in Html by using <pre>bootstrapЯ применил в качестве фона этот путь изображения задан в css файле теперь я хочу сделать изображение таким же отзывчивым а также всю страницу такой же отзывчивой
Что я уже пробовал:
внешний css у меня есть следующий код для фонового изображения
.avFeaturesRapper {
position: relative;
width: 100%;
height: 800px;
perspective: 1000px;
background: url("../Images/avFeatures_Bg.jpg") right top #171717 no-repeat;
padding-right: 229px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
Код HTML файла выглядит следующим образом
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive App Features Listing</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
body {
margin: 0;
}
h2,
h1,
p {
margin: 0;
}
</style>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- Latest compiled JavaScript -->
<div class="row">
<div class="col-sn-12">
<div class="avFeaturesContainer">
<div class="avFeaturesRapper">
<h1>Features</h1>
<!-- floating app modules -->
<div class="screenRap">
<div class="avTile">av tile</div>
<div class="firewallTile">firewall tile</div>
<div class="backupTile">backup tile</div>
<div class="vulnerabilitiesTile">vulnerabilitiesTile</div>
<div class="spamfilterTile">spamfilter tile</div>
<div class="smpTile">social media protection tile</div>
<div class="tuneupTile">tun-up tile</div>
<div class="idpTile">identity protection tile</div>
<div class="parentalTile">parental controls tile</div>
</div>
<!-- //floating app modules -->
<!-- av feature content -->
<div class="feature avFeature">
<h2>Antivirus</h2>
<div><span></span></div>
<p>
Effectively catches all viruses. Our Antivirus includes Behavioural Detection, which spots new viruses because of the actions they take on your computer and stops them before they can do damage. Together with Signature-based Detection, which identifies
the 'signatures' of known malware, you gain a multi-layered defence system for your PC that's virtually impenetrable.
<br />
<br />Top detection rates of viruses and malware have been proven by independent labs.
</p>
</div>
<!-- //av feature content -->
<!-- firewall feature content -->
<div class="feature firewallFeature">
<h2>Firewall</h2>
<div><span></span></div>
<p>Protect your computer from unwanted hackers and identity thieves with this first line of defense.The firewall protects you against network attacks and prevents cyber crooks from entering your system.</p>
</div>
<!-- //firewall feature content -->
<!-- backup feature content -->
<div class="feature backupFeature">
<h2>Backup</h2>
<div><span></span></div>
<p>
We’ve included 5GB of FREE online storage so you can keep your important data, photos, music and more safe. You can choose what you want to back up and how often, or just set the feature to auto backup. You can even back up content directly from
folders with one click. And here’s more: your back-up data is easily accessible whenever you want to view it or restore it to another computer or even your smart phone.
</p>
</div>
<!-- //backup feature content -->
<!-- vulnerabilities feature content -->
<div class="feature vulnerabilitiesFeature">
<h2>Vulnerabilities</h2>
<div><span></span></div>
<p>Checks your computer for out-dated software that hackers and viruses can exploit to gain access to your system, damage it or steal personal information. Once this software is flagged up it can then be removed.</p>
</div>
<!-- //vulnerabilities feature content -->
<!-- spamfilter feature content -->
<div class="feature spamfilterFeature">
<h2>Spamfilter</h2>
<div><span></span></div>
<p>Spamfilter. No spam. No scam. BullGuard Spamfilter keeps out junk mail and email scams, like phishing attempts, virus spreading and foreign language spam. You can also customize filters to block emails you don’t want to receive.</p>
</div>
<!-- //spamfilter feature content -->
<!-- smp feature content -->
<div class="feature smpFeature">
<h2>Social Media Protect</h2>
<div><span></span></div>
<p>BullGuard helps you to monitor your children’s Facebook profiles, including private messages and photos. We flag all possible threats to your children’s safety, and notify you each time we find inappropriate content and ill-intended strangers.</p>
</div>
<!-- //smp feature content -->
<!-- tuneup feature content -->
<div class="feature tuneupFeature">
<h2>PC Tune-up</h2>
<div><span></span></div>
<p>You'll never have to wait again to get your computer up and running. BullGuard's PC Tune Up removes unnecessary files and frees up memory so your computer runs faster.</p>
</div>
<!-- //tuneup feature content -->
<!-- idp feature content -->
<div class="feature idpFeature">
<h2>Identity Protection</h2>
<div><span></span></div>
<p>
BullGuard scans the entire web for your usernames, email and postal addresses, phone numbers, credit card numbers, and more. Whenever one of your registered details is made public online, we immediately alert you via email and SMS, and provide you
with advice on what to do next.
<br />
<br />
<span class="smallNotice">Identity Protection is only available for US, UK, Canada, Denmark, Germany, France, Ireland and Netherlands residents.</span>
</p>
</div>
<!-- //idp feature content -->
<!-- parental feature content -->
<div class="feature parentalFeature">
<h2>Parental Control</h2>
<div><span></span></div>
<p>
Use BullGuard Parental Control to keep your children in check. You can block their access to suspicious websites, limit their time on the internet and monitor their activity. BullGuard helps you to protect them from being exposed to cyberbullying
and inappropriate content.
</p>
</div>
<!-- //parental feature content -->
<p class="hoverIcon">Mouse over on tiles to see details</p>
</div>
</div></div>
</div>
<script src="js/index.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
страница aspx выглядит следующим образом
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="RiskApplication.PresentationLayer.Login" %>
<%@ Register Assembly="DevExpress.Web.v17.1, Version=17.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--<link href="../Css/stylegraph.css" rel="stylesheet" />
<link href="../scss/style.css" rel="stylesheet" />--%>
<link rel="stylesheet" href="css/style.css">
<link href="../Css/style.css" rel="stylesheet" />
<link href="../Css/bootstrap.css" rel="stylesheet" />
<link href="../Css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script type="text/javascript">
function clearLabelValue(){
var labelObj = document.getElementById("<%# lblForgetPwordMessage.ClientID %>");
labelObj.value = "";
var txtEmailId = document.getElementById("<%# txtEmailId.ClientID %>");
txtEmailId.innerHTML = "";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="body"></div>
<div class="grad"></div>
<div class="header">
</div>
<br>
<h2>The complete testing solution</h2>
<ul class="features">
<li class="functional">
<a href="/functional-testing.aspx">
<h3>Functional Testing</h3>
Test HTML5, AJAX, and XAML apps, JavaScript calls, Telerik controls, dynamic page synchronization, and more.
</a>
</li>
<li class="load">
<a href="/load-testing.aspx">
<h3>Load testing</h3>
Craft load tests out of your functional tests or Fiddler logs. Set up goals and compare live results from different test runs.
</a>
</li>
<li class="performance">
<a href="/performance-testing.aspx">
<h3>Performance testing</h3>
Build web performance tests with ease. Gather data on server processing time, network latency, and client rendering time.
</a>
</li>
<li class="mobile">
<a href="/ios-testing/ios-application-testing.aspx">
<h3>Mobile testing & feedback</h3>
Record automated tests for native and web iOS apps. Sync real-time feedback, crash reports, tests and results across devices.
</a>
</li>
<li class="exploratory">
<a href="/exploratory-testing.aspx">
<h3>Exploratory testing</h3>
Plug Test Studio Explore into your browser to capture screen images and annotations with just a few mouse clicks.
</a>
</li>
<li class="manual">
<a href="/manual-testing.aspx">
<h3>Manual testing</h3>
Put all your automated and manual tests in one place. Manual testing is now organized, productive and faster.
</a>
</li>
<li class="developer">
<a href="/visual-studio-plug-in-benefits.aspx">
<h3>Testing in Visual Studio</h3>
Leverage a Visual Studio plugin for powerful functional testing. Generate tests as C# and VB.NET code and customize them.
</a>
</li>
</ul>
<ul class="wheel" aria-hidden="true">
<li class="functional"><a href="/functional-testing.aspx">Functional<span class="features-icons-functional"></span></a></li>
<li class="load"><a href="/load-testing.aspx">Load<span class="features-icons-load"></span></a></li>
<li class="performance"><a href="/performance-testing.aspx">Performance<span class="features-icons-performance"></span></a></li>
<li class="mobile"><a href="/ios-testing/ios-application-testing.aspx">Mobile<span class="features-icons-mobile"></span></a></li>
<li class="exploratory"><a href="/exploratory-testing.aspx">Exploratory<span class="features-icons-exploratory"></span></a></li>
<li class="manual"><a href="/manual-testing.aspx">Manual<span class="features-icons-manual"></span></a></li>
<li class="developer"><a href="/visual-studio-plug-in-benefits.aspx">Developer<span class="features-icons-developer"></span></a></li>
</ul>
<span class="inner-circle" aria-hidden="true"></span>
<ul class="wheel-arrows" aria-hidden="true">
<li class="functional"></li>
<li class="load"></li>
<li class="performance"></li>
<li class="mobile"></li>
<li class="exploratory"></li>
<li class="manual"></li>
<li class="developer"></li>
</ul>
<ul class="dotted-circles" aria-hidden="true">
<li class="functional-circle"></li>
<li class="load-circle"></li>
<li class="performance-circle"></li>
<li class="mobile-circle"></li>
<li class="exploratory-circle"></li>
<li class="manual-circle"></li>
<li class="developer-circle"></li>
</ul>
<div class="login">
<h3><span style="color:white">Risk Management</span></h3>
<div class="input-group margin-bottom-sm">
<span class="input-group-addon"></span>
<input class="form-control" type="text" placeholder="Email address" name="user"/>
</div>
<div class="input-group">
<span class="input-group-addon"></span>
<input class="form-control" type="password" placeholder="Password" name="password"/>
</div>
<center><button id="btnLogin" runat="server" onserverclick="btnLogin_Click" style="color:black">Login</button></center>
<asp:Label ID="LblMsg" runat="server" Text="Label"></asp:Label>
<br />
<asp:ScriptManager ID="sc" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="tt" runat="server"><ContentTemplate>
<asp:LinkButton runat="server" Text="forgot password?" ID="lnkForgotPassword" OnClientClick="clearLabelValue();return false;"></asp:LinkButton>
<table width="100%" >
<tr style="background-color:orange">
<td width="45%"></td>
<td align="left" width:"181px";>Version 1.0</td>
</tr>
<tr style="background-color:orange">
<td width="45%"></td>
<td align="left" width:"181px">Release Date: 18-12-2017</td>
</tr>
</table>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="true" PopupControlID="GroupPassPanel" TargetControlID="lnkForgotPassword" CancelControlID="Cancelbtn">
</ajaxToolkit:ModalPopupExtender><%--BackgroundCssClass="alert-info"--%>
<asp:Panel ID="GroupPassPanel" runat="server" style="display:none" CssClass="alert-info" Width="400px">
<center>
<h4 style="padding-top:7px"> Password Recovery Though Email</h4>
<table style="height:180px;width:300px">
<tr><td style="width:200px;padding-left:5px">Enter Email:</td>
<td>
<dx:ASPxTextBox ID="txtEmailId" runat="server" Width="170px" Height="30px" ValidationSettings-CausesValidation="True" ForeColor="Black">
<validationsettings ErrorDisplayMode="ImageWithTooltip">
<RequiredField IsRequired="True" ErrorText="Email Address Required" />
<RegularExpression ErrorText="Invalid email Address"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
</validationsettings>
</dx:ASPxTextBox>
<%-- < ID="txtEmail" runat="server" Text="Enter Email"></:TextBox>--%>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Submitbtn" runat="server" Text="Submit" OnClick="Submitbtn_Click" />
</td>
<td>
<asp:Button ID="Cancelbtn" runat="server" Text="Cancel" />
</td>
</tr>
<tr>
<td colspan="2">
Email containing password will be sent to you only if your emailid already exists in our system!!
<asp:Label ID="lblForgetPwordMessage" runat="server" Text="Email Incorrect" style="color:red" Visible="false"></asp:Label>
</td>
</tr>
<%--<asp:TextBox ID="GroupPasstxt" runat="server" TextMode="Password"></asp:TextBox><br />--%>
</table>
</center>
</asp:Panel>
</ContentTemplate></asp:UpdatePanel></div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/index.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
<%-- <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script src="../js/index.js"></script>--%>
<%-- <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>--%>
</form>
</body>
</html>