Notas Bootstrap - página de login

1.bootstrap chinês site oficial

https://www.bootcss.com/

2. Passo

copiar 2.1 básico o código do modelo

https://v3.bootcss.com/getting-started/#template

2.2 Copie o cabeçalho da página de código

https://v3.bootcss.com/components/#page-header

2.3 Criar um meio caixa de login e inferior div parte div

<! DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset = "UTF-8"> 
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> 
    < title> 登录界面
     </ title> 
     <! - Bootstrap -> 
     <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"> 

    </ head> 
<body> 
<! -标题-> 
    <div class = "page-header"> 
        <h1> XXXX信息系统登录界面</ h1> 
   </ div> 
<! -中间登录框-> 
      <div class = "container de líquido"> 
        <div class = "linha"> 
          
          </ div> 
        </ div> 
<! -页脚->
        <Div class = "footer"> 
                <o p> & Copy; Direitos de autor: XXXXX XX City College Avenue, No. XXX XX </ o p>   
                <o p> Código Postal: 530001 Contato E-mail: [email protected] </ o p> 
        </ div> 
      </ div> 
         
    

       <! - jQuery (JavaScript plugin de Bootstrap todos são dependentes jQuery, ele deve ser colocado na parte da frente) -> 
       <script src = "https://cdn.jsdelivr.net/npm/[email protected] /dist/jquery.min.js "> </ script> 
       <! - todos os plug-ins Bootstrap JavaScript carregado. Você também pode carregar apenas um único plug-in necessário. -> 
       <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </ script> 
</ body> 
</ HTML>

View Code

2.4 Copiar dispostas horizontalmente de modo a formar uma estrutura intermédia de login porção div

https://v3.bootcss.com/css/#forms-horizontal

2,5 padrão de ajuste (pode ser aplicada uma pluralidade de classes de estilo guia HTML, separados por um espaço)

<! DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset = "UTF-8"> 
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> 
    < title> 登录界面
     </ title> 
     <! - Bootstrap -> 
     <script src = "js / jquery-3.4.1.js"> </ script> 
     <link href = "https://cdn.jsdelivr.net /npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"> 
<style> 

    .bg { 
        height: 600px; 
        fundo -image: url (/ images / bg.jpg); 
        fundo - size: cobertura; 
    } 

    .Form { 
        padding: 40px; 
       margem -superior: 175px; 
       fundo: rgba ( 255,255,255,0.2 ); 
    } 

   .Footer { 
    altura: 60 pixels; 
    estofamento - top: 20px; 
    font - size: 14px; 
    font - weight: bold; 
    text - align: center; 
   }
   

   
 </ Style> 
    </ head> 
<body> 
    <div class = "page-header"> 
        <h1> XXXX信息系统登录界面</ h1> 
   </ div> 
      <div class = "container de líquido"> 
        <div class = "linha bg"> 
          <= "col-MD-offset-6 col-MD-4 col-sm-offset-3 col-sm-7 col-XS-offset-2 col-xs-8 col-lg-offset-6 col-lg-3 forma "> 
            <form class =" form-horizontal "> 
                <div class =" form-grupo "> 
                  <label para =" "username class = "col-sm-4 controle-label">用户名</ label> 
                  < div class = "col-sm-8"> 
                    <input type = "text" class = "-controle de formulário" id = "username" espaço reservado = "请输入用户名"> 
                  </ div> 
                </ div>
                <div class = "form-grupo"> 
                  <label para= "password" class = "col-sm-4 Controle-label">密码</ label> 
                  <div class = "col-sm-8"> 
                    <input type = "password" class = "-controle de formulário" id = "password" espaço reservado = "请输入密码"> 
                  </ div> 
                </ div> 
                <div class = "form-grupo"> 
                    <label para = "validateCode" class = "col-sm-4 controle-label">验证码</ label> 
                    <div class = "col-sm-4">
                      <input type = "text" class = "forma-Control" ID = espaço reservado "validateCode" = "Digite PIN"> 
                    <div
                    </ div> class = "col-sm-4"> 
                        <img src = "images / yzm.jpg" alt = "" width = "75px" height = "35px"> 
                      </ div> 
                  </ div> 
                <div class = "form-grupo"> 
                  <div class = "col-sm compensar-2 col-sm-10"> 
                    <div class = "checkbox"> 
                      <label> 
                        <input type = "checkbox"> 记住我
                       < / label> 
                    </ div>
                  </ div> 
                </ div> 
                <div class = "form-grupo"> 
                  <div class = "col-sm-offset-2 col-sm-10"> 
                    <type = "button" id = botão "submitBtn" class = "btn btn-sucesso" value = "登录"style =" width: 50%; "> </ button> 
                  </ div> 
                </ div> 
              </ form> 
              <span style =" color: red;" id = "ponta"> </ span> 
          </ div> 
        </ div> 

        <div class = "footer"> 
                <p> & cópia;版权所有: XXXXX学院XX市XX大道XXX号</ p>   
                <p>
         
 
       <Script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"> </ script> 
       <! - todos os plug-ins Bootstrap JavaScript carregado. Você também pode carregar apenas um único plug-in necessário. -> 
       <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </ script> 
</ body> 
</ HTML>

3. renderizações Run (uma tela de login simples)

Notas Bootstrap - página de login

Acho que você gosta