Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

बूटस्ट्रैप इनपुट समूह का उपयोग


एक इनपुट फ़ील्ड में पहले से तैयार और संलग्न सामग्री जोड़कर, आप उपयोगकर्ता के इनपुट में सामान्य तत्व जोड़ सकते हैं। उदाहरण के लिए, आप डॉलर चिह्न, ट्विटर उपयोगकर्ता नाम के लिए @, या ऐसा कुछ भी जोड़ सकते हैं जो आपके एप्लिकेशन इंटरफ़ेस के लिए सामान्य हो।

उदाहरण

आप बूटस्ट्रैप इनपुट समूह बनाने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Input Group</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div style = "padding: 100px 100px 10px;">
         <form class = "bs-example bs-example-form" role = "form">
            <div class = "input-group">
               <span class = "input-group-addon">@</span>
               <input type = "text" class = "form-control" placeholder = "twitterhandle">
            </div>
            <br>
            <div class = "input-group">
               <input type = "text" class = "form-control">
               <span class = "input-group-addon">.00</span>
            </div>
            <br>
            <div class = "input-group">
                span class = "input-group-addon">$</span>
               <input type = "text" class =" form-control">
               <span class = "input-group-addon">.00</span>
            </div>
         </form>
      </div>
   </body>
</html>

  1. CSS ग्रिड-पंक्ति-प्रारंभ संपत्ति का उपयोग

    सेट करें कि CSS ग्रिड-पंक्ति-प्रारंभ संपत्ति के साथ ग्रिड-आइटम कहाँ से शुरू करें। आप ग्रिड-पंक्ति-प्रारंभ संपत्ति को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>       &nb

  1. CSS ग्रिड-कॉलम-एंड प्रॉपर्टी का उपयोग

    CSS ग्रिड-कॉलम-एंड प्रॉपर्टी के साथ ग्रिड-आइटम को समाप्त करने के लिए सेट करें। आप ग्रिड-कॉलम-एंड प्रॉपर्टी को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>         &nb

  1. बूटस्ट्रैप हेल्पर क्लासेस

    बूटस्ट्रैप में सहायक वर्गों में पुल-लेफ्ट,.पुल-राइट, .सेंटर-ब्लॉक और अन्य क्लास शामिल हैं। आइए .clearfix वर्ग का एक उदाहरण देखें - किसी भी तत्व के फ्लोट को साफ़ करने के लिए, .clearfix वर्ग का उपयोग करें - उदाहरण <!DOCTYPE html> <html>    <head>       <