ਪ੍ਰੋਜੈਕਟ ਦੀ ਸੰਖੇਪ ਜਾਣਕਾਰੀ, ਇਸਦੀ ਸਮੱਗਰੀ, ਅਤੇ ਇੱਕ ਸਧਾਰਨ ਟੈਮਪਲੇਟ ਨਾਲ ਕਿਵੇਂ ਸ਼ੁਰੂਆਤ ਕਰਨੀ ਹੈ।
ਡਾਉਨਲੋਡ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਇੱਕ ਕੋਡ ਸੰਪਾਦਕ (ਅਸੀਂ ਸਬਲਾਈਮ ਟੈਕਸਟ 2 ਦੀ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ) ਅਤੇ HTML ਅਤੇ CSS ਦਾ ਕੁਝ ਕਾਰਜਸ਼ੀਲ ਗਿਆਨ ਹੋਣਾ ਯਕੀਨੀ ਬਣਾਓ। ਅਸੀਂ ਇੱਥੇ ਸਰੋਤ ਫ਼ਾਈਲਾਂ ਨੂੰ ਨਹੀਂ ਦੇਖਾਂਗੇ, ਪਰ ਉਹ ਡਾਊਨਲੋਡ ਕਰਨ ਲਈ ਉਪਲਬਧ ਹਨ। ਅਸੀਂ ਆਪਣੀਆਂ ਕੰਪਾਇਲ ਕੀਤੀਆਂ ਬੂਟਸਟਰੈਪ ਫਾਈਲਾਂ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ 'ਤੇ ਧਿਆਨ ਦੇਵਾਂਗੇ।
ਸ਼ੁਰੂਆਤ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਤੇਜ਼ ਤਰੀਕਾ: ਸਾਡੇ CSS, JS, ਅਤੇ ਚਿੱਤਰਾਂ ਦੇ ਸੰਕਲਿਤ ਅਤੇ ਛੋਟੇ ਸੰਸਕਰਣ ਪ੍ਰਾਪਤ ਕਰੋ। ਕੋਈ ਦਸਤਾਵੇਜ਼ ਜਾਂ ਮੂਲ ਸਰੋਤ ਫ਼ਾਈਲਾਂ ਨਹੀਂ ਹਨ।
GitHub ਤੋਂ ਸਿੱਧਾ ਨਵੀਨਤਮ ਸੰਸਕਰਣ ਡਾਉਨਲੋਡ ਕਰਕੇ ਡੌਕਸ ਦੀ ਸਥਾਨਕ ਕਾਪੀ ਦੇ ਨਾਲ, ਸਾਰੀਆਂ CSS ਅਤੇ Javasript ਲਈ ਅਸਲ ਫਾਈਲਾਂ ਪ੍ਰਾਪਤ ਕਰੋ।
ਡਾਉਨਲੋਡ ਦੇ ਅੰਦਰ ਤੁਸੀਂ ਹੇਠਾਂ ਦਿੱਤੀ ਫਾਈਲ ਬਣਤਰ ਅਤੇ ਸਮੱਗਰੀ ਪਾਓਗੇ, ਤਰਕਪੂਰਨ ਤੌਰ 'ਤੇ ਆਮ ਸੰਪਤੀਆਂ ਨੂੰ ਸਮੂਹਿਕ ਰੂਪ ਵਿੱਚ ਵੰਡਦੇ ਹੋਏ ਅਤੇ ਕੰਪਾਇਲ ਕੀਤੇ ਅਤੇ ਛੋਟੇ ਭਿੰਨਤਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ।
ਇੱਕ ਵਾਰ ਡਾਉਨਲੋਡ ਕਰਨ ਤੋਂ ਬਾਅਦ, (ਕੰਪਾਈਲਡ) ਬੂਟਸਟਰੈਪ ਦੀ ਬਣਤਰ ਨੂੰ ਦੇਖਣ ਲਈ ਸੰਕੁਚਿਤ ਫੋਲਡਰ ਨੂੰ ਅਨਜ਼ਿਪ ਕਰੋ। ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਕੁਝ ਦੇਖੋਗੇ:
ਬੂਟਸਟਰੈਪ / ├── css / │ ├── ਬੂਟਸਟਰੈਪ । css │ ├── ਬੂਟਸਟਰੈਪ । ਮਿੰਟ _ css ├── js / │ ├── ਬੂਟਸਟਰੈਪ । js │ ├── ਬੂਟਸਟਰੈਪ । ਮਿੰਟ _ js ├── img / │ ├── ਗਲਾਈਫਿਕਨ - ਹਾਫਲਿੰਗਸ । png │ ├── ਗਲਾਈਫਿਕਨ - ਹਾਫਲਿੰਗਸ - ਸਫੇਦ । png └── README . md
ਇਹ ਬੂਟਸਟਰੈਪ ਦਾ ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਰੂਪ ਹੈ: ਲਗਭਗ ਕਿਸੇ ਵੀ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਤੁਰੰਤ ਡਰਾਪ-ਇਨ ਵਰਤੋਂ ਲਈ ਕੰਪਾਇਲ ਕੀਤੀਆਂ ਫਾਈਲਾਂ। ਅਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਅਤੇ JS ( bootstrap.*
) ਦੇ ਨਾਲ ਨਾਲ ਕੰਪਾਇਲ ਕੀਤੇ ਅਤੇ ਛੋਟੇ CSS ਅਤੇ JS ( bootstrap.min.*
) ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ। ਚਿੱਤਰ ਫਾਈਲਾਂ ਨੂੰ ImageOptim , PNGs ਨੂੰ ਸੰਕੁਚਿਤ ਕਰਨ ਲਈ ਇੱਕ ਮੈਕ ਐਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਕੁਚਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਬੂਟਸਟਰੈਪ ਹਰ ਤਰ੍ਹਾਂ ਦੀਆਂ ਚੀਜ਼ਾਂ ਲਈ HTML, CSS, ਅਤੇ JS ਨਾਲ ਲੈਸ ਹੈ, ਪਰ ਉਹਨਾਂ ਨੂੰ ਬੂਟਸਟਰੈਪ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਸਿਖਰ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲੀਆਂ ਮੁੱਠੀ ਭਰ ਸ਼੍ਰੇਣੀਆਂ ਨਾਲ ਸੰਖੇਪ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ।
ਕਿਸਮ ਅਤੇ ਪਿਛੋਕੜ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਲਈ ਸਰੀਰ ਲਈ ਗਲੋਬਲ ਸਟਾਈਲ, ਲਿੰਕ ਸਟਾਈਲ, ਗਰਿੱਡ ਸਿਸਟਮ, ਅਤੇ ਦੋ ਸਧਾਰਨ ਖਾਕੇ।
ਟਾਈਪੋਗ੍ਰਾਫੀ, ਕੋਡ, ਟੇਬਲ, ਫਾਰਮ ਅਤੇ ਬਟਨਾਂ ਵਰਗੇ ਆਮ HTML ਤੱਤਾਂ ਲਈ ਸਟਾਈਲ। Glyphicons , ਇੱਕ ਮਹਾਨ ਛੋਟਾ ਆਈਕਨ ਸੈੱਟ ਵੀ ਸ਼ਾਮਲ ਹੈ।
ਆਮ ਇੰਟਰਫੇਸ ਕੰਪੋਨੈਂਟਸ ਜਿਵੇਂ ਕਿ ਟੈਬਸ ਅਤੇ ਪਿਲਸ, ਨੇਵਬਾਰ, ਅਲਰਟ, ਪੇਜ ਹੈਡਰ ਅਤੇ ਹੋਰ ਲਈ ਬੁਨਿਆਦੀ ਸਟਾਈਲ।
ਕੰਪੋਨੈਂਟਸ ਦੇ ਸਮਾਨ, ਇਹ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨ ਟੂਲਟਿਪਸ, ਪੌਪਓਵਰ, ਮੋਡਲ ਅਤੇ ਹੋਰ ਚੀਜ਼ਾਂ ਲਈ ਇੰਟਰਐਕਟਿਵ ਕੰਪੋਨੈਂਟ ਹਨ।
ਇਕੱਠੇ, ਕੰਪੋਨੈਂਟਸ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨ ਸੈਕਸ਼ਨ ਹੇਠਾਂ ਦਿੱਤੇ ਇੰਟਰਫੇਸ ਤੱਤ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ:
ਭਵਿੱਖ ਦੀਆਂ ਗਾਈਡਾਂ ਵਿੱਚ, ਅਸੀਂ ਇਹਨਾਂ ਭਾਗਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਵਧੇਰੇ ਵਿਸਥਾਰ ਵਿੱਚ ਦੇਖ ਸਕਦੇ ਹਾਂ। ਉਦੋਂ ਤੱਕ, ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਜਾਣਕਾਰੀ ਲਈ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇਹਨਾਂ ਵਿੱਚੋਂ ਹਰੇਕ ਨੂੰ ਦੇਖੋ।
ਬਾਹਰਲੀ ਸਮੱਗਰੀ ਦੀ ਇੱਕ ਸੰਖੇਪ ਜਾਣ-ਪਛਾਣ ਦੇ ਨਾਲ, ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਨੂੰ ਵਰਤਣ ਲਈ ਫੋਕਸ ਕਰ ਸਕਦੇ ਹਾਂ। ਅਜਿਹਾ ਕਰਨ ਲਈ, ਅਸੀਂ ਇੱਕ ਬੁਨਿਆਦੀ HTML ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਜਿਸ ਵਿੱਚ ਉਹ ਸਭ ਕੁਝ ਸ਼ਾਮਲ ਹੈ ਜਿਸਦਾ ਅਸੀਂ ਫਾਈਲ ਢਾਂਚੇ ਵਿੱਚ ਜ਼ਿਕਰ ਕੀਤਾ ਹੈ ।
ਹੁਣ, ਇੱਥੇ ਇੱਕ ਆਮ HTML ਫਾਈਲ 'ਤੇ ਇੱਕ ਨਜ਼ਰ ਹੈ :
- <html>
- <head>
- <title> Bootstrap 101 ਟੈਂਪਲੇਟ </title>
- </head>
- <body>
- <h1> ਹੈਲੋ, ਸੰਸਾਰ! </h1>
- </body>
- </html>
ਇਸ ਨੂੰ ਬੂਟਸਟਰੈਪਡ ਟੈਂਪਲੇਟ ਬਣਾਉਣ ਲਈ , ਸਿਰਫ਼ ਉਚਿਤ CSS ਅਤੇ JS ਫਾਈਲਾਂ ਸ਼ਾਮਲ ਕਰੋ:
- <html>
- <head>
- <title> Bootstrap 101 ਟੈਂਪਲੇਟ </title>
- <!-- ਬੂਟਸਟਰੈਪ -->
- <link href = "css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> ਹੈਲੋ, ਸੰਸਾਰ! </h1>
- <script src = "js/bootstrap.min.js" ></script>
- </body>
- </html>
ਅਤੇ ਤੁਸੀਂ ਸੈੱਟ ਹੋ! ਉਹਨਾਂ ਦੋ ਫਾਈਲਾਂ ਨੂੰ ਜੋੜਨ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਬੂਟਸਟਰੈਪ ਨਾਲ ਕਿਸੇ ਵੀ ਸਾਈਟ ਜਾਂ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਵਿਕਸਿਤ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ।
ਕੁਝ ਉਦਾਹਰਨ ਲੇਆਉਟ ਦੇ ਨਾਲ ਬੇਸ ਟੈਂਪਲੇਟ ਤੋਂ ਪਰੇ ਜਾਓ। ਅਸੀਂ ਲੋਕਾਂ ਨੂੰ ਇਹਨਾਂ ਉਦਾਹਰਨਾਂ ਨੂੰ ਦੁਹਰਾਉਣ ਲਈ ਉਤਸ਼ਾਹਿਤ ਕਰਦੇ ਹਾਂ ਅਤੇ ਇਹਨਾਂ ਨੂੰ ਸਿਰਫ਼ ਅੰਤਮ ਨਤੀਜੇ ਵਜੋਂ ਨਾ ਵਰਤੋ।
ਜਾਣਕਾਰੀ, ਉਦਾਹਰਨਾਂ, ਅਤੇ ਕੋਡ ਸਨਿੱਪਟ ਲਈ ਦਸਤਾਵੇਜ਼ਾਂ 'ਤੇ ਜਾਓ, ਜਾਂ ਅਗਲੀ ਲੀਪ ਲਓ ਅਤੇ ਕਿਸੇ ਵੀ ਆਉਣ ਵਾਲੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਬੂਟਸਟਰੈਪ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।
ਬੂਟਸਟਰੈਪ ਦਸਤਾਵੇਜ਼ਾਂ 'ਤੇ ਜਾਓ ਬੂਟਸਟਰੈਪ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ