Bootstrap giris formunda hata

emalper
Bootstrap giris formunda hata
0
1802
11-09-2017, Saat: 23:25
#1
user-avatar
emalper
Çevrimdışı
*
Üye Grubu
  • Konular:1
  • Mesajlar:1
  • Katılım:11-09-2017
  • Rep puanı 0
Merhaba arkadaslar sitemi kodlarken aldigim hata asagidadir. Acaba bunu nasil duzeltebilirim? Birtek mobilde xs de boyle oluyor devaminda istedigim sonucu aliyorum.

[Resim: Untitled.png]

Html kodu


Kod :
<html lang="tr">
<head>

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

  <title> E.M Akıllı Ev Sistemleri </title>

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

  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/loginstyle.css">
 
</head>

<body>
 
  <!-- Desktop Login Form -->

  <div class="main hidden-xs">
      <div class="container">
          <center>
      <div class="middle">
          <div id="login">
              <form action="javascript:void(0);" method="get">
              <fieldset class="clearfix">
              <p ><span class="fa fa-user" style="color: #A4A6A6"></span><input type="text"  Placeholder="Kullanıcı İsmi" required="" oninvalid="this.setCustomValidity('Lütfen bu alanı doldurunuz.')" oninput="setCustomValidity('')"></p>
              <p><span class="fa fa-lock" style="color: #A4A6A6"></span><input type="password"  Placeholder="Şifre" required="" oninvalid="this.setCustomValidity('Lütfen bu alanı doldurunuz.')" oninput="setCustomValidity('')"></p>
                  <div>
                  <span style="width:48%; text-align:left;  display: inline-block;"><a class="small-text" href="#"> Şifrenizi mi unuttunuz?</a></span>
                  <span style="width:50%; text-align:right;  display: inline-block;"><input type="submit" value="Giriş"></span>
                  </div>
              </fieldset>
                  <div class="clearfix"></div>
              </form>
                  <div class="clearfix"></div>
          </div> <!-- end login -->
              <div class="logo">LOGO
                  <div class="clearfix"></div>
              </div>
      </div>
          </center>
      </div>
  </div>

  <!-- End Of DesktopLogin Form -->

  <!-- Mobile Login Form -->

<div class="inner-wrapper hidden-sm hidden-md hidden-lg hidden-xl">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-sm-offset-4">
            <div class="logo-mobile">
                  <img src="images/avatar_2x.png">
              </div>
              <div class="clearfix"></div>
            <form role="form">
                <div class="form-group">
                <span class="fa fa-user" style="color: #A4A6A6"></span>
                <input type="text"  Placeholder="Kullanıcı İsmi" required="" oninvalid="this.setCustomValidity('Lütfen bu alanı doldurunuz.')" oninput="setCustomValidity('')">
                </div>
                    <div class="form-group">
                    <span class="fa fa-lock" style="color: #A4A6A6"></span><input type="password"  Placeholder="Şifre" required="" oninvalid="this.setCustomValidity('Lütfen bu alanı doldurunuz.')" oninput="setCustomValidity('')">
                    </div>
                    <button type="submit" class="btn btn-default login"> Giriş </button> <br>
              </form>
            </div>
        </div>
    </div>
</div>

  <!-- End Of Mobile Login Form -->

</body>

</html>

[Resim: mXcBeF]
Css codu 

Kod :
/* Global */

body {
    font-family: 'Josefin Sans', sans-serif;
}

/* Desktop Login Form */

div.main{
   background-color: #00EBC1;
   height:calc(100vh);
   width:100%;
}

/* ---------- GENERAL ---------- */

* {
 box-sizing: border-box;
 margin:0px auto;

 &:before,
 &:after {
   box-sizing: border-box;
 }

}

body {
 
   color: #606468;
   font: 87.5%/1.5em 'Open Sans', sans-serif;
   margin: 0;
}

a {
   color: #474E4D;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
   color: #333333;
}

input {
   border: none;
   font-size: 14px;
   line-height: 1.5em;
   padding: 0;
   -webkit-appearance: none;
}

p {
   line-height: 1.5em;
}

.clearfix {
 *zoom: 1;

 &:before,
 &:after {
   content: ' ';
   display: table;
 }

 &:after {
   clear: both;
 }

}

.container {
 left: 50%;
 position: fixed;
 top: 50%;
 transform: translate(-50%, -50%);
}

/* ---------- LOGIN ---------- */

#login form{
   width: 250px;
}
#login, .logo{
   display:inline-block;
   width:40%;
   cursor: default;
}
#login{
 border-right:1px solid #fff;
 padding: 0px 22px;
 width: 59%;
}
.logo{
 color:#fff;
 font-size:50px;
 line-height: 125px;
}

#login form span.fa {
   background-color: #474E4D;
   border-radius: 3px 0px 0px 3px;
   color: #000;
   display: block;
   float: left;
   height: 50px;
   font-size:24px;
   line-height: 50px;
   text-align: center;
   width: 50px;
}

#login form input {
   height: 50px;
}
fieldset{
   padding:0;
   border:0;
   margin: 0;

}
#login form input[type="text"], input[type="password"] {
   background-color: #fff;
   border-radius: 0px 3px 3px 0px;
   color: #474E4D;
   margin-bottom: 1em;
   padding: 0 16px;
   width: 200px;
}

#login form input[type="submit"] {
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 background-color: #474E4D;
 color: #eee;
 font-weight: bold;
 text-transform: uppercase;
 padding: 5px 10px;
 height: 30px;
}

#login form input[type="submit"]:hover {
   background-color: #333333;
}

#login > p {
   text-align: center;
}

#login > p span {
   padding-left: 5px;
}
.middle {
 display: flex;
 width: 600px;
}

/* End Of Desktop Login Form */

/* Mobile Login Form */

html, body {
 height:100%;
 background-color: #00EBC1;
}

.inner-wrapper {
 display:table-cell;
 vertical-align:middle;
 padding:15px;
}

.logo-mobile {
 margin-bottom: 50px;
 text-align: center;
}

.form-group span.fa{
   background-color: #474E4D;
   border-radius: 3px 0px 0px 3px;
   color: #000;
   display: block;
   float: left;
   height: 50px;
   font-size:24px;
   line-height: 50px;
   text-align: center;
   width: 50px;
}

.form-group input {
 background-color: #fff;
 border-radius: 0px 3px 3px 0px;
 color: #474E4D;
 margin-bottom: 1em;
 padding: 0 16px;
 width: 200px;
 height: 50px;
}

.login {
 border-color: #474E4D;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 background-color: #474E4D;
 color: #eee;
 font-weight: bold;
 text-transform: uppercase;
 padding: 5px 10px;
 height: 30px;
 margin-left: 100px;
}

.login:hover {
 background-color: #333333;
 color: #fff;
 border-color: #333333;
}

/* End Of Mobile Login Form */


Bu konuyu görüntüyelen kullanıcı(lar): 1 Ziyaretçi
Anahtar Kelimeler

Bootstrap giris formunda hata, Bootstrap giris formunda hata webmaster, Bootstrap giris formunda hata webmaster forum, Bootstrap giris formunda hata webmaster forumu, Bootstrap giris formunda hata forum webmaster, Bootstrap giris formunda hata wmfrm, Bootstrap giris formunda hata wmfrm.com

Bir hesap oluşturun veya yorum yapmak için giriş yapın

Yorum yapmak için üye olmanız gerekiyor

Giriş Yap

Hesabınız var mı? Giriş yapın.
ya da

Hesap Oluştur

Forumumuza yeni bir hesap için kaydolun.


Foruma Git:
Task