Question

我是UI设计世界的新手。我试图获得一个基本页面＆amp;用bootstrap运行。我所追求的是使用bootstrap的根本原因，即扩展页面和扩展页面。它的组件取决于加载网页的设备。我没有满足这个要求：）

这是我试图开始工作的代码

            <div class="container-fluid">
           <div class="row-fluid ">
                <div class="row row-eq-height ">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
                        <a  id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1 " style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
                    </div>
                    <div class="col-xs6 col-sm-6 col-md-6 col-lg6 bg-primary">
                        <div class="page-header text-center" >
                            <p> <h2>BOOTSTRAP TRIAL </h2> </p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
                        <h3> LOGGED IN</h3>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg- bg-primary text-right pull-right">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Messages <span class="badge pull-right blue"> 42 </span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="logout.php">Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></a></li>
                                </ul>
                            </li>
                        </ul>                               
                    </div>
                </div>
            </div>
            </div>

此代码不会调整正在加载的网页的所有内容的大小。当我点击＆＃34;恢复＆＃34;浏览器的按钮。

几个问题

1）我对bootstrap的理解是它是移动的第一技术含义，如果我们要为小型设备开发，那么它可以扩展到任何大的。如果我误解了这个，请纠正我。因此，是否必须指定 -xs - ， -md - ＆amp;所有有问题的元素的 -lg - 是为了让重新调整大小工作还是指定 -xs - ？如果没有，我应该指定哪一个，以便在任何设备上自动进行缩放。

2）响应式网页设计仅涉及处理内容重新调整大小吗？

我非常感谢能让我搬到这里的任何帮助。

Answer 1

请查看此代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid">
           <div class="row-fluid">
                <div class="row row-eq-height">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
                        <a  id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
                        <div class="page-header text-center" >
                            <p> <h2>BOOTSTRAP TRIAL </h2> </p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
                        <h3> LOGGED IN</h3>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary text-right pull-right">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Messages <span class="badge pull-right blue"> 42 </span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="logout.php">Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></a></li>
                                </ul>
                            </li>
                        </ul>                               
                    </div>
                </div>
            </div>
            </div>

bootstrap - 组件调整问题

1 个答案: