बुटस्ट्र्याप २.2.3.2.२: गाइड सुरू गर्दै

ट्विटर बुटस्ट्र्याप लोगो

बुटस्ट्र्याप एक हो CSS फ्रेमवर्क त्यो नेटवर्क भर धेरै लोकप्रिय भएको छ। तिनीहरूको शैली उत्तरदायी सामाजिक नेटवर्कमा देखा पर्दछ टुएन्टी y twitter। यसको प्रयोगले हामीलाई धेरै समय बचत गर्दछ जब वेब अनुप्रयोग विकास गर्दा यसले हामीलाई सबै कामहरू र प्रयासहरू बचत गर्दछ सबै उपकरणहरूको लागि उपयुक्त स्वच्छ पृष्ठ शैली सिर्जना गर्नमा समावेश गर्दछ। यस फ्रेमवर्कमा प्रयोग गरिएका शैलीहरू परामर्श गर्दा हामी बुझ्नेछौं कि ती हामीलाई परिचित छन्, आजदेखि धेरै वेबसाइटहरूले यसलाई लागू गरिसकेका छन्।

संरचना

बुटस्ट्र्याप संरचना छवि

बुटस्ट्र्याप फ्लुइड संरचना

हाम्रो वेबसाइट मोबाइल फोन र ट्याब्लेटबाट पहुँचयोग्य हुनको लागि, हामीले फ्लोर स्ट्रक्चर प्रयोग गर्नुपर्नेछ जुन बुटस्ट्र्यापले हामीलाई प्रस्ताव गर्दछ। यस संरचना को उपयोग धेरै सरल छ, सबै चीज तत्वमा आधारित छ span यसले हामीलाई मद्दत गर्दछ लेआउट हाम्रो वेब डिजाइन। पछि, जब हामी एक बाट यो डिजाइन पहुँच स्मार्टफोन o ट्याब्लेट, यो स्वचालित रूपमा नेभिगेसनको गुणस्तर सुधार्दै आएको उपकरणमा अनुकूलित हुनेछ। हामी यसको प्रयोग गर्दछौं span तरल संरचना भित्र तार्किक विभाजन मा वर्ग संग, अर्थात्:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

जहाँ संख्या २ ले स्पानको आकार प्रतिनिधित्व गर्दछ। प्रत्येक प row्क्तिमा साइज १ को १२ स्प्यानका लागि पर्याप्त ठाउँ हुन्छ, वा for आकार of को २, यो तपाईंलाई मनपर्दो वितरण गर्न सकिन्छ। एक पटक प row्क्तिको खाली ठाउँ पार गरे पछि यो स्वचालित रूपमा अर्कोमा जान्छ, हामीलाई प्रयोग गर्न अनुमति दिदै span आकार १२ लाईन ब्रेक सिर्जना गर्न। यदि हामी केहि छोड्न चाहान्छौं भने span जब एउटा सिर्जना गर्दछ, त्यो हो, from बाट सुरू गर्नुहोस् span, र of को आकार लागू गर्नुहोस्, हामी यो कोड प्रयोग गर्दछौं:

<div class="span2 offset4">Contenido</div>

यसले डिभिजनलाई चार उफ्रि गर्न अनुमति दिन्छ स्प्यानहरू सामग्री प्रदर्शन गर्नु अघि। हामी यो हाम्रो स्वतन्त्र इच्छामा प्रयोग गर्न सक्दछौं, हामी हाम्रो कोडको साथ के चाहान्छौं स्किपिंग गर्न।

अफसेट वर्गको साथ स्प्यानहरू छोडिँदै

अफसेट वर्गको साथ स्प्यानहरू छोडिँदै

प्रत्येक उपकरणको लागि बिभिन्न डिजाइन

बुटस्ट्र्याप उपकरणहरूको लागि विशेष वर्गको साथ छवि

CSS उपकरणहरू प्रत्येक उपकरण फरक पार्न

प्रत्येक प्रकारको उपकरणको लागि बिभिन्न डिजाइन लागू गर्न हामी प्रत्येक तार्किक डिभिजनलाई कुन उपकरणको लागि केन्द्रित छ भनेर बताउने छौं, निम्न वर्गहरू प्रयोग गरेर:

यस तरीकाले, हामी उही यूआरएलको साथ प्रत्येक उपकरणको लागि बिल्कुल भिन्न डिजाइन देखाउन सक्दछौं।

बटनहरू

र Color बटनहरू

बुटस्ट्र्याप द्वारा प्रस्ताव गरिएको बटनहरूको सूची

बुटस्ट्र्यापले र colored्गीन बटनहरूको सफा भण्डार प्रदान गर्दछ, यसको प्रयोग एकदम सरल छ:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

कहाँ btn btn-success बटनको रंगलाई जनाउँदछ, यसलाई परिवर्तन गर्न, हामीले यसलाई केवल अघिल्लो छविमा देखाइएको कक्षाको साथ बदल्नु पर्छ।

बुटस्ट्र्याप स्थापना गर्दै

यो CSS फ्रेमवर्कको स्थापनाको लागि, हामी पोष्टको अन्त्यमा छोड्ने लिंकबाट zip डाउनलोड गर्नेछौं, र हामी निम्न कोड लेख्दछौं। हाम्रो HTML फाइलको टाउकोमा.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

एकचोटि हामीले यो निश्चित गरिसकेका छौं कि CSS र JS फाईलहरू हाम्रो HTML फाइलको समान फोल्डरमा छन्, हामी हाम्रो उत्तरदायी वेबसाइटको डिजाईन सुरु गर्न सक्दछौं।

थप जानकारी - फारम प्रमाणीकरण

डाउनलोड गर्नुहोस् - बुटस्ट्र्याप: CSS फ्रेमवर्क


लेखको सामग्री हाम्रो सिद्धान्तहरूको पालना गर्दछ सम्पादकीय नैतिकता। त्रुटि क्लिक गर्न रिपोर्ट गर्नुहोस् यहाँ.

एक टिप्पणी, तपाइँको छोड्नुहोस्

तपाइँको टिप्पणी छोड्नुहोस्

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन।

*

*

  1. डाटाका लागि उत्तरदायी: मिगुएल gelन्गल ग्याटन
  2. डाटाको उद्देश्य: नियन्त्रण स्पाम, टिप्पणी प्रबन्धन।
  3. वैधानिकता: तपाईंको सहमति
  4. डाटाको सञ्चार: डाटा कानुनी बाध्यता बाहेक तेस्रो पक्षलाई सूचित गरिने छैन।
  5. डाटा भण्डारण: डाटाबेस ओसीन्टस नेटवर्क (EU) द्वारा होस्ट गरिएको
  6. अधिकार: कुनै पनि समयमा तपाईं सीमित गर्न सक्नुहुनेछ, पुन: प्राप्ति र तपाईंको जानकारी मेटाउन।

  1.   Alejandra भन्यो

    के तपाईंसँग यो फ्रेमवर्कमा थप ट्यूटोरियलहरू छन् ???