अवयवहरू

नेभिगेसन, अलर्टहरू, पपओभरहरू, र थप धेरै प्रदान गर्नका लागि दर्जनौं पुन: प्रयोज्य कम्पोनेन्टहरू बुटस्ट्र्यापमा निर्मित छन्।

बटन समूहहरू

एक कम्पोजिट कम्पोनेन्टको रूपमा धेरै बटनहरू सामेल हुन बटन समूहहरू प्रयोग गर्नुहोस्। तिनीहरूलाई एक श्रृंखला <a>वा <button>तत्वहरूको साथ बनाउनुहोस्।

उत्तम अभ्यासहरू

हामी बटन समूह र उपकरणपट्टी प्रयोग गर्नका लागि निम्न दिशानिर्देशहरू सिफारिस गर्छौं:

  • एकल बटन समूहमा सधैं एउटै तत्व प्रयोग गर्नुहोस्, <a>वा <button>
  • एउटै बटन समूहमा विभिन्न रङका बटनहरू नमिलाउनुहोस्।
  • पाठको अतिरिक्त वा सट्टामा आइकनहरू प्रयोग गर्नुहोस्, तर उपयुक्त भएमा alt र शीर्षक पाठ समावेश गर्नुहोस्।

ड्रपडाउनहरूसँग सम्बन्धित बटन समूहहरू (तल हेर्नुहोस्) छुट्टै बोलाइनुपर्छ र इच्छित व्यवहार संकेत गर्न सधैं ड्रपडाउन क्यारेट समावेश गर्नुपर्छ।

पूर्वनिर्धारित उदाहरण

यहाँ HTML ले एन्कर ट्याग बटनहरूसँग बनाइएको मानक बटन समूहको लागि कस्तो देखिन्छ:

  1. <div class = "btn-group" >
  2. <बटन वर्ग = "btn" > </ बटन>
  3. <बटन वर्ग = "btn" > </ बटन>
  4. <बटन वर्ग = "btn" > </ बटन>
  5. </div>

उपकरणपट्टी उदाहरण

थप जटिल कम्पोनेन्टहरूको लागि <div class="btn-group">a मा सेटहरू मिलाउनुहोस् ।<div class="btn-toolbar">

  1. <div class = "btn-उपकरणपट्टी" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

चेकबक्स र रेडियो स्वादहरू

बटन समूहहरूले रेडियोको रूपमा पनि काम गर्न सक्छन्, जहाँ केवल एक बटन सक्रिय हुन सक्छ, वा चेकबक्सहरू, जहाँ बटनहरूको संख्या सक्रिय हुन सक्छ। यसको लागि जाभास्क्रिप्ट कागजातहरू हेर्नुहोस् ।

जाभास्क्रिप्ट प्राप्त गर्नुहोस् »

बटन समूहहरूमा ड्रपडाउनहरू

हेड अप! उचित रेन्डरिङको लागि ड्रपडाउनहरू भएका बटनहरू व्यक्तिगत रूपमा आफ्नै .btn-groupभित्र बेरिएको हुनुपर्छ।.btn-toolbar

बटन ड्रपडाउनहरू

अवलोकन र उदाहरणहरू

ड्रपडाउन मेनुलाई एक भित्र राखेर .btn-groupर उचित मेनु मार्कअप प्रदान गरेर ट्रिगर गर्न कुनै पनि बटन प्रयोग गर्नुहोस्।

उदाहरण मार्कअप

बटन समूह जस्तै, हाम्रो मार्कअपले नियमित बटन मार्कअप प्रयोग गर्दछ, तर शैलीलाई परिष्कृत गर्न र बुटस्ट्र्यापको ड्रपडाउन jQuery प्लगइनलाई समर्थन गर्न मुट्ठीभर थपहरूको साथ।

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "ड्रपडाउन" href = "#" >
  3. कार्य
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "ड्रपडाउन-मेनु" >
  7. <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  8. </ul>
  9. </div>

सबै बटन आकारहरूसँग काम गर्दछ

बटन ड्रपडाउनहरू कुनै पनि आकारमा काम गर्दछ। तपाईको बटनको साइज .btn-large, .btn-smallवा .btn-mini.

जाभास्क्रिप्ट चाहिन्छ

बटन ड्रपडाउनहरूलाई कार्य गर्न बुटस्ट्र्याप ड्रपडाउन प्लगइन आवश्यक पर्दछ ।

केहि अवस्थामा - जस्तै मोबाइल - ड्रपडाउन मेनुहरू भ्यूपोर्ट बाहिर विस्तार हुनेछ। तपाईले पङ्क्तिबद्धतालाई म्यानुअल रूपमा वा अनुकूलन जाभास्क्रिप्टसँग समाधान गर्न आवश्यक छ।


विभाजित बटन ड्रपडाउनहरू

अवलोकन र उदाहरणहरू

बटन समूह शैलीहरू र मार्कअपमा निर्माण गर्दै, हामी सजिलैसँग विभाजित बटन सिर्जना गर्न सक्छौं। स्प्लिट बटनहरूले बायाँमा मानक कार्य र सान्दर्भिक लिङ्कहरूसँग दायाँमा ड्रपडाउन टगल सुविधा दिन्छ।

आकारहरू

अतिरिक्त बटन वर्गहरू .btn-mini, .btn-smallवा .btn-largeसाइजिङको लागि प्रयोग गर्नुहोस्।

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "ड्रपडाउन-मेनु पुल-दायाँ" >
  4. <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  5. </ul>
  6. </div>

उदाहरण मार्कअप

हामीले एउटा छुट्टै ड्रपडाउन ट्रिगरको रूपमा सञ्चालन गर्ने दोस्रो बटन कार्य प्रदान गर्न सामान्य बटन ड्रपडाउनहरूमा विस्तार गर्छौं।

  1. <div class = "btn-group" >
  2. <बटन वर्ग = "btn" > कार्य </ बटन>
  3. <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >
  4. <span class = "caret" ></span>
  5. </ बटन>
  6. <ul class = "ड्रपडाउन-मेनु" >
  7. <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  8. </ul>
  9. </div>

ड्रपअप मेनुहरू

ड्रपडाउन मेनुहरू तलबाट माथिको तत्काल अभिभावकमा एकल वर्ग थपेर पनि टगल गर्न सकिन्छ .dropdown-menu। यसले दिशालाई फ्लिप गर्नेछ .caretर माथिल्लो तलको सट्टा तलबाट माथि सार्नको लागि मेनु आफैंलाई पुन: स्थान दिन्छ।

  1. <div वर्ग = "btn-समूह ड्रपअप" >
  2. <बटन वर्ग = "btn" > ड्रपअप </ बटन>
  3. <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >
  4. <span class = "caret" ></span>
  5. </ बटन>
  6. <ul class = "ड्रपडाउन-मेनु" >
  7. <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  8. </ul>
  9. </div>

मल्टिकोन-पृष्ठ पृष्ठांकन

कहिले प्रयोग गर्ने

Rdio द्वारा प्रेरित अल्ट्रा सरल र न्यूनतम शैलीको पृष्ठांकन, एपहरू र खोज परिणामहरूको लागि उत्कृष्ट। ठूलो ब्लक हराउन गाह्रो छ, सजिलै मापनयोग्य छ, र ठूलो क्लिक क्षेत्रहरू प्रदान गर्दछ।

स्टेटफुल पृष्ठ लिङ्कहरू

लिङ्कहरू अनुकूलन योग्य छन् र सही वर्गको साथ धेरै परिस्थितिहरूमा काम गर्दछ। .disabledक्लिक गर्न नसकिने लिङ्कहरू र .activeहालको पृष्ठको लागि।

लचिलो पङ्क्तिबद्धता

पृष्ठांकन लिङ्कहरूको पङ्क्तिबद्धता परिवर्तन गर्न दुई वैकल्पिक कक्षाहरू मध्ये कुनै पनि थप्नुहोस्: .pagination-centered.pagination-right

उदाहरणहरू

पूर्वनिर्धारित पृष्ठांकन कम्पोनेन्ट लचिलो छ र धेरै भिन्नताहरूमा काम गर्दछ।

मार्कअप

एक <div>मा बेरिएको, पृष्ठांकन केवल एक हो <ul>

  1. <div वर्ग = "पृष्ठांकन" >
  2. <ul>
  3. <li><a href = "#" > अघिल्लो </a></li>
  4. <li class = "सक्रिय" >
  5. <a href="#" > </a> _ _
  6. </li>
  7. <li><a href = "#" > </a></li>
  8. <li><a href = "#" > </a></li>
  9. <li><a href = "#" > </a></li>
  10. <li><a href = "#" > अर्को </a></li>
  11. </ul>
  12. </div>

छिटो अघिल्लो र अर्को लिङ्कहरूको लागि पेजर

पेजर को बारेमा

पेजर कम्पोनेन्ट हल्का मार्कअप र अझ हल्का शैलीहरूको साथ सरल पृष्ठांकन कार्यान्वयनका लागि लिङ्कहरूको सेट हो। यो ब्लग वा पत्रिका जस्ता साधारण साइटहरूको लागि उत्कृष्ट छ।

वैकल्पिक असक्षम अवस्था

पेजर लिङ्कहरूले .disabledपृष्ठांकनबाट सामान्य वर्ग पनि प्रयोग गर्दछ।

पूर्वनिर्धारित उदाहरण

पूर्वनिर्धारित रूपमा, पेजर केन्द्रहरू लिङ्कहरू।

  1. <ul class = "पेजर" >
  2. <li>
  3. <a href="#" > अघिल्लो </a> _ _
  4. </li>
  5. <li>
  6. <a href="#" > अर्को </a> _ _
  7. </li>
  8. </ul>

पङ्क्तिबद्ध लिङ्कहरू

वैकल्पिक रूपमा, तपाइँ प्रत्येक लिङ्कलाई छेउमा पङ्क्तिबद्ध गर्न सक्नुहुन्छ:

  1. <ul class = "पेजर" >
  2. <li वर्ग = "अघिल्लो" >
  3. <a href = "#" > पुरानो </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#" > नयाँ → </a>
  7. </li>
  8. </ul>
लेबलहरू मार्कअप
पूर्वनिर्धारित <span class="label">Default</span>
सफलता <span class="label label-success">Success</span>
चेतावनी <span class="label label-warning">Warning</span>
महत्त्वपूर्ण <span class="label label-important">Important</span>
जानकारी <span class="label label-info">Info</span>
उल्टो <span class="label label-inverse">Inverse</span>

बारे

ब्याजहरू कुनै प्रकारको सूचक वा गणना प्रदर्शन गर्नका लागि साना, सरल कम्पोनेन्टहरू हुन्। तिनीहरू सामान्यतया इमेल क्लाइन्टहरू जस्तै Mail.app वा पुश सूचनाहरूको लागि मोबाइल एपहरूमा पाइन्छ।

उपलब्ध कक्षाहरू

नाम उदाहरण मार्कअप
पूर्वनिर्धारित <span class="badge">1</span>
सफलता <span class="badge badge-success">2</span>
चेतावनी <span class="badge badge-warning">4</span>
महत्त्वपूर्ण <span class="badge badge-important">6</span>
जानकारी <span class="badge badge-info">8</span>
उल्टो १० <span class="badge badge-inverse">10</span>

नायक एकाई

बुटस्ट्र्यापले तपाईंको साइटमा सामग्री प्रदर्शन गर्न नायक इकाई भनिने हल्का, लचिलो कम्पोनेन्ट प्रदान गर्दछ। यसले मार्केटिङ र सामग्री-भारी साइटहरूमा राम्रोसँग काम गर्दछ।

मार्कअप

तपाईंको सामग्रीलाई यसरी बेर्नुहोस् div:

  1. <div वर्ग = "नायक-इकाई" >
  2. <h1> शीर्षक </ h1>
  3. <p> ट्यागलाइन </p>
  4. <p>
  5. <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" >
  6. अझै सिक
  7. </a>
  8. </p>
  9. </div>

नमस्कार संसार!

यो एक साधारण नायक एकाई हो, विशेष सामग्री वा जानकारीमा थप ध्यान दिनको लागि एक साधारण जम्बोट्रोन-शैली कम्पोनेन्ट।

अझै सिक

पृष्ठ हेडर

h1पृष्ठमा सामग्रीको खण्डहरू उचित रूपमा खाली गर्न र खण्डहरू गर्नको लागि एउटा सरल शेल । यसले h1पूर्वनिर्धारित small, तत्व र अन्य धेरै कम्पोनेन्टहरू (अतिरिक्त शैलीहरूसँग) प्रयोग गर्न सक्छ।

  1. <div वर्ग = "पृष्ठ-हेडर" >
  2. <h1> उदाहरण पृष्ठ हेडर </h1>
  3. </div>

पूर्वनिर्धारित थम्बनेलहरू

पूर्वनिर्धारित रूपमा, बुटस्ट्र्यापको थम्बनेलहरू न्यूनतम आवश्यक मार्कअपको साथ लिङ्क गरिएका छविहरू प्रदर्शन गर्न डिजाइन गरिएका छन्।

उच्च अनुकूलन योग्य

थोरै अतिरिक्त मार्कअपको साथ, थम्बनेलहरूमा शीर्षकहरू, अनुच्छेदहरू, वा बटनहरू जस्ता कुनै पनि प्रकारको HTML सामग्री थप्न सम्भव छ।

  • थम्बनेल लेबल

    Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

    कार्य कार्य

  • थम्बनेल लेबल

    Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

    कार्य कार्य

थम्बनेलहरू किन प्रयोग गर्ने

थम्बनेलहरू (पहिले .media-gridv1.4 सम्म) तस्बिरहरू वा भिडियोहरू, छवि खोज परिणामहरू, खुद्रा उत्पादनहरू, पोर्टफोलियोहरू, र थपको ग्रिडहरूको लागि उत्कृष्ट छन्। तिनीहरू लिङ्क वा स्थिर सामग्री हुन सक्छन्।

सरल, लचिलो मार्कअप

थम्बनेल मार्कअप सरल छ - तत्वहरूको ulकुनै पनि संख्याको साथ liसबै आवश्यक छ। यो अति लचिलो पनि छ, कुनै पनि प्रकारको सामग्रीलाई तपाईंको सामग्रीहरू र्‍याप गर्न अलि बढी मार्कअपको साथ अनुमति दिँदै।

ग्रिड स्तम्भ आकारहरू प्रयोग गर्दछ

अन्तमा, थम्बनेल कम्पोनेन्टले थम्बनेल आयामहरूको नियन्त्रणको लागि अवस्थित ग्रिड प्रणाली वर्गहरू जस्तै .span2वा — प्रयोग गर्दछ।.span3

मार्कअप

पहिले उल्लेख गरिएझैं, थम्बनेलहरूको लागि आवश्यक मार्कअप हल्का र सीधा छ। यहाँ लिङ्क गरिएका छविहरूको लागि पूर्वनिर्धारित सेटअपमा एक नजर छ :

  1. <ul class = "थम्बनेल" >
  2. <li class = "span3" >
  3. <a href = "#" वर्ग = "थम्बनेल" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

थम्बनेलहरूमा अनुकूलन HTML सामग्रीको लागि, मार्कअप थोरै परिवर्तन हुन्छ। ब्लक स्तर सामग्रीलाई कहीं पनि अनुमति दिनको लागि, हामी यस प्रकारको <a>लागि स्वैप गर्छौं <div>:

  1. <ul class = "थम्बनेल" >
  2. <li class = "span3" >
  3. <div वर्ग = "थम्बनेल" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> थम्बनेल लेबल </ h5>
  6. <p> थम्बनेल क्याप्सन यहाँ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

थप उदाहरणहरू

तपाईका लागि उपलब्ध विभिन्न ग्रिड कक्षाहरूसँग तपाईका सबै विकल्पहरू अन्वेषण गर्नुहोस्। तपाईं पनि विभिन्न आकारहरू मिलाउन र मिलाउन सक्नुहुन्छ।

हल्का डिफल्टहरू

पुन: लेखिएको आधार वर्ग

Bootstrap 2 को साथ, हामीले आधार वर्गलाई सरलीकृत गरेका छौं: .alertको सट्टा .alert-message। हामीले न्यूनतम आवश्यक मार्कअपलाई पनि घटाएका छौं - <p>पूर्वनिर्धारित रूपमा आवश्यक छैन, केवल बाहिरी <div>

एकल चेतावनी सन्देश

कम कोडको साथ अधिक टिकाऊ कम्पोनेन्टको लागि, हामीले ब्लक अलर्टहरू, थप प्याडिङ र सामान्यतया थप पाठको साथ आउने सन्देशहरूका लागि विभेदकारी रूप हटाएका छौं। कक्षा पनि परिवर्तन भएको छ .alert-block


जाभास्क्रिप्ट संग राम्रो जान्छ

बुटस्ट्र्याप एक उत्कृष्ट jQuery प्लगइनको साथ आउँछ जसले सतर्क सन्देशहरूलाई समर्थन गर्दछ, तिनीहरूलाई छिटो र सजिलो बनाउँदै।

प्लगइन प्राप्त गर्नुहोस् »

उदाहरण अलर्टहरू

सरल कक्षाको साथ डिभमा आफ्नो सन्देश र वैकल्पिक बन्द आइकन बेर्नुहोस्।

चेतावनी! उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन।
  1. <div वर्ग = "सतर्क" >
  2. <बटन क्लास = "क्लोज" डाटा-डिसमिस = "अलर्ट" > × </ बटन>
  3. <strong> चेतावनी! </strong> सर्वश्रेष्ठ यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन।
  4. </div>

हेड अप! iOS यन्त्रहरूलाई href="#"अलर्टहरू खारेज गर्न आवश्यक पर्दछ। एन्कर क्लोज आइकनहरूको लागि यसलाई र डेटा विशेषता समावेश गर्न निश्चित हुनुहोस्। वैकल्पिक रूपमा, तपाईंले <button>डाटा विशेषता भएको तत्व प्रयोग गर्न सक्नुहुन्छ, जुन हामीले हाम्रा कागजातहरूको लागि रोजेका छौं। प्रयोग गर्दा <button>, तपाईंले समावेश गर्नुपर्छ type="button"वा तपाईंको फारमहरू पेश नगर्न सक्छ।

सजिलैसँग दुई वैकल्पिक कक्षाहरूसँग मानक अलर्ट सन्देश विस्तार गर्नुहोस्: .alert-blockथप प्याडिङ र पाठ नियन्त्रणहरू र .alert-headingमिल्दो शीर्षकका लागि।

चेतावनी!

उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन। Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div वर्ग = "अलर्ट अलर्ट-ब्लक" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > चेतावनी! </ h4>
  4. आफैलाई उत्तम जाँच गर्नुहोस्, तपाईं हुनुहुन्न ...
  5. </div>

प्रासंगिक विकल्पहरू अलर्टको अर्थ परिवर्तन गर्न वैकल्पिक कक्षाहरू थप्नुहोस्

त्रुटि वा खतरा

ओह स्न्याप! केहि चीजहरू परिवर्तन गर्नुहोस् र फेरि पेश गर्ने प्रयास गर्नुहोस्।
  1. <div वर्ग = "सतर्क चेतावनी-त्रुटि" >
  2. ...
  3. </div>

सफलता

राम्रो काम! तपाईंले यो महत्त्वपूर्ण चेतावनी सन्देश सफलतापूर्वक पढ्नुभयो।
  1. <div वर्ग = "अलर्ट अलर्ट-सफलता" >
  2. ...
  3. </div>

जानकारी

हेड अप! यो अलर्टलाई तपाईंको ध्यान चाहिन्छ, तर यो धेरै महत्त्वपूर्ण छैन।
  1. <div वर्ग = "अलर्ट अलर्ट-जानकारी" >
  2. ...
  3. </div>

उदाहरण र मार्कअप

आधारभूत

ठाडो ढाँचाको साथ पूर्वनिर्धारित प्रगति पट्टी।

  1. <div वर्ग = "प्रगति" >
  2. <div वर्ग = "पट्टी"
  3. शैली = " चौडाइ : 60 %; " ></div>
  4. </div>

धारीदार

स्ट्रिप गरिएको प्रभाव सिर्जना गर्न ग्रेडियन्ट प्रयोग गर्दछ (आईई छैन)।

  1. <div class = "progress progress-striped" >
  2. <div वर्ग = "पट्टी"
  3. शैली = " चौडाइ : 20 %; " ></div>
  4. </div>

एनिमेटेड

स्ट्रिप गरिएको उदाहरण लिन्छ र यसलाई एनिमेट गर्दछ (आईई छैन)।

  1. <div वर्ग = "प्रगति प्रगति-धारी
  2. सक्रिय" >
  3. <div वर्ग = "पट्टी"
  4. शैली = " चौडाइ : 40 %; " ></div>
  5. </div>

विकल्प र ब्राउजर समर्थन

अतिरिक्त रंगहरू

प्रगति पट्टीहरूले समान शैलीहरूका लागि केही समान बटन र अलर्ट कक्षाहरू प्रयोग गर्छन्।

धारीदार बारहरू

ठोस रङहरू जस्तै, हामीसँग विभिन्न धारीदार प्रगति पट्टीहरू छन्।

व्यवहार

प्रोग्रेस बारहरूले CSS3 ट्रान्जिसनहरू प्रयोग गर्छन्, त्यसैले यदि तपाईंले जाभास्क्रिप्ट मार्फत गतिशील रूपमा चौडाइ समायोजन गर्नुभयो भने, यसले सजिलै रिसाइज गर्नेछ।

यदि तपाइँ .activeकक्षा प्रयोग गर्नुहुन्छ भने, तपाइँको .progress-stripedप्रगति पट्टीहरूले बायाँ देखि दायाँ पट्टिहरू एनिमेट गर्नेछ।

ब्राउजर समर्थन

प्रगति पट्टीहरूले तिनीहरूका सबै प्रभावहरू प्राप्त गर्न CSS3 ढाँचाहरू, संक्रमणहरू, र एनिमेसनहरू प्रयोग गर्छन्। यी सुविधाहरू IE7-9 वा Firefox को पुरानो संस्करणहरूमा समर्थित छैनन्।

Opera र IE ले यस समयमा एनिमेसनहरूलाई समर्थन गर्दैन।

वेल्स

एक तत्व मा एक इनसेट प्रभाव दिन को लागी एक साधारण प्रभाव को रूप मा राम्रो को उपयोग गर्नुहोस्।

हेर, म इनारमा छु!
  1. <div वर्ग = "राम्रो" >
  2. ...
  3. </div>

बन्द आइकन

मोडल र अलर्टहरू जस्ता सामग्री खारेज गर्नका लागि जेनेरिक क्लोज आइकन प्रयोग गर्नुहोस्।

  1. <बटन वर्ग = "बन्द" > &समय; </ बटन>

iOS यन्त्रहरूलाई क्लिक घटनाहरूको लागि एक href="#" आवश्यक छ यदि तपाईं बरु एङ्कर प्रयोग गर्नुहुन्छ।

  1. <a class = "close" href = "#" > × </a>