Bootstrap அறிமுகம்.
பூட்ஸ்டிராப்
என்பது மொபைல் ஃப்ரண்ட்லி வெப் சைட் மற்றும் வெப் அப்ளிகேசனில் பயன்படும்
html,css, javascript ஃப்ரேம் வொர்க் ஆகும்.
முதலில்
google சென்று bootstrap என டைப் செய்து தேடவும்.பிறகு வரும் முதல் லிங்கை கிளிக் செய்து
உள்ளே செல்லவும்.
அதில்
download என்பதை கிளிக் செய்து அடுத்து வரும் பக்கதில் compiled css,js என்பதன் கீழ்
உள்ள download கிளிக் செய்து தரவிரக்கவும்.
ஒரு கம்ப்ரெஸ்டு
ஃபைல் கிடைக்கும் அதை extract செய்யவும். பிறகு அதற்குள் உள்ள இரண்டு ஃபோல்டர்களையும்
காப்பி செய்யவும்.
டெக்ஸ்டாப்
சென்று ஒரு ஃபோல்டர் உருவாக்கி (bootstrap exercise)அதற்குள் paste செய்யவும்.
இப்பொழுது
கூகுளில் jquery என டைப் செய்து தேடவும். முதல் லிங்கை கிளிக் செய்து லேட்டஸ்ட் வெர்சனை
டவுன்லோட் செய்யவும்.
அந்த ஃபைலை
ஏற்கனவே நம்மிடம் இருக்கும் இரு ஃபோல்டர்களில் js ஃபோல்டருக்குள் paste செய்து அதை
jquery என்ற பெயர் மாற்றம் செய்யவும்.
இப்பொழுது
visual studio code செய்து நாம் புதிதாய் ஒரு ஃபைல் உருவாக்கவும். அதை bootstrap
exercise என்ற டெக்ஸ்டாப்பில் உள்ள ஃபோல்டருக்குள் sample என பெயரிட்டு டைப் ஆக
html என்பதை செலெக்ட் செய்து சேவ் செய்யவும்.
விண்டோஸ்
எக்ஸ்புளாரரில் ஃபைல் கீழ் கண்டவாறு இருக்கும்.
<!DOCTYPE
html>
<html>
<head>
<title>hello</title>
</head>
<body>
<h1> welcome to bootstrap</h1>
</body>
</html>
இந்த நிரலை
ரன் செய்யவும்
வெளியீடு
மேற்கண்டவாறு இருக்கும்.
இப்பொழுது
லிங்க் ஒன்று bootstrap1.html என்ற் பெயரில் கீழ்கண்டவாறு சேர்க்கவும்.
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<h1> welcome to bootstrap </h1>
</body>
</html>
இப்பொழுது
வெளியீடு பின் வருமாறு இருக்கும்.
ஃபாண்ட்ஸ்டைல்,
டைப்போ கிராபி ஆகியவை மாறியிருப்பதை கவனிக்கவும்.
மேலும்
கீழ் கண்ட ஃபைல்கள்களையும் சேர்த்துக் கொள்ளவும்.
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<h1> welcome to bootstrap </h1>
</body>
</html>
இவ்வாறு
பூட்ஸ்ட் ராப்பை இன்ஸ்டால் செய்து உபயோகிக்கலாம்.
நன்றி
முத்து
கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment