html - 使用 Bootstrap 推拉-6ren

html - 使用 Bootstrap 推拉

转载作者：太空宇宙更新时间：2023-11-04 12:37:05

<div id="wrapper" class="container">
<div id="header" class="row">

    <div id="headerleftside" class="col-lg-4 col-md-4 col-sm-4">
        <div class="row">
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 1 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 2 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 3 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 4 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 5 </h1>
                </div>
            </a>
            <a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
                <div class="headerbuttons">
                    <h1> Button 6 </h1>
                </div>
            </a>
        </div>
    </div>


    <div id="headertitle" class="col-lg-4 col-md-4 col-sm-4">

    </div>


    <div id="headerrightside" class="col-lg-4 col-md-4 col-sm-4">
        <form action="action.php" method="post">
            <button id="headersubmit" input type="submit"> Login </button>
            <p class="logininputboxs"> <input type="text" name="username" placeholder="Userame" required/> </p>
            <p class="logininputboxs"> <input type="password" name="password" placeholder="Password" required/> </p>
        </form>
    </div>

</div>
</div>

另外请注意，上面的代码没有 , , 和其他标签，因为这个文件被用作 PHP 的 include()。然后CSS文件如下:

/*
Used Colors:
• Black - Black
• Orange - Orange
• Light Blue - #4DB8FF
• Normal Blue - #296ACC
• Normal Blue (Darker) - #2156A6
• Gray - #292D30
*/

/*-------------------------------------------------------*/

#wrapper {
    width: 100%;
    height: 750px;
    position: absolute;
}

/*-------------------------------------------------------*/

#header {
    height: 15%;
    background-color: #292D30;
    position: static;
    border-bottom: 5px solid #296ACC;
    z-index: 5;
}

/*-------------------------------------------------------*/

#headerleftside {
    background-color: #292D30;
}

.headerbuttons {
    background-color: black;
    font-size: 65%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 0%;
    font-color: #4DB8FF; /*The color is defined in the <head>, as well as the hover.*/
    border: 1px solid white;
    border-radius: 5px;
}

/*-------------------------------------------------------*/

#headertitle {
    height: 120%;
    background-color: black;
    border-bottom: 5px solid #2156A6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 10;
    background: black url("http://localhost/postin'/title.png") no-repeat center center;
}

#headertitle:hover {
    box-shadow: 0px 0px 5px 5px #2156A6;
    z-index: 10;
    background: black url("http://localhost/postin'/title_with_logo.png") no-repeat center center;
}

/*-------------------------------------------------------*/

#headerrightside {
    background-color: #292D30; 
}

.logininputboxs {
    margin-left: 5%;
    margin-top: 0%
}

input[type=text] {
    font-family: courier;
    font-size: 80%;
    height: 20%;
    border: 1px solid #4DB8FF;
    border-radius: 3px;
}

input[type=password] {
    font-family: courier;
    font-size: 80%;
    height: 20%;
    border: 1px solid #4DB8FF;
    border-radius: 3px;
}

.input_error_required {
    font-family: courier;
    font-size: 80%;
    height: 20%;
    border: 1px solid red;
    border-radius: 3px;
}

.input_error_unique {
    font-family: courier;
    font-size: 80%;
    height: 20%;
    border: 1px solid red;
    border-radius: 3px;
}

#headersubmit {
    width: 15%;
    height: 10%;
    font-size: 100%;
    border: 1px solid white;
    border-radius: 3px;
    text-align: center;
    color: #4DB8FF;
    background-color: black;
    margin-left: 45%;
}

/*-------------------------------------------------------*/

#sidebar {
    height: 84%;
    width: 20%;
    background-color: red;
    position: static;
    z-index: 1;
}

.sidebarbuttons {
    width: 80%;
    height: 12%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border-radius: 5px;
    position: relative;
    text-align: center;
    font-size: 80%;
    line-height: 500%;
    top: 5%;
}

/*-------------------------------------------------------*/

a, u {
    text-decoration: none; !important
}

最后实际的文件也由 PHP 下面的 Include() 完成:

<html lang="en-US">

<link rel="icon" type="image/png" href="http://localhost/postin'/favicon.ico?v=2">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="bootstrap-3.3.1-dist/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="style.css"/>

<style type="text/css">
<!--
    body {
        margin: 0px;
    }
-->
</style>
<style type="text/css">
    a:link {color: #4DB8FF;}      /* unvisited link */
    a:visited {color: #4DB8FF;}   /* visited link */
    a:hover {color: orange;}     /* mouse over link */
    a:active {color: orange;}    /* selected link */
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>

最佳答案

  <div class="container">
      <div class="row">

        <div class="col-sm-4 col-sm-push-4">
         LOGO
        </div><!-- /.col-sm-4 -->

        <div class="col-sm-4 col-sm-pull-4">
         BUTTONS
        </div><!-- /.col-sm-4 -->

        <div class="col-sm-4">
         OTHER STUFF
        </div><!-- /.col-sm-4 -->

      </div><!-- /.row -->

  </div><!-- /.container -->

演示:https://jsbin.com/mutoju/1/edit

按小视口(viewport)上的顺序排列 html
以最小宽度推拉

.col-sm-4 与 .col-md-4 和 .col-lg-4 相同。是父级的 33.3333%。从 .col-sm- 最小宽度(默认为 768px)到任何时候，这就是尺寸。所以你不需要使用.col-md-4或.col-lg-4，它是多余的。

关于html - 使用 Bootstrap 推拉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27204682/

文章推荐： javascript - StopPropagation() 不工作

文章推荐： c++ - 在引用 C++ 中存储函数的返回值

文章推荐： javascript - 制作div(位置:fixed) scroll horizontally

Ajax - 推拉？
我想了解 Ajax 推拉概念。如果有任何教程或书籍，我将不胜感激任何建议。最佳答案这是一个不错的 A Comparison of Push and PullTechniques for AJAX为
两个远程存储库之间的 Mercurial 推拉
是否可以从一个远程存储库推送到另一个远程存储库？我有一个案例，我将本地更改推送到远程集成存储库。一旦获得批准，我希望将集成存储库推送到发布存储库(我将从中构建我的发布)。这在技术上可行吗？编辑:
css - 推拉 Bootstrap 网格
所需的网格 xs 屏幕到 sm 我正在尝试对其他网格重新排序，以便在蓝色部分旁边放置一个嵌套网格。这是我现在的代码，但是推拉会导致橙色方 block 消失。 Slider QuickHelp
html - 使用 Bootstrap 推拉
我刚刚将 Bootstrap 放到我的网站上，并且一直在测试它。我一直在尝试使用那里的网格系统，但遇到了一个小问题。所以在我的网站上我有一个标题，它看起来像这样“按钮 1-6 | Logo | 登录”
html - Bootstrap v4 推拉
所以我已经阅读了这个主题:Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 但是我还
html - Bootstrap 推拉 3 列
我必须重新排列小屏幕中按以下顺序排列的列 1,2,3 在小屏幕中应显示为 3,1,2。它适用于两个，但我不确定如何使其适用于具有以下结构的三列 Push and Pull Resize t
docker - nginx 后面的 docker 注册表错误，推拉
我正在尝试创建一个 docker 注册表并且发生了一些问题，我无法执行推和拉等操作，它遵循我的环境设置: # docker container run -d -p 5000:5000 --name r
html - 为什么我的 Bootstrap 推拉 div 不起作用？
对于 col-md 和更高级别，我希望有 2 个 div besides，同时对于，它们above col-sm 及更低。所以我尝试使用文档中提到的推拉功能，但不知何故它不起作用。我想要做的是让 R

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 使用 Bootstrap 推拉

演示:https://jsbin.com/mutoju/1/edit