பூட்ஸ்டார்ப் ஒரு CSS கட்டமைப்பு இது பிணையம் முழுவதும் மிகவும் பிரபலமாகிவிட்டது. அவர்களின் நடைகள் பதிலளிக்க சமூக வலைப்பின்னல்களில் காணப்படுகின்றன டுவென்டி y ட்விட்டர். ஒரு வலை பயன்பாட்டை உருவாக்கும் போது இதன் பயன்பாடு எங்களுக்கு நிறைய நேரத்தை மிச்சப்படுத்துகிறது, ஏனெனில் இது எல்லா சாதனங்களுக்கும் பொருத்தமான ஒரு சுத்தமான பக்க பாணியை உருவாக்குவதில் உள்ள அனைத்து வேலைகளையும் முயற்சியையும் சேமிக்கிறது. இந்த கட்டமைப்பில் பயன்படுத்தப்படும் பாணிகளைக் கலந்தாலோசிக்கும்போது, அவை நமக்கு நன்கு தெரிந்தவை என்பதை நாங்கள் உணருவோம், ஏனெனில் இன்று பல வலைத்தளங்கள் அதை செயல்படுத்தியுள்ளன.
கட்டமைப்பு
பூட்ஸ்டார்ப் திரவ அமைப்பு
எங்கள் வலைத்தளம் மொபைல்கள் மற்றும் டேப்லெட்களிலிருந்து அணுகப்படுவதற்கு, பூட்ஸ்டார்ப் எங்களுக்கு வழங்கும் திரவ கட்டமைப்பை நாங்கள் பயன்படுத்த வேண்டும். இந்த கட்டமைப்பின் பயன்பாடு மிகவும் எளிதானது, எல்லாமே கூறுகளை அடிப்படையாகக் கொண்டது சாண் அது எங்களுக்கு உதவும் தளவமைப்பு எங்கள் வலை வடிவமைப்பு. பின்னர், இந்த வடிவமைப்பை நாம் அணுகும்போது a ஸ்மார்ட்போன் o மாத்திரை, இது தானாகவே கூறப்பட்ட சாதனத்துடன் வழிசெலுத்தலின் தரத்தை கணிசமாக மேம்படுத்தும். நாங்கள் பயன்படுத்துவோம் சாண் திரவ கட்டமைப்பிற்குள் தருக்க பிரிவுகளில் வகுப்புகளுடன், அதாவது :.
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
எண் 2 என்பது இடைவெளியின் அளவைக் குறிக்கிறது. ஒவ்வொரு வரிசையிலும் அளவு 12, அல்லது அளவு 1 இன் 2 இடைவெளிகளுக்கு போதுமான இடம் உள்ளது, இதை நீங்கள் விரும்பியபடி விநியோகிக்கலாம். ஒரு வரிசையின் இடம் மீறியதும், அது தானாகவே அடுத்ததாகச் சென்று, அதைப் பயன்படுத்த அனுமதிக்கிறது சாண் ஒரு வரி இடைவெளியை உருவாக்க அளவு 12. நாம் சிலவற்றைத் தவிர்க்க விரும்பினால் சாண் ஒன்றை உருவாக்கும்போது, அதாவது 4 இலிருந்து தொடங்கவும் சாண், மற்றும் 3 அளவைப் பயன்படுத்துங்கள், இந்த குறியீட்டைப் பயன்படுத்துவோம்:
<div class="span2 offset4">Contenido</div>
இது பிரிவு நான்கு தாவ அனுமதிக்கிறது பரப்புகிறது உள்ளடக்கத்தைக் காண்பிக்கும் முன். இதை எங்கள் இலவச விருப்பப்படி பயன்படுத்தலாம், எங்கள் குறியீட்டைக் கொண்டு நாம் விரும்புவதைத் தவிர்க்கலாம்.
ஆஃப்செட் வகுப்போடு இடைவெளிகளைத் தவிர்க்கிறது
ஒவ்வொரு சாதனத்திற்கும் வெவ்வேறு வடிவமைப்பு
ஒவ்வொரு சாதனத்தையும் வேறுபடுத்த CSS வகுப்புகள்
ஒவ்வொரு வகை சாதனத்திற்கும் வேறுபட்ட வடிவமைப்பைப் பயன்படுத்த, பின்வரும் வகுப்புகளைப் பயன்படுத்தி ஒவ்வொரு தர்க்கப் பிரிவையும் எந்த சாதனம் சார்ந்ததாகச் சொல்வோம்:
இந்த வழியில், ஒவ்வொரு URL க்கும் ஒரே URL உடன் முற்றிலும் மாறுபட்ட வடிவமைப்பைக் காட்டலாம்.
பொத்தான்கள்
பூட்ஸ்டார்ப் வழங்கும் பொத்தான்களின் பட்டியல்
பூட்ஸ்டார்ப் வண்ண பொத்தான்களின் சுத்தமான தொகுப்பை எங்களுக்கு வழங்குகிறது, அதன் பயன்பாடு மிகவும் எளிது:
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
எங்கே btn btn-success பொத்தானின் நிறத்தைக் குறிக்கிறது, அதை மாற்ற, முந்தைய படத்தில் காட்டப்பட்டுள்ள வகுப்புகளுடன் மட்டுமே அதை மாற்ற வேண்டும்.
பூட்ஸ்டார்பை நிறுவுகிறது
இந்த CSS கட்டமைப்பை நிறுவுவதற்கு, இடுகையின் முடிவில் நான் விட்டுச்செல்லும் இணைப்பிலிருந்து ஜிப்பை பதிவிறக்குவோம், மேலும் பின்வரும் குறியீட்டை எழுதுவோம் எங்கள் 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 கோப்பின் அதே கோப்புறையில் இருப்பதை உறுதிசெய்தவுடன், எங்கள் பதிலளிக்கக்கூடிய வலைத்தளத்தை வடிவமைக்க ஆரம்பிக்கலாம்.
மேலும் தகவல் - படிவம் சரிபார்ப்பு
பதிவிறக்க Tamil - பூட்ஸ்டார்ப்: CSS கட்டமைப்பு
இந்த கட்டமைப்பில் உங்களிடம் கூடுதல் பயிற்சிகள் இல்லை ???