பதிவிறக்கும் முன், உங்களிடம் குறியீடு எடிட்டர் (நாங்கள் பரிந்துரைக்கிறோம் சப்லைம் டெக்ஸ்ட் 3) மற்றும் HTML மற்றும் CSS பற்றிய சில அறிவு இருப்பதை உறுதி செய்து கொள்ளவும். இங்கே நாங்கள் மூலக் கோப்புகளைத் தொட மாட்டோம், ஆனால் நீங்கள் அவற்றை எப்போதும் பதிவிறக்கம் செய்து படிக்கலாம். தொகுக்கப்பட்ட பூட்ஸ்டார்ப் கோப்புகளுடன் தொடங்குவதில் கவனம் செலுத்துவோம்.

தொகுக்கப்பட்ட கோப்புகளை ஏற்றுகிறது

தொடங்குவதற்கான விரைவான வழி: எங்கள் CSS, JS மற்றும் படங்களின் தொகுக்கப்பட்ட மற்றும் சிறிய பதிப்புகளைப் பெறுங்கள். ஆவணங்கள் அல்லது மூல கோப்புகள் இல்லை.

2. கோப்பு அமைப்பு

பதிவிறக்கம் செய்யப்பட்ட கோப்புகளில், பின்வரும் கட்டமைப்பு மற்றும் உள்ளடக்கம், பொதுவான பண்புகளால் தர்க்கரீதியாக தொகுக்கப்பட்டு, சிறிய மற்றும் தொகுக்கப்பட்ட பதிப்புகளைக் கொண்டிருக்கும்.

பதிவிறக்கம் செய்யப்பட்டதும், (தொகுக்கப்பட்ட) பூட்ஸ்டார்ப்பின் கட்டமைப்பைக் காண சுருக்கப்பட்ட கோப்புறையை அன்சிப் செய்யவும். இது இப்படி இருக்க வேண்டும்:

பூட்ஸ்ட்ராப் / +-- css / ¦ +-- பூட்ஸ்ட்ராப் . css ¦ +-- பூட்ஸ்ட்ராப் . நிமிடம் css +-- js / ¦ +-- பூட்ஸ்ட்ராப். js ¦ +-- பூட்ஸ்ட்ராப் . நிமிடம் js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README . எம்.டி

இது பூட்ஸ்டார்ப்பின் அடிப்படை வடிவம்: எந்தவொரு வலைத் திட்டத்திலும் விரைவான மற்றும் எளிதான பயன்பாட்டிற்காக தொகுக்கப்பட்ட கோப்புகள். தொகுக்கப்பட்ட CSS மற்றும் JS (bootstrap.*), மேலும் CSS மற்றும் JS (bootstrap.min.*) ஆகியவற்றை தொகுத்து சிறியதாக்குகிறோம். படக் கோப்புகள் ImageOptim ஐப் பயன்படுத்தி சுருக்கப்படுகின்றன, இது படங்களை PNG இல் சுருக்குவதற்கான Mac பயன்பாடாகும்.

எல்லா ஜாவாஸ்கிரிப்ட் செருகுநிரல்களுக்கும் jQuery தேவை என்பதை நினைவில் கொள்ளவும்.

3. என்ன சேர்க்கப்பட்டுள்ளது

பூட்ஸ்டார்ப் அனைத்து வகையான வேலைகளுக்கும் HTML, CSS மற்றும் JS ஆகியவற்றைக் கொண்டுள்ளது, அவை அனைத்தும் பக்கத்தின் மேலே நீங்கள் காணக்கூடிய வகைகளில் பட்டியலிடப்பட்டுள்ளன.

ஆவணப் பிரிவுகள் ஆதரிக்கப்படும் கூறுகள்

வகை மற்றும் பின்னணியை மீட்டமைப்பதற்கான பொதுவான உடல் பாணிகள், இணைப்பு நடைகள், டெம்ப்ளேட் கட்டம் மற்றும் இரண்டு எளிய மார்க்அப் கூறுகள்.

CSS பாங்குகள்

பொதுவான HTML உறுப்புகளுக்கான நடைகள்: வடிவமைப்பு, குறியீடு, அட்டவணைகள், படிவங்கள் மற்றும் பொத்தான்கள். சிறந்த ஐகான் தொகுப்பான Glyphicons ஐயும் உள்ளடக்கியது.

கூறுகள்

எளிய இடைமுகக் கூறுகளுக்கான அடிப்படை பாணிகள்: தாவல்கள் மற்றும் பொத்தான்கள், வழிசெலுத்தல் பார்கள், செய்திகள், பக்க தலைப்புகள் போன்றவை.

ஜாவாஸ்கிரிப்ட் செருகுநிரல்கள்

கூறுகளைப் போலவே, இந்த ஜாவாஸ்கிரிப்ட் செருகுநிரல்கள் உதவிக்குறிப்புகள், தகவல் தொகுதிகள், மாதிரி கூறுகள் மற்றும் பலவற்றிற்கான ஊடாடும் கூறுகளாகும்.

கூறுகளின் பட்டியல்

ஒன்றாக, ஜாவாஸ்கிரிப்ட் கூறுகள் மற்றும் செருகுநிரல்களில் பின்வரும் இடைமுக கூறுகள் உள்ளன:

• பொத்தான் குழுக்கள்
• கீழ்தோன்றும் பொத்தான் பட்டியல்கள்
• வழிசெலுத்தல் தாவல்கள், பொத்தான்கள் மற்றும் பட்டியல்கள்
• வழிநடத்து பட்டை
• குறுக்குவழிகள்
• பேட்ஜ்கள்
• பக்க தலைப்புகள் மற்றும் ஹீரோ உறுப்பு
• மினியேச்சர்கள்
• செய்திகள்
• செயல்முறை குறிகாட்டிகள்
• மாதிரி கூறுகள்
• கீழ்தோன்றும் பட்டியல்கள்
• உதவிக்குறிப்புகள்
• தகவல் தொகுதிகள்
• உறுப்பு "துருத்தி"
• கொணர்வி உறுப்பு
• விசைப்பலகை உள்ளீடு முன்னால்

4. அடிப்படை HTML டெம்ப்ளேட்

ஒரு சிறிய அறிமுகத்திற்குப் பிறகு, பூட்ஸ்டார்ப்பைப் பயன்படுத்துவதில் கவனம் செலுத்துவோம். இதைச் செய்ய, பட்டியலிடப்பட்டுள்ள அனைத்து கூறுகளையும் உள்ளடக்கிய அடிப்படை HTML டெம்ப்ளேட்டைப் பயன்படுத்துவோம்.

இது ஒரு பொதுவான HTML கோப்பு எப்படி இருக்கும்:

பூட்ஸ்ட்ராப் 101 டெம்ப்ளேட்

வணக்கம் உலகம்!

இது போன்ற பூட்ஸ்டார்ப் டெம்ப்ளேட்டை உருவாக்க, பொருத்தமான CSS மற்றும் JS கோப்புகளை இணைக்கவும்:

பூட்ஸ்ட்ராப் 101 டெம்ப்ளேட்

வணக்கம் உலகம்!

மற்றும் எல்லாம் அமைக்கப்பட்டுள்ளது! இந்த இரண்டு கோப்புகளைச் சேர்ப்பதன் மூலம், பூட்ஸ்டார்ப்பைப் பயன்படுத்தி இணையதளம் அல்லது பயன்பாட்டை உருவாக்கலாம்.

வணக்கம்! இந்த கட்டுரையில் பூட்ஸ்டார்ப் கட்டமைப்பை எவ்வாறு நிறுவுவது மற்றும் இணைப்பது என்பதை நான் உங்களுக்கு கூறுவேன். பூட்ஸ்டார்ப் என்றால் என்ன என்பதைப் பற்றி நீங்கள் படிக்கலாம்.

நிலையான கட்டமைப்பை நிறுவுதல்

முந்தைய கட்டுரைகளில் நிலையான நிறுவல் பற்றி நான் ஏற்கனவே நிறைய கூறியுள்ளேன். இங்கே எல்லாம் எளிது. நாங்கள் அதிகாரப்பூர்வ வலைத்தளமான getbootstrap.com க்குச் சென்று, தொடங்குதல் உருப்படியைக் கிளிக் செய்து முதல் விருப்பத்தைத் தேர்ந்தெடுக்கவும். எனவே, அனைத்து js மற்றும் css கூறுகளுடன் பூட்ஸ்ட்ராப்பின் முழு பதிப்பையும் பதிவிறக்கம் செய்கிறோம்.

பூட்ஸ்டார்ப் CDN என்பது ஒரு CDN சேமிப்பகத்திலிருந்து அதன் கோப்புகளை உங்கள் கணினியில் பதிவிறக்கம் செய்யாமல் கட்டமைப்பை இணைக்கும் வாய்ப்பாகும். இயற்கையாகவே, இந்த விஷயத்தில் தனிப்பயனாக்கம் பற்றி பேச முடியாது.

கட்டமைப்பு தனிப்பயனாக்கம்

ஆனால் உண்மை என்னவென்றால், பூட்ஸ்ட்ராப்பில் முன்னிருப்பாக பல கூறுகள் உள்ளன, மேலும் ஒரு குறிப்பிட்ட தளத்தை உருவாக்கும் போது அவற்றில் சில உங்களுக்கு பயனுள்ளதாக இருக்காது. உதாரணமாக, நீங்கள் ஒரு ஆன்லைன் ஸ்டோரை வடிவமைக்கிறீர்கள். உங்களுக்கு மாதிரிகள் மற்றும் உதவிக்குறிப்புகள் தேவையில்லை, மேலும் பல css கூறுகள் தேவையில்லை. இந்த வழக்கில், இந்த கூறுகளை கட்டமைப்பில் சேர்க்காமல் இருப்பது புத்திசாலித்தனமாக இருக்கும்.

அல்லது நீங்கள் ஒரு எளிய வலைப்பதிவை உருவாக்குகிறீர்கள். உங்களுக்கு உண்மையில் எதுவும் தேவையில்லை என்று வைத்துக்கொள்வோம், எனவே நீங்கள் கண்ணி மற்றும் மிக முக்கியமான இரண்டு கூறுகளை மட்டுமே விட்டுவிடலாம்.

உங்களுக்குத் தேவையானதை மட்டும் தேர்ந்தெடுப்பது வலைத்தளங்களை உருவாக்குவதற்கும் பூட்ஸ்டார்ப்பைப் பயன்படுத்துவதற்கும் ஒரு தொழில்முறை அணுகுமுறையாகும். இயல்பாக, சமீபத்திய பதிப்பில் கட்டமைப்பின் CSS பாணிகளின் சுருக்கப்படாத பதிப்பு 143 கிலோபைட் எடையைக் கொண்டுள்ளது. மற்றும் ஸ்கிரிப்டுகள் 60 கிலோபைட்டுகளுக்கு மேல் உள்ளன. ஆம், நீங்கள் குறியீட்டை சுருக்கினால், எடையை 20-40% குறைக்கலாம், ஆனால் இன்னும் கோப்புகள் இலகுவாக இருக்காது.

எடுத்துக்காட்டாக, நீங்கள் அனைத்து கூறுகளையும் முடக்கிவிட்டு, கட்டத்தை மட்டும் விட்டுவிட்டால் (இது பெரும்பாலும் செய்யப்படுகிறது), பின்னர் css இன் எடை 15-20 கிலோபைட்டுகளாக இருக்கும், மேலும் சுருக்கப்பட்ட வடிவத்தில் மற்றொரு இரண்டு கிலோபைட்டுகள் குறைவாக இருக்கும். இந்த வழியில் நீங்கள் உங்கள் திட்டத்தின் அதிகபட்ச வேகம் மற்றும் தேர்வுமுறையை அடைவீர்கள்.

சரி, அது ஒரு கோட்பாடு மட்டுமே. கட்டமைப்பைத் தனிப்பயனாக்க, அதே அதிகாரப்பூர்வ வலைத்தளத்தைப் பார்வையிட்டு தனிப்பயனாக்கு என்பதற்குச் செல்லவும்.

தேவையான கூறுகளைத் தேர்ந்தெடுப்பது

உங்கள் பூட்ஸ்டார்ப் பதிப்பில் எந்தெந்த கூறுகளைச் சேர்க்க விரும்புகிறீர்கள் என்பதை உள்ளமைப்பதே இங்கு முதல் படியாகும். CSS உடன் ஆரம்பிக்கலாம்:

அச்சு ஊடக பாணிகள் - அச்சிடுவதற்கான ஊடக வினவல்கள். தள பக்கங்களை அச்சிட நீங்கள் திட்டமிடவில்லை என்றால், அதை முடக்கலாம்.

அச்சுக்கலை, குறியீடு, அட்டவணைகள், படிவங்கள் மற்றும் பொத்தான்கள் அனைத்தும் நீங்கள் உண்மையிலேயே விரும்பினால் CSS இல் ஸ்டைல் ​​​​செய்யலாம். நிச்சயமாக, இதற்கு நேரம் எடுக்கும், ஆனால் உங்கள் உறுப்புகளின் வடிவமைப்பு முன்னிருப்பாக கட்டமைப்பை வழங்குவதில் இருந்து மிகவும் வித்தியாசமாக இருந்தால், நீங்கள் இந்த அனைத்து CSS பாணிகளையும் முடக்கலாம் மற்றும் அவற்றை நீங்களே எழுதலாம்.

கட்டம் அமைப்பு உண்மையில் ஒரு கட்டம். அதை எப்போதும் முடக்குவதில் எந்தப் புள்ளியும் நான் காணவில்லை, ஏனென்றால் இது கட்டமைப்பின் முக்கிய சக்தியாகும். எந்தவொரு சாதனத்திற்கும் டெம்ப்ளேட்களை நீங்கள் எளிதாக மாற்றியமைக்கக்கூடிய கட்டத்திற்கு நன்றி, இன்று மொபைல் போக்குவரத்தின் வயதில் இது மிகவும் முக்கியமானது. எந்த சூழ்நிலையிலும் நாங்கள் அதை அணைக்க மாட்டோம்.

பதிலளிக்கக்கூடிய பயன்பாடுகள் - தழுவல் பயன்பாடுகள், அவற்றை ஒருபோதும் முடக்க வேண்டாம் என்று நான் பரிந்துரைக்கிறேன். அடுத்த கட்டுரையில் தகவமைப்பு பயன்பாடுகளைப் பற்றி பேசுவோம், அங்கு கட்டம் அமைப்பை விரிவாகப் பார்ப்போம். இவை ஒரு உறுப்பை மறைக்க அல்லது ஒரு குறிப்பிட்ட திரை அகலத்தில் பார்க்க அனுமதிக்கும் வகுப்புகள். மிகவும் வசதியான மற்றும் பயனுள்ள.

எடுத்துக்காட்டாக, பட்டியல் குழுக்கள், பொத்தான் பார்கள், ஐகான்கள், பேனல்கள், விழிப்பூட்டல்கள், பேஜினேஷன், பிரட்தூள்களில் நனைக்கப்பட்டவை போன்றவை. நீங்கள் ஐகான் எழுத்துருவையும் முடக்கலாம். தளத்தில் உங்களுக்கு ஐகான்கள் தேவையில்லை அல்லது மற்றொரு தொகுப்பை இணைக்கும்போது இதைச் செய்வது மதிப்பு. உண்மையில், வழங்கப்பட்ட அனைத்து கூறுகளிலிருந்தும் உங்களுக்கு என்ன தேவை மற்றும் நீங்கள் செய்யாதது பற்றி நீங்கள் உட்கார்ந்து சிந்திக்க வேண்டும். ஒவ்வொரு தளமும் அதன் சொந்த அமைப்பைக் கொண்டிருக்கும், ஏனெனில் ஒவ்வொரு தளமும் வெவ்வேறு வடிவமைப்பு மற்றும் செயல்பாடுகளைக் கொண்டுள்ளது.

ஜாவாஸ்கிரிப்ட் கூறுகள்

இவை கீழ்தோன்றும் மெனுக்கள், உதவிக்குறிப்புகள், மாதிரி சாளரங்கள் மற்றும் ஸ்லைடர்கள். உங்களுக்கு இது எதுவும் தேவையில்லை என்றால், அதை அணைக்கவும். சில சமயங்களில், உங்கள் தளத்தில் கீழ்தோன்றும் மெனு, பிரதான பக்கத்தில் ஒரு ஸ்லைடர் மற்றும் மாதிரி விண்டோக்கள் இருக்கும் போது அனைத்து கூறுகளும் மிகவும் பயனுள்ளதாக இருக்கும். சில சந்தர்ப்பங்களில், அதிகபட்சம் 1-2 கூறுகள் பயனுள்ளதாக இருக்கும், பின்னர் குறியீட்டை நீட்டிக்க வேண்டிய அவசியமில்லை, தேவையற்ற கூறுகளை முடக்கவும்.

jQuery செருகுநிரல்கள்

ஜாவாஸ்கிரிப்ட் கூறுகள் சரியாக வேலை செய்ய உதவும் jQuery லைப்ரரி செருகுநிரல்களை இங்கே நீங்கள் முடக்கலாம். அதன்படி, நீங்கள் உங்கள் தளத்தில் ஸ்லைடரைப் பயன்படுத்தவில்லை என்றால், கொணர்விகளை உருவாக்குவதற்கான செருகுநிரல் உங்களுக்குத் தேவையில்லை, உங்களுக்கு உதவிக்குறிப்புகள் தேவையில்லை என்றால், tooltips.js போன்றவற்றை முடக்கவும்.

ஸ்க்ரோல்ஸ்பை செருகுநிரல் உரையின் நிலையை கண்காணிக்கிறது மற்றும் இதைப் பொறுத்து, ஒன்று அல்லது மற்றொரு மெனு உருப்படியை முன்னிலைப்படுத்துகிறது. வழக்கமாக இறங்கும் பக்கங்களில் இதுபோன்ற அம்சம் தேவைப்படுகிறது; வழக்கமான தளங்களில் நான் அதை நடைமுறையில் பார்த்ததில்லை. மற்றும் பல. உங்களுக்கு என்ன தேவை, எது தேவையில்லை என்பதை நன்றாகப் பாருங்கள்.

குறைவான மாறிகள்

அடுத்து, ஒரு பெரிய உருப்படி உங்கள் முன் திறக்கும், அதில் குறைவான மாறிகளுக்கான அமைப்புகளுடன் நிறைய துணை உருப்படிகள் இருக்கும். இங்கே நீங்கள் கிட்டத்தட்ட அனைத்தையும் மாற்றலாம்: வண்ணங்கள், எழுத்துரு அளவுகள், பிரேக் பாயிண்ட்கள், கட்டத்தில் உள்ள நெடுவரிசைகளின் எண்ணிக்கை, உள்தள்ளல்கள் போன்றவை.

நிச்சயமாக, இதைச் செய்ய, குறைந்தபட்சம் குறைவான அடிப்படைகளை நீங்கள் அறிந்திருக்க வேண்டும் அல்லது குறைந்தபட்சம் உள்ளுணர்வுடன் இந்த படிவங்களை வழிநடத்த வேண்டும்.

எடுத்துக்காட்டாக, நீங்கள் @font-family-base மாறியைப் பார்த்தால், தளத்தின் அடிப்படை எழுத்துருவான எழுத்துருவின் பெயருக்கு அது பொறுப்பு என்பதை நீங்கள் உள்ளுணர்வுடன் புரிந்து கொள்ள வேண்டும். சரி, @font-size-base மாறி அடிப்படை எழுத்துரு அளவை அமைக்கிறது. பூட்ஸ்ட்ராப்பில் இயல்பாக இது 14 பிக்சல்கள்.

இந்தப் புலங்கள் அனைத்தையும் நீங்கள் திருத்தலாம். 14 முதல் 20 வரை மாற்றவும், இப்போது இயல்புநிலை எழுத்துரு அளவு 20 பிக்சல்களாக இருக்கும் கட்டமைப்பைப் பதிவிறக்கலாம். அதன்படி, நீங்கள் உடனடியாக தலைப்புகளின் அளவை சரிசெய்யலாம்.

கட்டத்தை அமைத்தல்

கட்டம் அமைப்பின் அமைப்புகளும் எங்களுக்கு மிகவும் சுவாரஸ்யமானவை, இங்கே அவை:

நீங்கள் பார்க்க முடியும் என, சில நொடிகளில் நெடுவரிசைகளின் எண்ணிக்கையையும் அவற்றுக்கிடையே உள்ள உள்தள்ளல்களின் அகலத்தையும் மாற்றலாம். க்ரிட்-ஃப்ளோட்-பிரேக்பாயிண்ட் மாறி, மொபைல் மெனு ஐகானாகச் சரியும் புள்ளியை அமைக்கிறது.

நீங்கள் மதிப்பை மாற்றினால், எடுத்துக்காட்டாக, @screen-md-min, பின்னர் 991 பிக்சல்கள் அல்லது அதற்கும் குறைவான அகலத்தில், சரிவு ஏற்படும். இந்த மாறியை நீக்கிவிட்டு மதிப்பை பிக்சல்களில் எழுதலாம். எடுத்துக்காட்டாக, 520 பிக்சல்கள். பின்னர் மெனுவைச் சுருக்குவது ஸ்மார்ட்போன்கள் மற்றும் மொபைல் போன்களில் மட்டுமே ஏற்படும்.

உண்மையில், பூட்ஸ்டார்ப் தனிப்பயனாக்குதல் பக்கம் நிறைய அமைப்புகளைக் கொண்டுள்ளது, ஆனால் பொதுவாக இந்த தனிப்பயனாக்குதல் முறை (அதிகாரப்பூர்வ இணையதளத்தில் தனிப்பயனாக்கு பக்கத்தைப் பயன்படுத்தி) வேகமானது மற்றும் மிகவும் வசதியானது அல்ல. அடுத்து நான் உங்களுக்கு விரைவான வழியைக் காட்டுகிறேன்.

கட்டமைப்பில் 2-10 மாற்றங்களைச் செய்ய வேண்டியிருக்கும் போது தனிப்பயனாக்கு பக்கத்தைப் பயன்படுத்தவும் அல்லது தேவையான கூறுகளை முடக்கவும். நீங்கள் இன்னும் பல மதிப்புகளை மாற்றப் போகிறீர்கள் என்றால், நீங்கள் வேறு முறையைப் பயன்படுத்த வேண்டும்.

உண்மையில், உங்கள் கட்டமைப்பின் பதிப்பை உள்ளமைக்கும்போது, ​​பக்கத்தின் கீழே உள்ள பெரிய பொத்தானைக் கிளிக் செய்யவும். இது உங்களுக்காக பூட்ஸ்டார்ப்பின் பதிப்பைத் தொகுத்து உங்கள் கணினியில் பதிவிறக்கம் செய்யும். பின்னர் நீங்கள் செய்ய வேண்டியது எல்லாம் இணைத்து பயன்படுத்த வேண்டும். முந்தைய கட்டுரைகளில் (WordPress இல் அதை எப்படி செய்வது என்பது உட்பட) இணைப்பு பற்றி ஏற்கனவே பேசியுள்ளேன்.

குறைந்த ஆதாரங்களைப் பதிவிறக்கி அவற்றைத் திருத்துதல்

நான் ஏற்கனவே கூறியது போல், நீங்கள் கட்டமைப்பின் மூலக் குறியீட்டில் நிறைய திருத்தங்களைச் செய்ய வேண்டும் மற்றும் மாற்றங்களை உடனடியாகப் பார்க்க விரும்பினால், உங்களுக்கு குறைவான ஆதாரங்கள் தேவைப்படும். கட்டமைப்பின் முழுப் பதிப்பின் அதே இடத்தில் அவற்றைப் பதிவிறக்கலாம் - தொடங்குதல் பிரிவில்.

குறைவான ஆதாரங்களுடன் பணிபுரிந்து அவற்றைத் திருத்த உங்களுக்குத் தேவை:

சிஎஸ்எஸ் மற்றும் குறைவான அல்லது பிற ப்ராப்ராசசரைப் பற்றிய சில அறிவு

குறைவான கம்பைலர் (இலவசமாக பதிவிறக்கம் செய்யலாம்)

உண்மையில், குறைவான ஆதாரங்கள் மூலம் தனிப்பயனாக்குவது பற்றி நான் விரிவாகப் பேசமாட்டேன், ஆனால் இது சிறந்த முறையாகும், ஏனென்றால் நீங்கள் தனிப்பயனாக்கு பக்கத்திற்கு 100 முறை சென்று கட்டமைப்பின் மேலும் மேலும் புதிய பதிப்புகளைத் தொகுக்க வேண்டியதில்லை.

பூட்ஸ்ட்ராப் தீமிங் அல்லது உறுப்புகளின் தோற்றத்தை மாற்றுதல்

இயல்பாக, கட்டமைப்பின் முழு பதிப்பில், css கோப்புறையில் bootstrap-theme.css கோப்பையும் காணலாம். அதை தளத்துடன் இணைக்க வேண்டிய அவசியமில்லை. இது என்ன செயல்பாடுகளை செய்கிறது? தேவைப்பட்டால், உங்களுக்குத் தேவையான உறுப்புகளுக்கான பாணியை மாற்றுவதற்கு மட்டுமே கோப்பு தேவைப்படுகிறது.

இதே பாத்திரத்தை உங்கள் சொந்த style.css மூலம் நிறைவேற்ற முடியும், இதில் நீங்கள் ஸ்டைல்களை மேலெழுதலாம். பூட்ஸ்டார்ப்-தீம் ஒரு தேவையான கோப்பு அல்ல, இது ஆர்டருக்குப் பயன்படுத்தப்படுகிறது. எடுத்துக்காட்டாக, உங்களிடம் 3 கோப்புகள் உள்ளன:

bootstrap.css - நிச்சயமாக, இது கட்டமைப்பின் குறியீடாகும்;

bootstrap-theme.css - இங்கே நீங்கள் பூட்ஸ்ட்ராப் கூறுகளுக்கான பாணிகளை மேலெழுதுகிறீர்கள்;

style.css - இந்தக் கோப்பில் உங்கள் உறுப்புகளுக்கான நடைகளை எழுதவும்.

பின்னர் நீங்கள் குறியீட்டிலும் திட்ட அமைப்பிலும் வரிசையைப் பெறுவீர்கள். ஆனால் அனைத்து செயல்பாடுகளையும் ஒரே கோப்பில் செய்ய யாரும் உங்களைத் தடுக்கவில்லை - style.css மற்றும் தீம் கோப்பைப் பயன்படுத்த வேண்டாம்.

மிக முக்கியமான விஷயம் என்னவென்றால், ஃபிரேம்வொர்க் குறியீட்டைக் கொண்ட கோப்பை விட, தீம் கோப்பு மற்றும் உங்கள் சொந்த css ஐ html மார்க்அப்பில் சேர்ப்பது, இதன் மூலம் ஸ்டைல்கள் வெற்றிகரமாக மேலெழுதப்படும்.

தீமிங் எவ்வாறு செயல்படுகிறது என்பதற்கான எடுத்துக்காட்டு

நான் ஏற்கனவே கூறியது போல், முன்னிருப்பாக பூட்ஸ்டார்ப் ஒரு பூட்ஸ்ட்ராப்-தீம் கோப்பை உள்ளடக்கியது. அதை இணைக்க முயற்சிக்கவும். பிரதான கோப்பிற்குப் பிறகு இணைக்கவும்.

இயல்பாக, பூட்ஸ்டார்ப்பில் உள்ள பொத்தான்கள் இப்படி இருக்கும்:

தீம் மூலம் கோப்பை இணைத்த பிறகு அவற்றின் தோற்றம் இப்படித்தான் மாறுகிறது:

நீங்கள் பார்க்க முடியும் என, ஒரு சிறிய சாய்வு தோன்றும். அதன்படி, நீங்கள் பூட்ஸ்ட்ராப்-தீம் கோப்பில் குறியீட்டை மீண்டும் எழுதலாம் மற்றும் பொத்தான்களுக்கான உங்கள் சொந்த பாணிகளைப் பெறலாம். ஆனால் நீங்கள் கேட்கலாம், ஏன் இந்த மாற்றங்களை நேரடியாக bootstrap.css இல் செய்யக்கூடாது? உண்மை என்னவென்றால், கட்டமைப்பின் புதிய பதிப்புகள் தொடர்ந்து வெளியிடப்படுகின்றன, மேலும் நீங்கள் மேம்படுத்த முடிவு செய்தால், உங்கள் மாற்றங்களை புதிய பதிப்பில் செயல்படுத்துவது கடினமாக இருக்கும். நீங்கள் ஒரு தனி கோப்பை உருவாக்கி, அங்குள்ள மாற்றங்களை விவரிக்கும் போது, ​​டெவலப்பர் மூலக் குறியீட்டைத் தொடாமல் இருப்பது நல்ல வடிவமாகக் கருதப்படுகிறது. இது மிகவும் புத்திசாலி மற்றும் வசதியானது.

இணையத்திலிருந்து பதிவிறக்கம் செய்யப்பட்ட புதிய பூட்ஸ்டார்ப் தீம்களை எவ்வாறு நிறுவுவது?

நிறைய தளங்கள் உள்ளன, பெரும்பாலும் வெளிநாட்டு, நீங்கள் ஒரு கொத்து தீம்கள் மற்றும் டெம்ப்ளேட்களை இலவசமாக பதிவிறக்கம் செய்யலாம். குழப்பத்தைத் தவிர்க்க, பூட்ஸ்டார்ப்பை டெம்ப்ளேட்டாகப் பயன்படுத்தி வடிவமைக்கப்பட்ட இணையதளத்தையும், தனிமங்களின் நிலையான தோற்றத்தை மீறும் CSS விதிகளின் தொகுப்பாக தீம் இருப்பதையும் கருத்தில் கொள்வோம்.

அத்தகைய தீம்களை bootswatch.com/ இலிருந்து பதிவிறக்கம் செய்யலாம், மேலும் ஒரு தேடுபொறியைப் பயன்படுத்தி நீங்கள் டஜன் கணக்கானவற்றைக் காணலாம்.

அத்தகைய கருப்பொருள்களை நிறுவுவதற்கான பொதுவான கொள்கை நீங்கள் அவற்றைப் பதிவிறக்கும் தளத்தைப் பொறுத்தது. நீங்கள் பூட்ஸ்ட்ராப்-தீம் வடிவத்தில் பதிவிறக்கம் செய்ய முடிந்தால், சிறந்தது, அதைப் பதிவிறக்கி இணைக்கவும். bootswatch இல், எடுத்துக்காட்டாக, bootstrap.css ஐ பதிவிறக்கம் செய்து, உங்கள் நிலையான கட்டமைப்பின் பாணி கோப்பை மாற்ற வேண்டும். குறைந்த ஆதாரங்களைக் கொண்ட ஒரு விருப்பமும் உள்ளது.

இந்த கட்டுரையில் தொடங்கி, ட்வெட்டர் பூட்ஸ்டார்ப் 3 கட்டமைப்பைப் படிக்கத் தொடங்குவோம், இது பெரும்பாலும் வலைத்தளங்கள், நிர்வாக பேனல்கள், இறங்கும் பக்கங்கள் மற்றும் வலை பயன்பாடுகளை உருவாக்க பயன்படுகிறது, ஏனெனில் இது எளிதாக உருவாக்கம், தெளிவான கட்டமைப்பு மற்றும் பக்கங்களின் இணக்கத்தன்மையை உறுதி செய்கிறது.

அடிப்படை பூட்ஸ்டார்ப் 3 டெம்ப்ளேட்டை நிறுவுகிறது

பூட்ஸ்டார்ப் 3 கருவிகள் மற்றும் முறைகளைப் பயன்படுத்த, நீங்கள் http://getbootstrap.com க்குச் சென்று, css, எழுத்துருக்கள், js கோப்புறைகள் மற்றும் அதனுடன் தொடர்புடைய கோப்புகளுடன் காப்பகத்தைப் பதிவிறக்க வேண்டும்.

CSS பாணிகள் மற்றும் js ஸ்கிரிப்ட்களை எவ்வாறு இணைப்பது என்று உங்களுக்குத் தெரியாவிட்டால், இதையும் இந்த கட்டுரையையும் பார்க்க பரிந்துரைக்கிறேன், எங்கள் விஷயத்தில், CSS பாணிகள் பிரிவுகளில் இணைக்கப்பட்டுள்ளன.

மற்றும் நிறைவு குறிச்சொல்லுக்கு முன் ஸ்கிரிப்டுகள்

பக்கத்தின் கீழே.

bootstrap.min.css மற்றும் bootstrap.min.js கோப்புகளைப் பயன்படுத்துவது உங்கள் தளத்திற்குப் பயனளிக்கும் என்பதையும் நான் கவனிக்க விரும்புகிறேன், ஏனெனில் இந்தக் கோப்புகள் அளவு சிறியதாகவும், ஏற்றுதல் வேகத்தில் சாதகமான விளைவையும் ஏற்படுத்தும்.

எழுத்துருக்களை இணைப்பது இரண்டு வழிகளில் செய்யப்படலாம்:

மூடும் குறிச்சொல்லுக்கு முன் நேரடியாக HEAD பிரிவில்

css கோப்புறையில் அமைந்துள்ள ஒரு தனி CSS கோப்பில்

இரண்டாவது விருப்பம் விரும்பத்தக்கது, ஆனால் நீங்கள் எந்த முறையை தேர்வு செய்தாலும், இணைப்பு இப்படியே தொடரும்

@font-face( எழுத்துரு-குடும்பம்: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: லோக்கல்(கிளிஃபிகான்ஸ்-ஹால்ஃபிங்க்ஸ்-ரெகுலர்), url(எழுத்துருக்கள்/கிளிஃபிகான்ஸ்-ஹால்ஃபிங்க்ஸ்- regular.ttf); ) h2( font-family: glyphicons-halflings-regular,sans-serif; )

அல்லது அதற்கு பதிலாக முதல் முறைக்கான ஸ்டைல் ​​டேக்கில், இரண்டாவது முறைக்கான அனைத்து உரைகளையும் css கோப்பில் செருகவும்.

jQuery நிறுவல்

பூட்ஸ்டார்ப் 3 சரியாக வேலை செய்ய, நீங்கள் jquery நூலகக் கோப்பை அதிகாரப்பூர்வ வலைத்தளமான jquery.com இலிருந்து இணைப்பு வழியாக பதிவிறக்கம் செய்து உங்கள் தளத்தின் js கோப்புறையில் வைக்க வேண்டும்.

jQuery இணைப்பு மூடும் குறிச்சொல்லுக்கு முன் நடக்கும்

எங்கள் சேவைகளை உங்களுக்கு வழங்குவதை குக்கீகள் எளிதாக்குகின்றன. எங்கள் சேவைகளைப் பயன்படுத்துவதன் மூலம், குக்கீகளைப் பயன்படுத்த எங்களை அனுமதிக்கிறீர்கள்.

, ஆனால் bootstrap.js கோப்புக்கு முன்

ஏனெனில் jQuery பூட்ஸ்ட்ராப் முன் ஏற்ற வேண்டும்.

பூட்ஸ்ட்ராப் 3 கட்டம் மற்றும் திரை அளவுகள்

பூட்ஸ்டார்ப்பின் அடிப்படையானது 12-நெடுவரிசை கட்டம் (col-) கட்டப்பட்ட வகுப்புகளின் தொகுப்பாகும். கட்டத்திற்குள், 5 வகையான திரைகள் ஆதரிக்கப்படுகின்றன -xs- -sm- -md- -lg- -xl-.

• -xs- 575px க்கும் குறைவான திரை அளவு;
• -sm- திரை அளவு 576pxக்கு மேல் மற்றும் 767 pxக்கு மேல் இல்லை;
• -md- திரை அளவு 768pxக்கு மேல் மற்றும் 991 pxக்கு மேல் இல்லை;
• -lg- திரை அளவு 992pxக்கு மேல் மற்றும் 1199 pxக்கு மேல் இல்லை;
• -xl- திரை அளவு 1200pxக்கு மேல்;

எனவே, col-lg-12 வகுப்பைக் கொண்ட ஒரு div என்பது, ஒரு பெரிய திரையில் DIV நெடுவரிசை 12 நெடுவரிசைகள் அல்லது 100% அகலத்தை எடுக்கும், அதேபோல் ஒரு ஸ்மார்ட்போன் திரையில் ஒரு div col-sm-6 6 நெடுவரிசைகளை எடுக்கும் அல்லது அகலத்தின் 50%.

கண்ணி கொள்கலன்களின் வகைகள். ரப்பர் தளவமைப்பு

ஒரு கட்டத்திற்கான கொள்கலன்களின் முக்கிய வகைகள் கொள்கலன் மற்றும் கொள்கலன்-திரவ வகுப்புகள் ஆகும்.

கன்டெய்னருக்குள் பயன்படுத்தும் போது, ​​உங்கள் கட்டம் இந்த பகுதியில் அமைந்துள்ள அனைத்து 12 நெடுவரிசைகளுடன், மையத்தில் உள்ள திரையின் மூன்றில் ஒரு பகுதியை ஆக்கிரமிக்கும்.

கன்டெய்னர்-திரவ வகுப்பில் கட்டத்தை வைப்பதன் மூலம், அனைத்து தளவமைப்பு கூறுகளும் ரப்பர் ஒன்றைப் போல முழுத் திரையிலும் அமைந்திருக்கும், மேலும் அகலம் குறையும்போது, ​​அவை ஒன்றையொன்று நோக்கி நகரும்.

கொள்கலன் மற்றும் கொள்கலன் திரவத்தைப் பயன்படுத்துவதற்கு குறிப்பிட்ட பரிந்துரை எதுவும் இல்லை, ஏனெனில் எல்லாமே வடிவமைப்பு தளவமைப்பு மற்றும் தளவமைப்பின் நோக்கத்தைப் பொறுத்தது, இருப்பினும், தளத்தின் நிர்வாக குழு மற்றும் கொள்கலனுக்கு கொள்கலன் திரவத்தைப் பயன்படுத்துவது பொருத்தமானது.

கூடுதலாக, -திரவ வகுப்பானது கொள்கலன் வகுப்பிற்கு மட்டுமல்ல, ஒரு வரிசையில் உள்ள உறுப்புகளை ஒழுங்கமைக்க, வரிசை சரத்திற்கும் பயன்படுத்தப்படலாம். இருப்பினும், நீங்கள் ஒரு வழக்கமான கொள்கலனில் வரிசை திரவத்தை வைத்தால், வித்தியாசத்தை நீங்கள் கவனிக்க மாட்டீர்கள். இந்த கலவை div.container க்கு வெளியே சிறப்பாகப் பயன்படுத்தப்படுகிறது, இது போன்றது:

வணக்கம், நான் ஒரு பூட்ஸ்டார்ப் 3 டெம்ப்ளேட்

என் கொள்கலன் திரவம் அல்ல!

நான் வரிசை திரவம்!

உறுப்புகளை வைப்பதற்கான கோடுகள்

ஒரு வரிசையில் கட்டம் கூறுகளை வைக்க வரிசை வகுப்பு பயன்படுத்தப்படுகிறது, இது அவற்றை கிடைமட்டமாக ஒழுங்கமைக்க உங்களை அனுமதிக்கிறது, ஆனால் வரிசையில் உள்ள குறியீடுகளின் தொகை 12 க்கு மேல் இருக்கக்கூடாது என்பதை நீங்கள் கணக்கில் எடுத்துக்கொள்ள வேண்டும், இல்லையெனில் கடைசி உறுப்பு இருக்கும் இரண்டாவது வரிசைக்கு மாற்றப்பட்டது.

தலைப்பு 1 தலைப்பு 2 தலைப்பு 3

உலாவி பக்க அளவைக் குறைத்தால், தலைப்புகள் கிடைமட்ட வரிசையில் இருந்து செங்குத்து பட்டியலில் வரிசையாக இருக்கும்.

உறுப்பு தெரிவுநிலை வகுப்புகள்

பூட்ஸ்டார்ப் 3 தளவமைப்பு அமைப்பு வெவ்வேறு சாதனங்கள் மற்றும் திரைகளில் கூறுகளைக் காண்பிப்பதற்கு அல்லது மறைப்பதற்கு கூடுதல் வகுப்புகளை வழங்குகிறது. அவை புலப்படும்-*-* மற்றும் மறைக்கப்பட்ட-* என நியமிக்கப்பட்டுள்ளன.

முதல் கோடுக்குப் பிறகு தெரியும்-*-* வகுப்பைக் காண்பிக்கும் வகுப்பில் பொதுவாக ஒரு திரை வகை அடையாளங்காட்டி (xs, sm, md, lg, xl) இருக்கும், மேலும் இரண்டாவது கோடுக்குப் பிறகு நெடுவரிசை அளவு (1-12) இருக்கும். எடுத்துக்காட்டாக, தெரியும்-lg-6 - உறுப்பு ஒரு பெரிய திரையில் தெரியும், 6 நெடுவரிசைகள் அகலம்.

மறைக்கப்பட்ட வகுப்பை-* கோடுக்குப் பிறகு ஒரு திரை வகை அடையாளங்காட்டி (xs,sm,md,lg,xl) உள்ளது, எடுத்துக்காட்டாக, மறைக்கப்பட்ட-xs வகுப்பைக் கொண்ட மார்க்அப் உறுப்பு சிறிய சாதனங்களில் காணப்படாது (திரை அளவு குறைவாக உள்ளது 575px).

இந்த கூறுகளை இணைப்பது, div கொள்கலன்களைக் காட்ட அல்லது மறைக்க உங்களை அனுமதிக்கும்:

தலைப்பு 1 தலைப்பு 2

முதல் தலைப்பு பெரிய சாதனங்களில் தெரியும், இரண்டாவது சிறிய திரைகளில் மறைந்துவிடும். இதைச் செய்ய, உலாவி சாளரத்தின் அளவைக் குறைக்கவும், இதனால் அளவு மொபைல் சாதனத்தின் திரையின் அகலத்தில் ஒத்ததாக இருக்கும்.

வகுப்பில் உள்ள div கொள்கலனில், ஷோ அல்லது மறைக்கப்பட்டதைக் குறிப்பிடவும், ஆனால் இந்த விஷயத்தில் திரை மாறும்போது காட்சி பண்புகள் மாறாது: தெரியும் என்றால், அது தெரியும், மறைக்கப்பட்டால், வகுப்பிலிருந்து மறைக்கப்பட்ட வார்த்தையை மட்டுமே அகற்றும். விரும்பிய உறுப்பைக் காண உங்களை அனுமதிக்கிறது.

பூட்ஸ்டார்ப் 3 இல் மீடியா வினவல்கள்

CSS மீடியா வினவல்களைப் பயன்படுத்த, css கோப்பில் @media என்ற சிறப்புக் குறியீட்டையும், குறைந்தபட்ச மற்றும்/அல்லது அதிகபட்ச திரை அகலத்தையும் அடைப்புக்குறிக்குள் குறிப்பிட வேண்டும். வழக்கமான css மார்க்அப்பில் நீங்கள் திரை அளவுகளை பிக்சல்களில் எழுத வேண்டும் என்றால், பூட்ஸ்ட்ராப் 3 இல் நீங்கள் பின்வரும் கட்டுமானத்தை எழுதலாம்:

@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- நிமிடம்)(... )

உறுப்புகளின் வரிசையை மாற்றுதல்

ஒரு கொள்கலனுக்குள் தொகுதிகளை நகர்த்த உங்களை அனுமதிக்கும் மற்றொரு சுவாரஸ்யமான வகுப்பு, புஷ் கிளாஸ் உறுப்பை வலதுபுறமாகவும், இழுக்கும் வகுப்பை இடதுபுறமாகவும் நகர்த்தும்.

அருகில் உள்ள கொள்கலன்களில் இருந்து இணைக்கும் போது, ​​திரை அளவுகளை மாற்றும் போது பிந்தைய வரிசையை மாற்றலாம். இந்த எடுத்துக்காட்டில், ஒரு பெரிய திரையில் (-lg-) தலைப்பு 2 இடதுபுறத்திலும், தலைப்பு 1 வலதுபுறத்திலும் அமைந்துள்ளது, திரையின் அகலம் நடுத்தர அளவிற்கு (-md-) குறைக்கப்படும் போது, ​​உறுப்புகள் மாறும் மற்றும் வரிசை மாறும் வரிசையாக ஆக.

தலைப்பு 1 தலைப்பு 2

பூட்ஸ்டார்ப் 3 தளவமைப்பு அமைப்புடன் இந்த முதல் அறிமுகத்தை முடிக்கிறேன்; டெம்ப்ளேட் பாணிகள் மற்றும் ஸ்கிரிப்டுகள், அடிப்படை கட்டம் கூறுகள், மீடியா வினவல்கள், கொள்கலன் வகைகள் போன்றவற்றை எவ்வாறு நிறுவுவது என்பதை நீங்கள் கற்றுக்கொண்டீர்கள். பின்வரும் கட்டுரைகளில் துணை மற்றும் கூடுதல் கூறுகளைப் பார்ப்போம்: மெனுக்கள், பொத்தான்கள், ஸ்லைடர்கள், சின்னங்கள் மற்றும் பல.

பிப்ரவரி 24, 2012 ’அன்று’ பிற்பகல் 09:25 ட்விட்டர் பூட்ஸ்டார்ப் அடிப்படையிலான பயனர் இடைமுகம்.

• வலை வடிவமைப்பு

சுருக்கம் இந்தக் கட்டுரையில், ட்விட்டர் பூட்ஸ்டார்ப்பின் அடிப்படையில், சிறிய (ஒற்றை-பக்க) வலைப் பயன்பாட்டிற்கு, html பற்றிய அடிப்படை அறிவை மட்டுமே கொண்டு, நீங்கள் எப்படி ஒரு நல்ல பயனர் இடைமுகத்தை மிக எளிதாக செயல்படுத்த முடியும் என்பதைப் பற்றி பேச முயற்சிப்பேன். வல்லுநர்கள் ஆர்வம் காட்ட மாட்டார்கள் என்று நான் இப்போதே எச்சரிக்கிறேன், அடிப்படை நிலையான செயல்பாடு பற்றி பேசுவோம்.
அறிமுகம் எனது ஓய்வு நேரத்தில், ஒரு பொழுதுபோக்காக, சுவாரஸ்யமான செய்தி ஊட்டத் தலைப்புகளின் ஒரு பக்கத் தொகுப்பை உருவாக்குகிறேன். ஒரு கட்டத்தில், முன்மாதிரியின் அடிப்படை செயல்பாடு தயாராக இருந்தது, "வடிவமைப்பு" பணிக்கு அடுத்துள்ள தேர்வுப்பெட்டியை மட்டும் காணவில்லை. சிக்கலின் அறிக்கை வடிவமைப்பாளரின் மாயாஜாலத்தில் தேர்ச்சி பெறாமல் அழகான பயனர் இடைமுகத்தைப் பெற (உங்களிடம் அடிப்படை மட்டுமே உள்ளது. பெயிண்ட் பற்றிய அறிவு) மற்றும் ஒரு புரோகிராமர் (உங்களுக்கு html மற்றும் css பற்றிய அடிப்படை அறிவு மட்டுமே உள்ளது) .
பக்கம் பின்வரும் கூறுகளைக் கொண்டுள்ளது

• பெயர்
• செய்திக்கான இணைப்பை அனுப்புவதற்கான படிவம்
• மின்னஞ்சல் மூலம் தனிப்பட்ட வாசகர் குறியீட்டை அனுப்புவதற்கான படிவம்
• தனித்துவமான வாசகர் குறியீடு நுழைவு படிவம்
• தேதியின்படி குழுவாக்கப்பட்ட செய்திகளின் பட்டியல் (தேதி, நேரம், தலைப்பு-இணைப்பு, கிளிக்குகளின் எண்ணிக்கை, செய்திகளைப் படிக்கலாம் அல்லது புதியது)
• ஆர்எஸ்எஸ்க்கான இணைப்பு
• குரோம் நீட்டிப்புக்கான இணைப்பு
• ஐடியை வெளியிடு
• கருத்து மின்னஞ்சல்

செயல்முறை ஒரு ஆயத்த டெம்ப்ளேட்டை (css டெம்ப்ளேட்) பல நாட்கள் நிதானமாகத் தேடிய பிறகு, இது உண்மையான ஜெடியின் பாதை அல்ல என்ற முடிவுக்கு வந்தேன், ஏனென்றால்... அழகியல் வடிப்பானைக் கடந்து சென்ற அனைத்தும் தொழில்நுட்ப வடிகட்டியில் சிக்கிக்கொண்டன (சிக்கல் அறிக்கையைப் பார்க்கவும், சிக்கலான குறியீட்டை எனது தேவைகளுக்கு ஏற்ப என்னால் மாற்றியமைக்க முடியவில்லை). பின்னர், கிட்டத்தட்ட தற்செயலாக, நான் சொர்க்கத்திற்குச் சென்றேன். நான் பூட்ஸ்டார்ப்பை விரிவாக விவரிக்க மாட்டேன், இணைப்பைக் கிளிக் செய்வதன் மூலம் விவரங்களைக் காணலாம், ஆயத்த பாணிகள் (சில நேரங்களில் பல) இருக்கும் முக்கிய கூறுகளை பட்டியலிடுவேன்:

நிலையான html வடிவமைப்பு கூறுகள்

பட்டியல்கள்

குறியீடு துணுக்குகள்

அட்டவணைகள்

படிவங்கள்

பொத்தான்கள்

வழிசெலுத்தல் கூறுகள்

பேஜினேஷன்

மினியேச்சர்கள்

தகவல் செய்திகள்

முன்னேற்ற பார்கள்

என் கருத்துப்படி, இது மிகவும் அருமை. நீங்கள் ஒரு முன்மாதிரி வடிவமைக்க வேண்டிய அனைத்தும். அடுத்து, பட்டியலிலிருந்து 1,4,5 மற்றும் 7 கூறுகளை நான் எவ்வாறு பயன்படுத்தினேன் என்பதை நான் உங்களுக்கு சொல்கிறேன். எனவே, படி 1. பூட்ஸ்டார்ப்பை இணைக்கவும். எங்கள் தளத்தின் ரூட் கோப்புறையில் காப்பகத்தை பூட்ஸ்டார்ப்புடன் பதிவிறக்கம் செய்து திறக்கவும், css ஐ இணைக்கவும்:
... ...
பூட்ஸ்டார்ப் ஆதரிக்கும் சாதனங்களுக்கு இடைமுகத்தைத் தானாக மாற்றியமைக்க இரண்டாவது வரி தேவைப்படுகிறது. படி 2. "இறைச்சி"யை வடிவமைக்கவும். "இறைச்சி" என்பதன் மூலம் நான் செய்திப் பட்டியலைக் குறிக்கிறேன். இதைச் செய்வதற்கான எளிதான வழி, பிரேம்கள் முடக்கப்பட்ட அட்டவணையைப் பயன்படுத்துவதாகும். முதல் நெடுவரிசை தேதி (ஒரு குழுவிற்கு ஒரு முறை மட்டுமே), இரண்டாவது நெடுவரிசை நேரம், மூன்றாவது தலைப்பு மற்றும் மாற்றங்களின் எண்ணிக்கை. இவை அனைத்தும், பூட்ஸ்டார்ப் விதிகளின்படி, ஒரு கொள்கலனில் தொகுக்கப்பட வேண்டும்:

(நாளில்)

(நேரம்)

(தலைப்பு) ((மாற்றங்களின் எண்ணிக்கை))

செய்திகளைப் படிக்க, நாங்கள் ஒரு சிறப்பு வகுப்பைக் குறிப்பிடுகிறோம்:
(தலைப்பு) படி 3. செய்திக்கான இணைப்பை அனுப்புவதற்கான படிவம். இங்கே மீண்டும் எல்லாம் எளிமையானது, பூட்ஸ்டார்ப் பல ஆயத்த வடிவ வடிவங்களை வழங்குகிறது: வழக்கமான வடிவம், ஒரு வரி வடிவம், ஒரு தேடல் படிவம்... நமக்கு இரண்டாவது ஒன்று தேவை, அதை அட்டவணையின் முன் உள்ள கொள்கலனில் சேர்க்கவும்:
கூட்டு ...
class="span10" - பூட்ஸ்டார்ப் 12 நெடுவரிசைகளின் கட்டத்தின் அடிப்படையில் ஒரு இடைமுகத்தை உருவாக்குகிறது; எங்கள் கூறுகளை அதனுடன் சீரமைக்க முடியும். சோதனை மற்றும் பிழையின் அறிவியல் முறை மூலம், உள்ளீட்டு புலத்தின் அகலம் 10க்கு சமமாக வந்தேன். படி 4,5,6. தொப்பி. ஒரு பயனர் நட்பு இணையதளம் எப்படி இருக்க வேண்டும் என்பது பற்றிய எனது கருத்துக்கள் குறைந்தபட்ச பாணியை பரிந்துரைக்கின்றன: தேவையற்ற அனைத்தும் மறைக்கப்பட்டுள்ளன, மறைக்க முடியாத அனைத்தும் வெளிர். கீழ்தோன்றும் மெனுவில் படிவங்களை மறைத்து, ஆர்எஸ்எஸ் மற்றும் குரோம் நீட்டிப்புக்கு இணைப்புகளை உருவாக்குகிறோம். இதையெல்லாம் ஒரு ஹெடரில் பேக் செய்கிறோம், அதை நாங்கள் தளத்தின் மேற்புறத்தில் ஒட்டுகிறோம் (வகுப்பு = "navbar navbar-fixed-top"):
***

• ஆர்எஸ்எஸ்
• குரோம் நீட்டிப்பு

• உங்கள் தனிப்பட்ட வாசகர் குறியீடு (குறியீடு)
  • மின்னஞ்சல் மூலம் அனுப்பவும்
  • மற்றொரு குறியீட்டை உள்ளிடவும்

...
வடிவங்கள் தானே:
... ×மின்னஞ்சல் மூலம் தனிப்பட்ட குறியீட்டை அனுப்பவும்

அனுப்புவதை ரத்துசெய் ×தனிப்பட்ட வாசகர் குறியீட்டை உள்ளிடவும்

வெவ்வேறு கணினிகளில் படிக்கும் செய்திகளை ஒத்திசைக்க உங்களை அனுமதிக்கிறது.

அனுப்புவதை ரத்துசெய்

முக்கியமான புள்ளி. இது வேலை செய்ய, நீங்கள் இரண்டு ஸ்கிரிப்ட்களை இணைக்க வேண்டும்:
...

படி 7. அடிக்குறிப்பு. பிரதான கொள்கலனைச் சேர்த்தல்:
...

வெளியீடு 2012/02/19 23:49 *****

ResultEpilogue ட்விட்டர் பூட்ஸ்டார்ப், அதிக முயற்சி மற்றும் அறிவு இல்லாமல், CSS இன் ஒரு வரியை எழுதாமல், html குறியீட்டை அதிகம் உடைக்காமல், மக்களுக்குக் காட்ட நீங்கள் வெட்கப்படாத ஒரு நல்ல முன்மாதிரி இடைமுகத்தைப் பெறுவதை சாத்தியமாக்கியது. நீங்கள் ஆர்வமாக இருந்தால், அடுத்த கட்டுரையில், PHP + MySQL (அடிப்படை நிரலாக்க திறன்கள் மட்டுமே) பற்றிய ஆழமான அறிவு இல்லாமல், உங்கள் மில்லியன் டாலர் யோசனையை காகிதத்தில் மட்டும் காட்ட அனுமதிக்கும் செயல்பாட்டை நீங்கள் எவ்வாறு செயல்படுத்தலாம் என்பதை நான் உங்களுக்கு சொல்கிறேன். வேலை செய்யும் முன்மாதிரி வடிவத்தில்.
உங்கள் கவனத்திற்கு நன்றி!
UPD: "I'm PR" இல் உள்ள தலைப்பை நீக்க விரும்பவில்லை, தேவையற்ற அனைத்து இணைப்புகளையும் நீக்கிவிட்டேன்

நண்பர்களே, பூட்ஸ்டார்ப் மிகவும் அருமையான விஷயம் என்று நான் நினைக்கிறேன். இது ஏன் என்று இந்த கட்டுரையில் விளக்க முயற்சிப்பேன். சரி போகட்டும்.கட்டுரையின் முதல் பாதி முழுவதும் படங்களின்றி எழுதப்பட்டிருப்பதற்கு நான் உடனடியாக மன்னிப்பு கேட்டுக்கொள்கிறேன், ஒரு கோட்பாடு, கட்டம் எவ்வாறு செயல்படுகிறது என்பதற்கான விளக்கம் மட்டுமே உள்ளது. ஆனால் இது மிகவும் முக்கியமானது! உங்களில் எவருக்கும் இது தேவைப்படுகிறதோ, அவர் அதைத் தன் கைகளில் எடுத்து, அதைப் படித்து, புரிந்துகொள்வார் என்று நம்புகிறேன். கட்டுரையின் இரண்டாம் பாதி ஏற்கனவே மிகவும் எளிமையாக உணரப்பட்டுள்ளது, ஸ்கிரீன் ஷாட்களுடன் பல எடுத்துக்காட்டுகள் உள்ளன.

பூட்ஸ்ட்ராப் - அது என்ன?

எனவே ஒரு முக்கியமான கேள்வியுடன் ஆரம்பிக்கலாம். பூட்ஸ்டார்ப் என்பது ஒரு CSS மற்றும் JS கட்டமைப்பாகும், அடிப்படையில் தயாராக எழுதப்பட்ட குறியீட்டைக் கொண்ட கோப்புகளின் தொகுப்பாகும். எந்தவொரு கட்டமைப்பின் டெவலப்பர்களின் குறிக்கோள், தங்களுக்கும் கருவியை அணுகக்கூடிய பிறருக்கும் இணையதள மேம்பாட்டை எளிதாக்குவதாகும். பூட்ஸ்டார்ப் விஷயத்தில், இது முற்றிலும் இலவசம், எனவே நீங்கள் அதை எந்த வகையிலும் பயன்படுத்தலாம், மூலக் குறியீட்டைத் திருத்தலாம் மற்றும் நீங்கள் விரும்பும் விதத்தில் கட்டமைப்பைத் தனிப்பயனாக்கலாம். இது முற்றிலும் உள்ளது.

பூட்ஸ்ட்ராப்பை நிறுவுகிறது

ஃபிரேம்வொர்க் கோப்புகளை ஒரு HTML ஆவணத்துடன் இணைக்க வேண்டும் என்றால் (உதாரணமாக, நடைமுறைக்கு), getbootstrap.com என்ற அதிகாரப்பூர்வ வலைத்தளத்திலிருந்து கட்டமைப்பைப் பதிவிறக்கி, அதன் கோப்புகளை திட்டத்தில் நகலெடுத்து உங்களுக்குத் தேவையானவற்றை இணைக்கவும். இந்த கோப்புகளின் சுருக்கமான கண்ணோட்டத்தை தருகிறேன்:

bootstrap.css மற்றும் bootstrap.min.css - கட்டமைப்பின் CSS குறியீட்டின் சுருக்கப்படாத மற்றும் சுருக்கப்பட்ட பதிப்புகள். உங்கள் பணித் திட்டத்துடன் சுருக்கப்பட்ட கோப்பைச் சேர்க்க பரிந்துரைக்கப்படுகிறது, இந்த வழியில் நீங்கள் ஏற்றுதல் வேகத்தை சற்று மேம்படுத்துவீர்கள். ஆனால் ஒரு கோப்பில் குறியீட்டைப் பார்க்க நீங்கள் திட்டமிட்டால், சுருக்கப்படாத பதிப்பை இணைக்கவும்.

bootstrap.js மற்றும் bootstrap.min.js - ஸ்கிரிப்ட்களுடன் கூடிய கோப்பு

எழுத்துருக்கள் கோப்புறை மற்றும் அதில் உள்ள glyphicons கோப்புகள் பூட்ஸ்டார்ப் ஐகான் எழுத்துரு ஆகும். இது சுமார் 200 ஐகான்களைக் கொண்டுள்ளது. பெரும்பாலான சந்தர்ப்பங்களில் உங்களிடம் போதுமான அளவு இருக்கும், சில நேரங்களில் நீங்கள் மற்றவர்களை இணைக்க வேண்டும். ஐகான் எழுத்துரு பற்றி பின்னர் பேசுவோம்.

இது கட்டமைப்பின் நிலையான தொகுப்பு ஆகும். உண்மையில், நீங்கள் அதை எளிதாக தனிப்பயனாக்கலாம் மற்றும் உங்களுக்கு ஏற்றவாறு மாற்றலாம். எடுத்துக்காட்டாக, ஸ்கிரிப்ட்களைப் பயன்படுத்த வேண்டாம் அல்லது ஒரே ஒரு கட்டத்தை மட்டும் இணைக்க வேண்டாம். பொதுவாக, இதைப் பற்றியும் பேசுவோம்.

ரஷ்ய பூட்ஸ்டார்ப் ஆவணங்கள்

நீங்கள் getbootstrap ஐப் பார்வையிடும்போது, ​​இங்குள்ள அனைத்தும் ஆங்கிலத்தில் இருப்பதை நீங்கள் கவனித்திருக்கலாம். கட்டமைப்பில் ரஷ்ய உதவியைப் பயன்படுத்தலாம். கண்டுபிடிக்க எளிதானது. இதைச் செய்ய, பிரதான பக்கத்திலிருந்து தொடங்குதல் பகுதிக்குச் செல்லவும். மிகவும் கீழே உருட்டவும், மொழிபெயர்ப்புகளுக்கான இணைப்பு இருக்கும். அங்கு ரஷ்யனைப் பார்த்து, அதைக் கிளிக் செய்யவும். அவ்வளவுதான், இப்போது நீங்கள் தளத்தின் ரஷ்ய பதிப்பில் இருக்கிறீர்கள். உண்மை, இங்கே எல்லாம் மொழிபெயர்க்கப்படவில்லை, ஆனால் எங்காவது 70-80% துல்லியமாக உள்ளது, எனவே நீங்கள் எல்லாவற்றையும் புரிந்துகொள்வீர்கள்.

பூட்ஸ்ட்ராப் கட்டம்

ஒருவர் என்ன சொன்னாலும், பூட்ஸ்டார்ப்பின் முக்கிய உறுப்பு பதிலளிக்கக்கூடிய கட்டம். பொதுவாக, இது இல்லாமல், கட்டமைப்பானது அதன் அனைத்து மதிப்பையும் இழக்கும், ஏனென்றால் கட்டத்திற்கு நன்றி நீங்கள் விரைவாக தகவமைப்பு வார்ப்புருக்களை உருவாக்கலாம். அதே நேரத்தில், நீங்கள் ஊடக வினவல்களைப் பற்றி அறிந்திருக்காமல் இருக்கலாம்; உங்களுக்கு அவை தேவையில்லை, ஏனென்றால் கட்டமைப்பானது தகவமைப்புத் திறனை செயல்படுத்துவதைக் கவனித்துக்கொள்கிறது; நீங்கள் தொகுதிகளுக்கு சரியான வகுப்புகளை ஒதுக்க வேண்டும்.

இந்த வகுப்புகள் என்ன? ஆவணங்களுக்குச் செல்வோம், அது நமக்கு நிறைய உதவும். CSS - கிரிட் சிஸ்டம் பகுதிக்குச் செல்லவும். ஒரு கட்டத்துடன் பணிபுரிவதற்கான பொதுவான விதிகள் எளிமையானவை; அவற்றை இப்போது பட்டியலிடுகிறேன்.

ஒரு கட்டத்துடன் எவ்வாறு வேலை செய்வது?

இதை ஒரு html அட்டவணையாக நினைத்துப் பாருங்கள். நீங்கள் எப்போதாவது அட்டவணைகளுக்கு HTML குறியீட்டை எழுதியிருந்தால், எல்லா உள்ளடக்கமும் டேபிள் டேக்கில் வைக்கப்பட்டுள்ளது, ஒரு வரிசை tr குறிச்சொல்லில் வைக்கப்பட்டுள்ளது, பின்னர் செல்கள் அதில் வைக்கப்படும் - td .

எனவே, கட்டத்தில் எல்லாம் ஒத்திருக்கிறது. கொள்கலன் வகுப்பு கட்டத்திற்கான பொதுவான கொள்கலனாக செயல்படுகிறது. பூட்ஸ்ட்ராப் கட்டத்திற்கு 2 விருப்பங்கள் உள்ளன - முற்றிலும் ரப்பர் மற்றும் இன்னும் வரையறுக்கப்பட்ட அதிகபட்ச அகலம் உள்ளது. எனவே, பொதுத் தொகுதிக்கு கொள்கலன் வகுப்பைக் கொடுக்கும்போது, ​​தளம் அதிகபட்சமாக 1170 பிக்சல்கள் அகலத்தைக் கொண்டிருக்கும். இது மேலும் விரிவடையாது. இயற்கையாகவே, உள்ளடக்கம் மையமாக இருக்கும்.

நீங்கள் கொள்கலன்-திரவ வகுப்பை அமைத்தால், கண்ணி முற்றிலும் ரப்பராக இருக்கும், அதாவது அளவு கட்டுப்பாடுகள் இருக்காது. உதாரணமாக, ஒருவர் 1920 பிக்சல் அகலமான மானிட்டரில் இணையதளத்தைத் திறந்தால், அவர் அதை முழு அகலத்தில் பார்ப்பார்.

அதன்படி, ஒரு வலைத்தளத்தை உருவாக்கும் போது முதல் விஷயம் டெம்ப்ளேட் எப்படி இருக்கும் என்பதை தீர்மானிக்க வேண்டும் - முற்றிலும் ரப்பர், அல்லது அதன் அகலம் இன்னும் குறைவாக இருக்க வேண்டும்.

சிறந்தது, கொள்கலன் தொகுதியில் ஒரு வரிசை கட்டம் இருக்க வேண்டும். ஒரு வரியில் இருக்கும் அனைத்து தொகுதிகளையும் அதில் வைக்க வேண்டும். அதாவது, நாம் மிகவும் பொதுவான டெம்ப்ளேட்டை எடுத்துக் கொண்டால்: தலைப்பு, முக்கிய பகுதி, வலது நெடுவரிசை மற்றும் அடிக்குறிப்பு, பின்னர் 3 நெடுவரிசைகள் உள்ளன. முதலாவது தலைப்பு மட்டுமே இருக்கும், இரண்டாவது உள்ளடக்கம் மற்றும் பக்கப்பட்டியைக் கொண்டிருக்கும், கடைசியில் அடிக்குறிப்பு இருக்கும். அத்தகைய தளத்திற்கான மார்க்அப் இது போன்றது:

தலைப்பு உள்ளடக்கம்... மற்றும் அடிக்குறிப்பு பக்கப்பட்டி

ஆனால் இப்போதைக்கு இது தவறான மார்க்அப், ஏனென்றால் அது காணவில்லை... என்ன? அது சரி, செல்கள்! பூட்ஸ்ட்ராப் விஷயத்தில், அவை நெடுவரிசைகள் என்றும் அழைக்கப்படுகின்றன. பூட்ஸ்ட்ராப் கட்டம் 12 நெடுவரிசைகளைக் கொண்டுள்ளது. குறைந்தபட்சம் 1200 பிக்சல்கள், குறைந்தபட்சம் 100, எந்த அகலத்தின் எந்த தொகுதியிலும் இது உட்பொதிக்கப்படலாம். நெடுவரிசைகளின் அகலம் பிக்சல்களில் அல்ல, ஆனால் சதவீதங்களில் குறிப்பிடப்படுவதே இதற்குக் காரணம்.

இந்த 12 நெடுவரிசை அமைப்பு எவ்வாறு செயல்படுகிறது?

எனவே, கட்டமைப்பு தொடர்பான மிக முக்கியமான பிரச்சினைக்கு வருகிறோம். நம்புங்கள், இதை நீங்கள் புரிந்து கொண்டால், மற்ற அனைத்தும் முட்டாள்தனம். முக்கிய விஷயம் என்னவென்றால், கட்டம் எவ்வாறு செயல்படுகிறது என்பதைப் புரிந்துகொள்வது மற்றும் விரைவான தகவமைப்பு தளவமைப்புக்கான பாதை உங்களுக்குத் திறக்கப்படும்.

இதைச் செய்ய, கீழே உள்ள ஆவணங்களை உருட்டவும், முக்கியமான கட்டம் பண்புகளைக் கொண்ட அட்டவணையை நீங்கள் காணலாம்.

மூலம், நெடுவரிசைகள் பூட்ஸ்டார்ப்பில் col- class உடன் குறிக்கப்பட்டுள்ளன, ஆனால் இது ஒரு கூட்டு வகுப்பு, எனவே அவை ஒருபோதும் col- என்று எழுதுவதில்லை. பூட்ஸ்டார்ப்பில் 4 சிறப்பு வகுப்புகள் உள்ளன, அவை வெவ்வேறு அகலங்களில் தொகுதிகளின் அளவைக் கட்டுப்படுத்த வடிவமைக்கப்பட்டுள்ளன, அவை இங்கே:

ld - பெரிய திரைகளுக்கு, 1200 பிக்சல்களுக்கு மேல் அகலம் (டெஸ்க்டாப் கணினிகள்);

md - நடுத்தர திரைகளுக்கு, அகலம் 992 முதல் 1199 வரை (கணினிகள், நெட்புக்குகள்);

sm - சிறிய திரைகளுக்கு, அகலம் 768 முதல் 991 பிக்சல்கள் (மாத்திரைகள்);

xs - கூடுதல் சிறிய திரைகள், 768px க்கும் குறைவான அகலம்.

இவை 4 வகுப்புகள், ஆனால் உறுப்புகளின் அளவைக் கட்டுப்படுத்த, 1 முதல் 12 வரையிலான எண்கள் பயன்படுத்தப்படுகின்றன, ஏனெனில், நீங்கள் நினைவில் வைத்துள்ளபடி, கட்டத்தில் சரியாக 12 நெடுவரிசைகள் உள்ளன.

தலைப்பு உள்ளடக்கம் பக்கப்பட்டி அடிக்குறிப்பு

புரிந்துகொள்வது மிகவும் எளிது. முதலாவதாக, நாங்கள் ஒரு தலைப்பை உருவாக்குகிறோம்; அது எந்த வகையிலும் 100% அகலத்தை (பொதுவாக) ஆக்கிரமித்துக்கொள்ளும் என்பதால், அது கட்டங்களில் வைக்கப்பட வேண்டியதில்லை. ஆனால் நாங்கள் அதை எப்படியும் போடுவோம். இந்த வகுப்பு col-md-12 என்றால் என்ன? நான் ஏற்கனவே உங்களுக்குச் சொன்னது போல், யாரும் வெறுமனே col- என்று எழுதுவதில்லை, இந்த வகுப்பில் நாங்கள் உலாவிக்கு முக்கியமாக சொல்கிறோம்:
இது ஒரு செல் | நெடுவரிசை
நடுத்தர சாதனங்களில் (md class), அதன் அகலம் 12 இல் 12 நெடுவரிசைகளாக இருக்க வேண்டும், அதாவது வரிசை அகலத்தின் 100%.
ஆனால் மற்ற சாதனங்களில் அகலம் பற்றி என்ன? பெரிய (எல்ஜி) திரைகளில் இது 100% ஆக இருக்கும், ஏனெனில் பெரிய திரைகளுக்கான மதிப்புகள் மரபுரிமையாக இருக்கும், ஆனால் சிறியவற்றுக்கு அவை இல்லை. இது எளிமையானது: நீங்கள் col-xs-4 ஐ எழுதியிருந்தால், எல்லா சாதனங்களிலும் நெடுவரிசையின் அகலம் 33% ஆக இருக்கும், மேலும் col-lg-4 எனில், பெரியவற்றில் மட்டும். இதுதான் அம்சம், நினைவில் கொள்ளுங்கள்.

சரி, அகல மதிப்பு சிறிய திரைகளில் சேமிக்கப்படவில்லை என்றால், என்ன நடக்கும்? இது மீட்டமைக்கப்படுகிறது. இது எப்படி நடக்கிறது என்பது இங்கே:
col-sm-4 - சிறிய திரைகளில் தொகுதி 33% அகலத்தை ஆக்கிரமிக்கும், இது md மற்றும் lg திரைகளில் ஒரே மாதிரியாக இருக்கும், ஆனால் xs இல், அதாவது, சிறியவை, அகலம் 100% ஆக மீட்டமைக்கப்படும். எனவே, இன்னும் ஒரு எளிய விதியை நினைவில் கொள்ளுங்கள்: சிறிய திரைகளுக்கு எதுவும் குறிப்பிடப்படவில்லை என்றால், அவற்றில் தொகுதி 100% அகலத்தில் காட்டப்படும்.

உள்ளடக்க பக்கப்பட்டி

முக்கியமாக நாங்கள் உலாவிக்குச் சொல்கிறோம்:
உள்ளடக்கத் தொகுதி 12 நெடுவரிசைகளில் 8 அகலமாக இருக்கட்டும், இந்த நிலை சிறிய, நடுத்தர மற்றும் பெரிய திரைகளில் இருக்கும் (சிறிய, பெரிய திரைகளுக்கு, நீங்கள் நினைவில் வைத்துள்ளபடி, மதிப்பு மரபுரிமையாகக் குறிப்பிடப்பட்டால் போதும்). ஆனால் சிறிய திரைகளில் தொகுதி 100% ஆக்கிரமிக்கப்படும். இது சரியானது; வழக்கமாக, மொபைல் சாதனங்களில், தளங்கள் 1 நெடுவரிசையில் தோன்றும்.
அதே சிறிய, நடுத்தர மற்றும் பெரிய திரைகளில் பக்க நெடுவரிசை வரிசையின் அகலத்தில் மூன்றில் ஒரு பங்காக இருக்கட்டும். மிகச் சிறியவற்றில், நீங்கள் ஏற்கனவே புரிந்து கொண்டபடி, அதன் அகலமும் 100% ஆக மீட்டமைக்கப்படும். இது மிகவும் எளிமையானது.

சரி, அடிக்குறிப்பைச் சமாளிக்க எதுவும் இல்லை. சரி, கட்டம் எவ்வாறு செயல்படுகிறது என்பதற்கான அடிப்படைக் கொள்கைகளை நாங்கள் உள்ளடக்கியுள்ளோம், ஆனால் அது எவ்வாறு செயல்படுகிறது என்பதை நாம் இன்னும் பார்க்க வேண்டும்...

பூட்ஸ்ட்ராப் உள்ளமை கட்டம்

உண்மை என்னவென்றால், இப்போது நாம் வார்ப்புருவை முக்கிய தொகுதிகளாக மட்டுமே பிரித்துள்ளோம், ஆனால் உள்ளே அவற்றை நெடுவரிசைகளாகவும் பிரிக்கலாம். எடுத்துக்காட்டாக, உள்ளடக்கம் பல நெடுவரிசைகளில் தயாரிப்புகளைக் காட்டலாம். நான் என்ன செய்ய வேண்டும்? இது மிகவும் எளிது - உள்ளே அதே கட்டத்தை உருவாக்குகிறோம். இது உள்ளமைக்கப்பட்டதாக இருக்கும், ஆனால் 12 நெடுவரிசைகளையும் கொண்டிருக்கும். இதையெல்லாம் சுருக்கமாகச் சொன்னால், நாம் இந்த முடிவுக்கு வருகிறோம்:
எந்த தொகுதியிலும் வரம்பற்ற கட்டங்கள் இருக்கலாம். எடுத்துக்காட்டாக, தயாரிப்புகளைக் கொண்ட ஒரு தொகுதியில் தயாரிப்புகளைப் பிரிப்பதற்கான ஒரு கட்டம் உள்ளது; ஒரு தயாரிப்பைக் கொண்ட தொகுதியில், நீங்கள் மற்றொரு கட்டத்தை உருவாக்கலாம், எடுத்துக்காட்டாக, விலைகள், கிடைக்கும் தகவல் மற்றும் கூடுதல் தகவல்களைப் பிரிக்க. தகவல்.

இப்போது 3 நெடுவரிசைகளில் தயாரிப்புகளை ஏற்பாடு செய்ய உள்ளடக்கத் தொகுதிக்குள் மற்றொரு கட்டத்தை உருவாக்க முயற்சிப்போம். எனவே, எங்களிடம் உள்ளடக்கம் உள்ள தொகுதியை எடுத்துக் கொள்வோம்:

உள்ளடக்கம்

நாங்கள் அதில் எழுதுகிறோம்:

தயாரிப்பு பட்டியல்: தயாரிப்பு பெயர்

தயாரிப்பு விளக்கம்

நீங்கள் பார்க்க முடியும் என, உள்ளடக்கத்தின் உள்ளே ஒரு புதிய கட்டத்தை உருவாக்கியுள்ளோம் - உள்ளே ஒரு வரிசையை வைக்கிறோம், மற்றும் வரிசையில் ஏற்கனவே தயாரிப்புகளுடன் 3 தொகுதிகள் இருக்கும். தயாரிப்பு அட்டையுடன் col-sm-4 தொகுதியை நகலெடுத்து மேலும் 2 முறை ஒட்டவும், இதுவே உங்களுக்குக் கிடைக்கும் (நீங்கள் எந்த தயாரிப்புப் படத்தையும் எடுக்கலாம், நான் பெரிய ஒன்றை எடுத்தேன்):

நான் மற்றொரு முக்கியமான விஷயத்தை தவறவிட்டேன்: படங்கள் அவை அமைந்துள்ள தொகுதிகளுக்கு ஏற்ப மாற்றுவதற்கு, அவை ஒவ்வொன்றும் img-பதிலளிக்கும் வகுப்பைக் கொடுக்க வேண்டும். என்னைப் போலவே நீங்களும் இதைச் செய்வது சிரமமாக இருப்பதாக நினைத்தால், உங்கள் சொந்த பாணியில் எழுதுங்கள்.

Img (அதிகபட்ச அகலம்: 100%; உயரம்: தானியங்கு; காட்சி: தொகுதி; )

அவ்வளவுதான், இந்த குறியீட்டைச் சேமித்து, உங்கள் css கோப்பை திட்டத்துடன் இணைக்கவும். இப்போது படங்கள் இயல்பாகவே தகவமைக்கப்படும்.

சரி, அது மிகவும் சீராக மாறியதா? ஆம், ஆனால் பூட்ஸ்ட்ராப் இல்லாமல் நீங்கள் நீண்ட காலம் கஷ்டப்பட வேண்டியிருக்கும். ஒரே விஷயம் என்னவென்றால், எந்த பிளாக்கிற்குள்ளும் ஒரு கட்டத்தை உருவாக்கும்போது, ​​அதில் கண்டெய்னர் கிளாஸ் உள்ள பிளாக்கை இனி உருவாக்க வேண்டியதில்லை. இது ஏன் தேவையில்லை? ஆம், ஏனெனில் கட்டம் உருவாக்கப்பட்ட தொகுதி ஒரு கொள்கலனாக செயல்படுகிறது.

எனவே, எந்த தொகுதியிலும் நீங்கள் விரும்பும் பல நெடுவரிசைகளை உருவாக்கலாம் மற்றும் எந்த சிக்கலான டெம்ப்ளேட்டையும் உருவாக்கலாம். பூட்ஸ்டார்ப் இல்லாததை விட இவை அனைத்தும் மிக வேகமாக இருக்கும், ஏனென்றால் நீங்கள் புதிதாக அனைத்து css ஐயும் எழுத வேண்டும்.

பதிலளிக்கக்கூடிய பயன்பாடுகள்

இது பூட்ஸ்ட்ராப்பின் மற்றொரு சிறந்த அம்சமாகும். உங்களுக்குத் தேவையான அகலத்தில் எந்தத் தொகுதிகளையும் நீங்கள் மறைக்கலாம் அல்லது காணக்கூடியதாக மாற்றலாம் என்ற உண்மையை இது கொண்டுள்ளது. எடுத்துக்காட்டாக, குறுகிய திரைகளில் பக்க நெடுவரிசையை முழுவதுமாக மறைக்கவும், மொபைல் சாதனங்களில் சில புதிய கூறுகளைச் சேர்க்கவும், பரந்த திரைகளில் ஒரு நெடுவரிசையைச் சேர்க்கவும்.

நிறைய பயன்பாட்டு விருப்பங்கள் உள்ளன, ஆனால் மிக முக்கியமான விஷயத்தைப் பற்றி நான் உங்களுக்குச் சொல்லவில்லை: இந்த பயன்பாடுகளை எவ்வாறு பயன்படுத்துவது? இதைச் செய்ய, விரும்பிய தொகுதிக்கு வகுப்புகளைச் சேர்க்கவும். நீங்கள் அதை மறைக்க வேண்டும் என்றால், பின்வரும் வகுப்பைக் குறிப்பிடவும்:

அடிக்குறிப்பு

இந்த வழக்கில் மறைக்கப்பட்ட-xs வகுப்பு என்ன செய்யும்? இது கூடுதல் சிறிய சாதனங்களில் அடிக்குறிப்பை மறைக்கும். மற்ற எல்லாவற்றிலும் தொகுதி தெரியும்.

மாறாக, நீங்கள் அதை சிறிய திரைகளில் மட்டுமே காட்ட வேண்டும் என்றால், நீங்கள் காணக்கூடிய-xs-block வகுப்பைப் பயன்படுத்த வேண்டும். இந்த வழக்கில், குறுகிய திரைகளைத் தவிர மற்ற எல்லாவற்றிலும் தொகுதி மறைக்கப்படும். எனவே, தகவமைப்பு பயன்பாட்டு வகுப்புகள் இப்படி எழுதப்பட்டுள்ளன:

உங்களுக்குத் தேவையானதைப் பொறுத்து மறைந்திருக்கும் அல்லது தெரியும் வார்த்தை

xs, sm, md அல்லது lg என்ற சுருக்கம் எந்தத் திரைகளில் தடுப்பை மறைக்க அல்லது காட்ட வேண்டும் என்பதைக் குறிக்கிறது.

பார்வைக்கு, நீங்கள் மூன்று மதிப்புகளில் ஒன்றைச் சேர்க்க வேண்டும்: தொகுதி - உறுப்பை ஒரு தொகுதி உறுப்பாகக் காட்டவும், இன்லைன்-பிளாக் - இன்லைன்-பிளாக் உறுப்பாகவும், இன்லைன் - இன்லைன்.

சரி, அதை தெளிவுபடுத்த இரண்டு எடுத்துக்காட்டுகள்:

மறைக்கப்பட்ட-xs மறைக்கப்பட்ட-எல்ஜி - சிறிய மற்றும் பெரிய திரைகளில் உறுப்பு மறைக்கும். நீங்கள் பார்க்க முடியும் என, ஒரு இடைவெளியால் பிரிக்கப்பட்ட பல வகுப்புகளை நீங்கள் குறிப்பிடலாம்.

காணக்கூடிய-xs-inline visual-md-block - சிறிய மற்றும் பெரிய திரைகளில் உறுப்பு காட்டப்படாது. கூடுதல்-சிறியவற்றில் அது சிற்றெழுத்தும், நடுத்தரமானவற்றில் தொகுதியும் இருக்கும்.

காணக்கூடிய-எல்ஜி-பிளாக் - உறுப்பு மிகப்பெரிய திரைகளில் மட்டுமே தெரியும், மற்ற எல்லாவற்றிலும் அது மறைக்கப்படும்

இப்படித்தான் எல்லாமே வேலை செய்கிறது. அவ்வளவுதான், வேறு வழியில்லை. இதை நீங்கள் புரிந்து கொள்வீர்கள் என்று நம்புகிறேன். அதை நடைமுறைப்படுத்துவோம். எங்களிடம் ஒரு சோதனை டெம்ப்ளேட் உள்ளது, இருப்பினும் இது மிகவும் பழமையானது.

பணி: சிறிய திரைகளில் பக்க நெடுவரிசை மறைந்துவிடும், மேலும் சிறிய திரைகளில் ஒரு தயாரிப்பு. அதனால் xs சாதனங்களில் தயாரிப்புகள் ஏற்கனவே 2 நெடுவரிசைகளில் உள்ளன, 3 அல்ல.

html குறியீட்டை மட்டும் திருத்துவதன் மூலம் அதை நீங்களே செய்ய முயற்சிக்கவும். என்ன செய்ய வேண்டும்? முதலில், நெடுவரிசையைப் பார்ப்போம், அதை எஸ்எம் திரைகளில் மறைக்க, நீங்கள் அதில் மறைக்கப்பட்ட எஸ்எம் வகுப்பைச் சேர்க்க வேண்டும்.

சிறந்தது, இப்போது மூன்றாவது தயாரிப்பு மறைக்கப்பட்ட-xs வகுப்பைச் சேர்க்க வேண்டும், மேலும் அது சிறிய திரைகளில் மறைந்துவிடும். சரி, மீதமுள்ள இரண்டு பொருட்களின் வகுப்புகள் பின்வருமாறு இருக்கும்:

அதாவது, நடுத்தர சாதனங்களில், தொகுதி 12 இல் 4 நெடுவரிசைகளை ஆக்கிரமிக்கும், இது அகலத்தின் 33.33% ஆகவும், கூடுதல் சிறிய சாதனங்களில் - 50% ஆகவும் மொழிபெயர்க்கப்படலாம். இந்த அகலத்தில் ஒரு தயாரிப்பைக் கொண்ட ஒரு தொகுதி மறைந்துவிடும் என்பதால், தயாரிப்புகளைக் கொண்ட இரண்டு தொகுதிகளும் 1 வரிசையில் நேர்த்தியாக அமைக்கப்பட்டிருக்கும்.

நன்று! இதைப் புரிந்துகொண்டு, வலைப்பக்கத்தில் உள்ள தொகுதிகளை நீங்கள் விரும்பும் எந்த வகையிலும் நீங்கள் ஏற்கனவே கையாளலாம். உங்களுக்காக பணிகளைக் கொண்டு வந்து அவற்றைச் செயல்படுத்த முயற்சிக்கவும்.

என்னை எல்லா வழிகளிலும் நகர்த்துங்கள்

அடுத்து நான் உங்களுக்கு மற்றொரு நல்ல தந்திரத்தைக் காண்பிப்பேன் - ஒரு தொகுதியை வலது அல்லது இடது பக்கம் நகர்த்தும் திறன். எங்களிடம் ஒரு வரிசையில் 3 தயாரிப்புகள் இல்லை என்று வைத்துக்கொள்வோம், ஆனால் 1. மேலும் அது முழு அகலத்தையும் ஆக்கிரமிக்கவில்லை. உங்கள் பணி அதை மையத்தில் சீரமைப்பதாகும். நீங்கள் 12-நெடுவரிசை அமைப்புடன் பணிபுரிகிறீர்கள் என்பதை மனதில் வைத்துக் கொண்டால் இதைச் செய்வது எளிது.

தயாரிப்புடன் ஒரு தொகுதியை விட்டுவிடுவோம்:

தொகுதியை மையப்படுத்த நீங்கள் எவ்வளவு நகர்த்த வேண்டும் என்பதைப் புரிந்துகொள்ள எளிய கணக்கீடுகளைச் செய்தால் போதும். நடுத்தர மற்றும் பெரிய திரைகளில் 4 நெடுவரிசைகளையும், சிறிய திரைகளில் 3 நெடுவரிசைகளையும் இடதுபுறமாக நகர்த்த வேண்டும். இது போல் தெரிகிறது:

வகுப்பு col-md-offset-4 கூறுகிறது: நடுத்தர மற்றும் பெரிய திரைகளில், பெற்றோர் கொள்கலனின் அகலத்தில் 33% (1/3 இடது ஆஃப்செட், 1/3 தொகுதி அகலம், ⅓ வலது ஆஃப்செட், இதன் விளைவாக மையப்படுத்துதல்).
வகுப்பு col-xs-offset-6: கூடுதல் சிறிய மற்றும் சிறிய திரைகளில், 25% இடப்புறம் மாற்றவும் (¼ திணிப்பு இடது, ½ தொகுதி அகலம், ¼ திணிப்பு வலது).

நீங்கள் சாராம்சத்தைப் புரிந்துகொண்டு தேவைப்பட்டால் இந்த வகுப்புகளைப் பயன்படுத்துவீர்கள் என்று நம்புகிறேன்.

பூட்ஸ்ட்ராப் கூறுகள் மற்றும் அவற்றின் பயன்பாட்டின் எடுத்துக்காட்டுகள்

நான் உங்களை வாழ்த்துகிறேன். கட்டமைப்புடன் தொடர்புடைய மிக முக்கியமான தலைப்பை நாங்கள் உள்ளடக்கியுள்ளோம். கட்டம் மற்றும் அதனுடன் வேலை செய்வது முக்கியம். கூறுகளுடன் பணிபுரிவது என்பது ஏற்கனவே நீங்கள் ஆவணங்களுக்குச் சென்று, விரும்பிய கூறுகளின் குறியீட்டை நகலெடுத்து, தேவைப்பட்டால், உங்கள் தேவைகளுக்கு ஏற்ப மாற்ற வேண்டும். ஆனால் கூறுகளை எவ்வாறு பயன்படுத்துவது என்பதற்கான சில எடுத்துக்காட்டுகளை நான் இன்னும் கீழே தருகிறேன்.

வேகமான மிதவை மற்றும் மடக்கு ரத்து

இடது அல்லது வலது பக்கம் அனுப்புவதன் மூலம் எந்தத் தொகுதியையும் விரைவாக மிதக்கச் செய்ய, இழு-இடது மற்றும் இழு-வலது வகுப்புகள் உங்களை அனுமதிக்கின்றன. ஓட்டத்தை ரத்து செய்வது பற்றி மறந்துவிடாதீர்கள். இதற்கு நீங்கள் clearfix வகுப்பைப் பயன்படுத்தலாம்.

பூட்ஸ்ட்ராப்: கிடைமட்ட பொறுப்பு (மொபைல்) மெனு

நாங்கள் பின்வரும் கூறுகளை நேரடியாக டெம்ப்ளேட்டில் சேர்ப்போம், எனவே நீங்கள் குறியீட்டுடன் வேலை செய்ய விரும்பினால், படிக்காமல், எனக்குப் பிறகு எல்லா படிகளையும் பின்பற்றவும்.

உண்மையில், பூட்ஸ்டார்ப் மூலம் நீங்கள் ஒரு தகவமைப்பு மெனுவை மட்டுமல்ல, மொபைல் என்று அழைக்கப்படுவதையும் மிக எளிதாக உருவாக்கலாம், இது சிறிய திரைகளில் முற்றிலும் சரிந்து ஒரு பொத்தானின் கீழ் மறைக்கப்படுகிறது. இந்த நுட்பத்தை பல பதிலளிக்கக்கூடிய டெம்ப்ளேட்களில் காணலாம் மற்றும் உண்மையில் செயல்படுத்த மிகவும் எளிதானது. உதாரணம் மொபைல் மெனு குறியீடு ஆவணத்தில் உள்ளது, நான் அதை அங்கிருந்து எடுத்து சிறிது மீண்டும் செய்கிறேன்.

எனவே, நான் முதலில் செய்வேன், தலைப்புடன் தடுப்பை அகற்றுவது, ஏனென்றால் எங்கள் மெனு உண்மையில் எனது டெம்ப்ளேட்டின் தலைப்பாக இருக்கும். மெனு குறியீடு அனைத்து தள உள்ளடக்கத்திற்கு முன்பாகவும், கண்டெய்னர் பிளாக்கிற்கு முன்பே வைக்கப்பட வேண்டும். ஏன்? ஆம், வழிசெலுத்தல் பட்டியில் கட்டம் ஏற்கனவே கட்டமைக்கப்பட்டுள்ளதை இப்போது நீங்களே பார்ப்பீர்கள். எனவே குறியீடு இங்கே:

ஸ்விட்ச் பட்டன் லோகோ/பெயர்

• சைக்கிள் ஓட்டுதல்
• மோட்டார் ஸ்போர்ட்ஸ்
• உடற்பயிற்சி உபகரணங்கள்
  • டிரெட்மில்ஸ்
  • நீள்வட்ட பயிற்சியாளர்கள்
  • பெஞ்சுகள்

தேடு

நிறைய குறியீடு உள்ளது என்று பயப்பட வேண்டாம். இந்த தளம் இப்போது எப்படி இருக்கிறது:

ஆனால் உங்கள் மெனு திரையின் முழு அகலத்தையும் எடுத்துக் கொள்ளவில்லை என்றால், அதை மையப்படுத்துவது அர்த்தமுள்ளதாக இருக்கும். இதைச் செய்ய, நீங்கள் மெனுவிற்கான கூடுதல் ரேப்பர் தொகுதியை உருவாக்க வேண்டும், இது கொள்கலன்-திரவ வகுப்புடன் தொகுதிக்குப் பிறகு வைக்கப்பட வேண்டும். இந்த தொகுதியை மூட மறக்காதீர்கள். நான் அதற்கு navbar-wrap வகுப்பைக் கொடுத்தேன். அதற்கான ஸ்டைல்கள் இதோ:

அதாவது, நீங்கள் அகலத்தை மட்டுப்படுத்தி அதை மையப்படுத்தலாம். அல்லது ஆரம்பத்தில் கொள்கலன் திரவத்தை கொள்கலனுடன் மாற்றவும்.

நீங்கள் பார்க்க முடியும் என, மெனுவில் ஒரு லோகோ, இரண்டு எளிய உருப்படிகள், கீழ்தோன்றும் உருப்படி மற்றும் தேடல் படிவத்தைச் சேர்த்துள்ளோம். அதாவது, பல கூறுகள் இருந்தன. உங்கள் சொந்த வகுப்புகளைச் சேர்ப்பதன் மூலம் உங்களுக்காக மெனுவை எளிதாகத் தனிப்பயனாக்கலாம். ஆனால் இப்போதைக்கு எனது குறிக்கோள் இந்த கூறுகளை உங்களுக்குக் காண்பிப்பதாகும்.

768 பிக்சல்களுக்கும் குறைவான திரை அகலம் கொண்ட சாதனங்களில் மெனு இப்படித்தான் இருக்கும்:

நீங்கள் பார்க்க முடியும் என, மெனு சரிந்தது. மேல் வலது மூலையில் உள்ள பொத்தானைக் கிளிக் செய்தால் அது திறக்கும். சின்னத்திரை மட்டும் திரையில் இருந்தது.

துளி மெனு

அதே நேரத்தில், மேலே உள்ள எடுத்துக்காட்டில் இருந்து பூட்ஸ்டார்ப்பில் கீழ்தோன்றும் மெனு உருப்படி எவ்வாறு உருவாக்கப்படுகிறது என்பதை நீங்கள் புரிந்து கொள்ளலாம்; மேலும் விரிவான தோற்றத்திற்கு இந்த குறியீட்டைப் பிரித்தெடுப்போம்:

உடற்பயிற்சி உபகரணங்கள்

• டிரெட்மில்ஸ்
• நீள்வட்ட பயிற்சியாளர்கள்
• பெஞ்சுகள்

எனவே, கீழ்தோன்றும் உருப்படிக்கான கொள்கலன் கீழ்தோன்றும் வகுப்பைக் கொண்ட வழக்கமான பட்டியல் உருப்படியாகும். அதன் உள்ளே முக்கிய இணைப்பு உள்ளது, அதைக் கிளிக் செய்வதன் மூலம் கீழ்தோன்றும் மெனு திறக்கும். குறியீட்டில் நீங்கள் பார்க்கும் தரவு பண்புக்கூறை ஒதுக்குவது மிகவும் முக்கியம்; அது இல்லாமல், எதுவும் இயங்காது. bootstrap.js கோப்பு இணையப் பக்கங்களுடன் இணைக்கப்பட்டுள்ளதா என்பதையும் உறுதிசெய்ய வேண்டும்.

கேரட் கிளாஸுடன் ஒரு இடைவெளி என்பது அம்புக்குறியைத் தவிர வேறில்லை, இதற்கு நன்றி, உருப்படி ஒரு கீழ்தோன்றும் உருப்படி என்பதை நீங்கள் புரிந்து கொள்ளலாம், மேலும் மெனுவுக்குக் கீழே நிலையான புல்லட் பட்டியலைப் பயன்படுத்தி உருவாக்கப்படுகிறது. அவ்வளவுதான், எல்லாம் மிகவும் எளிமையானது, கீழ்தோன்றும் உருப்படிகளை செயல்படுத்த இந்த குறியீட்டைப் பயன்படுத்தலாம்.

பூட்ஸ்டார்ப்பைப் பயன்படுத்தி பிரட்தூள்களில் நனைக்கப்பட்டு (பிரெட்க்ரம்ப்ஸ்) சேர்த்தல்

பல கடைகளில் நீங்கள் ரொட்டி துண்டுகளின் தொகுதி என்று அழைக்கப்படுவதைக் காணலாம், இது தற்போதைய பக்கத்திற்கான முழு பாதையையும் கொண்டுள்ளது. கட்டமைப்பைப் பயன்படுத்தி இதைச் செய்வதும் எளிதானது, குறியீட்டைப் பார்க்கவும்:

வீடு

அட்டவணை

பொருட்கள்

உண்மையில், எண்ணிடப்பட்ட பட்டியலுக்கு பிரட்க்ரம்ப் வகுப்பைக் குறிப்பிடவும், வழக்கமான பட்டியல் உருப்படிகளை அதில் உள்ளிடவும் போதுமானது. வார்ப்புருவில் இரண்டாம் நிலை தலைப்புகளை மையப்படுத்துகிறேன் (இதை cssல் எழுத வேண்டும்):

H2( text-align: centre; )

நீங்கள் எப்படியாவது பிரட்தூள்களில் நனைக்கப்பட்டு தோற்றத்தை மாற்ற விரும்பினால், CSS இல் .breadcrumb தேர்வியைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, பின்புல நிறத்தை இப்படி நீக்கலாம்:

ப்ரெட்க்ரம்ப் (பின்னணி: வெளிப்படையானது;)

இந்த தளம் இப்போது எப்படி இருக்கிறது:

பூட்ஸ்ட்ராப் அட்டவணைகள்

முன்னிருப்பாக, அட்டவணை முழு சாளரத்திலும் நீட்டிக்கப்படும், எனவே பரிமாணங்களைக் கட்டுப்படுத்த வரையறுக்கப்பட்ட அகலத்துடன் ஒரு பெட்டியில் அதை மடிக்கவும். முன்னிருப்பாக இது பயங்கரமாகத் தெரிகிறது, ஆனால் டேபிள் க்ளாஸில் டேபிள் கிளாஸைச் சேர்த்தால், எல்லாம் மிகவும் நன்றாக இருக்கும்:

இந்த பதிப்பில், செல்கள் கீழே மட்டுமே தெளிவான எல்லைகளைக் கொண்டுள்ளன என்பதை நினைவில் கொள்க; நீங்கள் நான்கு பக்கங்களிலும் எல்லைகளை விரும்பினால், நீங்கள் மற்றொரு வகுப்பைச் சேர்க்க வேண்டும்:

கொள்கையளவில், இவை அனைத்தும் அட்டவணையின் சாத்தியக்கூறுகள். தகவமைப்பு அட்டவணையை எவ்வாறு உருவாக்குவது என்பது பற்றி நான் ஏற்கனவே ஒரு தனி கட்டுரையை எழுதினேன், எனவே நான் அதை மீண்டும் செய்ய மாட்டேன். ஒரே விஷயம் என்னவென்றால், அட்டவணையின் வரிசைகள் மற்றும் கலங்களில் தகவல், வெற்றி, எச்சரிக்கை மற்றும் பிற வகுப்புகளை நீங்கள் விரும்பிய வண்ணத்தில் வண்ணம் தீட்டலாம்.

இயற்கையாகவே, நீங்கள் உங்கள் சொந்த வகுப்புகளை style.css இல் எளிதாக எழுதலாம் மற்றும் அவற்றைப் பயன்படுத்தலாம்.

கீழ் வரி

கட்டுரை பயனுள்ளதாக இருந்தது மற்றும் மிக முக்கியமான விஷயங்களை நீங்கள் புரிந்து கொள்ள முடிந்தது என்று நம்புகிறேன். கருத்துகளைப் பயன்படுத்தி நீங்கள் ஏதேனும் கேள்விகளைக் கேட்கலாம்.

இலவச திட்டங்கள் மற்றும் பயனுள்ள குறிப்புகள் உலகம்
2024 whatsappss.ru