<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- The above 3 lined is used to make the webpage responsive -->
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Ristorante Con Fusion</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="header">
<a href="#" class="navbar-brand">Ristorante Con Fusion</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-control="navbar"> navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contents</a></li>
</ul>
</div>
</nav>
<header class="jumbotron row-header">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row ">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best
cuisines, and create a unique fusion experience. Our lipsmacking
creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-4">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content ">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs12 col-sm-9 col-sm-pull-3">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes,
Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
<p><a href="#">More »</a></p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3">
<p style="padding:20px;"></p>
<h3 align="center">This Month's Promotions</h3>
</div>
<div class="col-xs-12 col-sm-9">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of
five different salads, six enticing appetizers, six main entrees and
five choicest desserts. Free flowing bubbly and soft drinks. All for
just $19.99 per person </p>
<p><a href="#">More »</a></p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide
International experience having worked closely with whos-who in the
culinary world, he specializes in creating mouthwatering Indo-Italian
fusion experiences. </p>
<p><a href="#">More »</a></p>
</div>
</div>
</div>
<footer class="row-footer">
<div class="container">
<div class="row ">
<div class="col-xm-6 col-xs-offset-1 col-sm-3 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div>
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: <a href="mailto:confusion@food.net">confusion@food.net</a>
</address>
</div>
<div>
<div style="padding: 40px 10px;">
<a href="http://google.com/+">Google+</a>
<a href="http://www.facebook.com/profile.php?id=">Facebook</a>
<a href="http://www.linkedin.com/in/">LinkedIn</a>
<a href="http://twitter.com/">Twitter</a>
<a href="http://youtube.com/">YouTube</a>
<a href="mailto:">Mail</a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jquery (necessery for bootstrap javascript plugin) -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body></html>
Can anyone tell me how Bootstrap recognize that span button code is for mobile or for desktop how program recognize that the nav bar only visible when it viewport is for desktop and run button code when viewport is for mobile .what the logic behind?
请告诉我bootstrap如何识别在桌面和移动设备上运行的代码。在移动视口和桌面的引导程序中识别代码的逻辑是什么。这是我的Bootstrap课程项目，但我很困惑逻辑如何引导程序识别代码，即使我没有在代码中提及。
答案 0 :(得分：0)
CSS3 Media Queries是一般的CSS（特别是Bootstrap）在不同媒体/屏幕尺寸上的显示方式。例如， bootstrap.css
中的以下行@media (min-width: 576px) {
.container {
width: 540px;
max-width: 100%;
}
}
说屏幕尺寸至少为576像素宽（Bootstrap＆＃39; s＆＃34;小＆＃34;设备断点），.container样式的宽度为540像素。