Javascript 引导html网页布局_Javascript_Html_Css_Twitter Bootstrap

Javascript 引导html网页布局

javascript html css twitter-bootstrap

Javascript 引导html网页布局,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我使用bootstrap框架在手机、PC和平板电脑上创建响应性网页。我编写了休闲代码，并在浏览器上运行，但当浏览器大小与手机屏幕相同时，结果并不好查看以下html代码并运行它，然后更改浏览器大小以查看结果查看A、B、C、D块上的结果 <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/&g

我使用bootstrap框架在手机、PC和平板电脑上创建响应性网页。我编写了休闲代码，并在浏览器上运行，但当浏览器大小与手机屏幕相同时，结果并不好

查看以下html代码并运行它，然后更改浏览器大小以查看结果

查看A、B、C、D块上的结果

<html>
<head>
<meta charset="utf-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>

<style>
.but
{
background-color: red;
font-size:40px;
border-bottom:1px solid white;
border-width:1px;
border-left: 1px solid red;
border-right: 1px solid red;
text-decoration:none;
color:white;
text-align:center;
}


</style>
</head>
<body style="background-color:#DBE8D7;">
<div class="container">

<div class="row">
<div style="text-align:center;border:1px solid red; border-top-right-radius:8px; border-top-left-radius:8px; background-color:white;font-size:75px;margin-bottom:0px;border-bottom:none;">div1</div>
<br/>
<a href='#' class="col-md-3 col-sm-3 col-lg-3 but">A</a>
<a href='#' class="col-md-3 col-sm-3 col-lg-3 but">B</a>
<a href='#' class="col-md-3 col-sm-3 col-lg-3 but">C</a>
<a href='#' class="col-md-3 col-sm-3 col-lg-3 but">D</a>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>


但是
{
背景色：红色；
字体大小：40px；
边框底部：1px纯白；
边框宽度：1px；
左边框：1px纯红；
右边框：1px纯红；
文字装饰：无；
颜色：白色；
文本对齐：居中；
}
第一组

也许这并不完美，但类似的方法可能会奏效：

将

font-size

属性更改为

15vw

：

font-size: 15vw;

在HTML中，如果计划一直使用相同的方向到col-xs-3，则无需使用col-lg-3、col-md-3、col-sm-3。为了更好地了解这个专栏系统是如何工作的，请查看的文档

理想情况下，这不是最好的解决方法。更好的方法是将菜单变为较小屏幕的下拉菜单。引导提供了这方面的功能

为此，请查看的文档，尽量不要在

上使用col xx zz类

那么你的问题是什么呢？看看

列xs

类的集合。它们是列的第一个移动版本。您不必显式地放置列X，因为它将被继承。

<a href='#' class="col-xs-3 but">A</a>
<a href='#' class="col-xs-3 but">B</a>
<a href='#' class="col-xs-3 but">C</a>
<a href='#' class="col-xs-3 but">D</a>

<html>
<head>
<meta charset="utf-8"/> 
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>

<style>
.but
{
background-color: red;
font-size:40px;
border-bottom:1px solid white;
border-width:1px;
border-left: 1px solid red;
border-right: 1px solid red;
text-decoration:none;
color:white;
text-align:center;
}


</style>
</head>
<body style="background-color:#DBE8D7;">
<div class="container">


<div style="text-align:center;border:1px solid red; border-top-right-radius:8px; border-top-left-radius:8px; background-color:white;font-size:75px;margin-bottom:0px;border-bottom:none;">div1</div>
<br/>
<div class="row">
<div class="col-xs-3"><a href='#' class="but">A</a></div>
<div class="col-xs-3"><a href='#' class="but">B</a></div>
<div class="col-xs-3"><a href='#' class="but">C</a></div>
<div class="col-xs-3"><a href='#' class="but">D</a></div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>