2017-10-31 3 views
1

Ich habe das folgende FormularStil ändern Bootstrap Thema

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    
 
    <link rel="shortcut icon" href="src/favicon.ico"> 
 
    <link rel="stylesheet" href="https://jessepollak.github.io/card/build/css/demo.css"> 
 
\t 
 
    
 
</head> 
 
<body> 
 
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
 
    <div class="demo-wrapper"> 
 
       
 

 
     <div class="demo-container"> 
 
      
 
      <div class="card-wrapper"></div> 
 

 
\t \t \t 
 

 
      <div class="form-container active"> 
 
       <form action=""> 
 
        <p class="small">Start typing in here to take over and try it out</p> 
 
        <div class="row collapse"> 
 
         <div class="small-6 columns"> 
 
          <input placeholder="Card number" type="text" name="number"> 
 
         </div> 
 
         <div class="small-6 columns"> 
 
          <input placeholder="Full name" type="text" name="name"> 
 
         </div> 
 
        </div> 
 
        <div class="row collapse"> 
 
         <div class="small-3 columns"> 
 
          <input placeholder="MM/YY" type="text" name="expiry"> 
 
         </div> 
 

 
         <div class="small-3 columns"> 
 
          <input placeholder="CVC" type="text" name="cvc"> 
 
         </div> 
 

 
         <div class="small-6 columns"> 
 
          <input type="submit" value="Submit" class="button postfix"> 
 
         </div> 
 
        </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 

 
     
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/highlight.min.js"></script> 
 
    <script src="https://jessepollak.github.io/card/build/js/demo.js"></script> 
 
    <script src="https://rawgit.com/jessepollak/card/master/dist/card.js"></script> 
 
    <script> 
 
     $('code').each(function(i, e) {hljs.highlightBlock(e)}); 
 
     var card = new Card({ form: '.active form', container: '.card-wrapper' }) 
 
    </script> 
 
</body> 
 
</html>

Es ist ein Beispiel von https://jessepollak.github.io/card/

Aber ich möchte diese Bootstrap Thema Stil Form oben anzuwenden, Hier ist der Stil, den ich anwenden möchte https://blackrockdigital.github.io/startbootstrap-agency/

Das Problem ist, wenn ich es mache ich t break the card form, kann mir jemand helfen?

+2

Sie versuchen, mit einem eigenen Netz und Form Stilen eine Pre-Stil Komponente mit einem eigenen Netz und Form Stilen mit einem vorderen Ende Rahmen zu kombinieren. Du wirst ein Chaos an deinen Händen haben, egal wie du es ansiehst. Sie müssen nur einen Teil Stück für Stück auswählen, welche Klassen und IDs die JS-Referenzen finden und diese intakt halten oder an Ihren Bootstrap-Klassen und IDs ändern. Es wird mühsam, aber es kann getan werden. –

Antwort

0

hinzufügen Bootstrap in ihn, wie zum Beispiel unter

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
+1

nice..it funktioniert..try genauer –

+0

@Aqib Saman K es funktioniert nicht. – Developer