બુટસ્ટ્રેપ ડેવલપમેન્ટ એન્વાયર્નમેન્ટ બનાવવું

આ લેખમાં અમે બુટસ્ટ્રેપ ડેવલપમેન્ટ એન્વાયર્નમેન્ટ બનાવીને શરૂઆત કરીશું. અમે અગાઉના લેખમાં સમજાવ્યું હતું તેમ, બુટસ્ટ્રેપ એ એક ફ્રેમવર્ક છે જે આપણા માટે કોઈપણ સ્ક્રીન માપને આપમેળે અનુકૂલિત થતી સાઇટ્સ બનાવવાનું સરળ બનાવે છે.

ખરેખર, કોઈ ખાસ સાધનોની જરૂર નથી. તમે તમારા ડેસ્કટોપ પર ટેક્સ્ટ એડિટરમાં કોડ સરળતાથી લખી શકો છો. ઘણા લોકો પાસે HTML, CSS અને Javascript માટે પણ સપોર્ટ છે. પરંતુ, સંકલિત વિકાસ વાતાવરણમાં અન્ય સાધનોનો સમાવેશ થાય છે જે તમારા માટે કોડ લખવાનું અને પ્રૂફરીડ કરવાનું સરળ બનાવે છે.

બુટસ્ટ્રેપ ડેવલપમેન્ટ એન્વાયર્નમેન્ટ બનાવવું

મારા સ્વાદ માટે, શ્રેષ્ઠ સંકલિત વિકાસ પર્યાવરણ વિઝ્યુઅલ સ્ટુડિયો કોડ છે. પરંતુ, ઘણા Linux વપરાશકર્તાઓને તે પસંદ નથી કારણ કે તે Microsoft ને ટેલિમેટ્રી મોકલે છે. તેમ છતાં, ત્યાં એક વિકલ્પ છે જે VSCodium નામના VSCode સ્ત્રોત કોડનો ઉપયોગ કરે છે જે કોઈની સાથે ડેટા શેર કરતું નથી. તે જ આવૃત્તિ જેનો આપણે હવેથી ઉપયોગ કરીશું.

VSCodium સ્થાપિત કરી રહ્યા છીએ

અમે નીચેની રીતે VSCodium ઇન્સ્ટોલ કરી શકીએ છીએ:

સ્નેપ સ્ટોર

sudo snap install codium --classic

ફ્લેટપેક

flatpak install flathub com.vscodium.codium

ડેબિયન અને ડેરિવેટિવ્ઝ

અમને ચકાસણી કી મળી

wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
| gpg --dearmor \
| sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg
અમે ભંડાર ઉમેરીએ છીએ
echo 'deb [ signed-by=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
અમે અપડેટ અને ઇન્સ્ટોલ કરીએ છીએ
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

અમને વેરિફિકેશન કીઓ મળે છે

sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

અમે રીપોઝીટરીઝ ઉમેરીએ છીએ

Fedora/RHEL/CentOS/RockyLinux: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

OpenSUSE/SUSE: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=gitlab.com_paulcarroty_vscodium_repo\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/zypp/repos.d/vscodium.repo

ઇન્સ્ટોલ કરવા માટે અમે કરીએ છીએ:

Fedora/RHEL/CentOS/RockyLinux: sudo dnf install codium

ઓપનસુઝ / સુસ: sudo zypper in codium

આર્ક લિનક્સ

આપણે આ બે આદેશોમાંથી કોઈ એકનો ઉપયોગ કરી શકીએ છીએ

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

પોપટ ઓ.એસ.

sudo apt update
sudo apt install codium

નિક્સ(OS)

nix-env -iA nixpkgs.vscodium

VSCodium રૂપરેખાંકિત કરી રહ્યા છીએ

ઇન્સ્ટોલેશન મોડ પર આધાર રાખીને, VSCodium અંગ્રેજીમાં હોઈ શકે છે. આપણે આને સરળતાથી બદલી શકીએ છીએ.

1. ફાઇલ મેનુમાં પર ક્લિક કરો પસંદગીઓ
2. ઉપર ક્લિક કરો એક્સ્ટેંશન.
3. અમે લખીએ છીએ સ્પેનિશ શોધ એંજિનમાં.
4. એક્સ્ટેંશન પર ક્લિક કરો સ્પેનીશ ભાષા.
5. અમે પર ક્લિક કરીને ઇન્સ્ટોલેશન શરૂ કરીએ છીએ ઇન્સ્ટોલ કરો.
6. ઉપર ક્લિક કરો ભાષા બદલો અને પુનઃપ્રારંભ કરો.

VSCode પાસે એક્સ્ટેંશનનો વિશાળ સંગ્રહ છે જે વિવિધ ભાષાઓમાં પ્રોગ્રામિંગની સુવિધા આપે છે, અને અમે તેનો ઉપયોગ VSCodiumમાં પણ કરી શકીએ છીએ. ચાલો આપણે એકને ઇન્સ્ટોલ કરીએ:

1. ઉપર ક્લિક કરો પસંદગીઓ.
2. ઉપર ક્લિક કરો એક્સ્ટેંશન.
3. અમે લખીએ છીએ બુટસ્ટ્રેપ શોધ એંજિનમાં.
4. અમે જે કહે છે તે પસંદ કરીએ છીએ બુટસ્ટ્રેપ 5 અને ફોન્ટ અદ્ભુત સ્નિપેટ્સ.
5. ઇન્સ્ટોલ પર ક્લિક કરો

જ્યારે આપણે સાઇટ કોડ લખવાનું શરૂ કરીશું ત્યારે આપણે આ એક્સ્ટેંશનનો ઉપયોગ જોશું. પણ, મારે એક સ્પષ્ટતા કરવી છે. તે કામ કરવા માટે તમારે આદેશો લખવા પડશે. આ કિસ્સામાં કોપી અને પેસ્ટ કામ કરતું નથી.

બુટસ્ટ્રેપ મેળવી રહ્યા છીએ

બુટસ્ટ્રેપ મૂળભૂત રીતે ઘટકોનો સંગ્રહ છે. જ્યારે આપણે બુટસ્ટ્રેપ પર આધારિત વેબસાઇટનો કોડ લખીએ છીએ આપણે સૌ પ્રથમ બ્રાઉઝરને તે ક્યાં શોધવું તે જણાવવાનું છે.

બુટસ્ટ્રેપ મેળવવા માટે બે વિકલ્પો છે. પ્રથમ તેને માંથી ડાઉનલોડ કરવાનું છે વેબ પેજ અને તેને પ્રોજેક્ટ ફાઈલોમાં ઉમેરો અને બીજું પ્રોજેક્ટના સર્વર પર એક લિંક મૂકવી. તે કેટલાક પેકેજ મેનેજર્સનો ઉપયોગ કરીને પણ ડાઉનલોડ કરી શકાય છે (મારો મતલબ કે જે વિવિધ પ્રોગ્રામિંગ ભાષાઓ દ્વારા ઉપયોગમાં લેવાય છે, વિતરણો દ્વારા ઉપયોગમાં લેવાતી નથી) પરંતુ, અમે તેને દસ્તાવેજીકરણ પર છોડીશું.

કૃપા કરીને નોંધો કે જો તમે સ્થાનિક રીતે બુટસ્ટ્રેપ ફાઇલો સાથે કામ કરવાનું પસંદ કરો છો, તો તમારે તેમને સર્વર પર અપલોડ કરવાની જરૂર પડશે. બાકીની વેબસાઇટ સાથે. જો તમે પ્રોજેક્ટના CDN સર્વર સાથે લિંક કરો છો, તો તે જરૂરી રહેશે નહીં.

જો તમે બુટસ્ટ્રેપ પેકેજ ડાઉનલોડ કરશો તો તમે જોશો કે બે ફોલ્ડર્સ અને શ્રેણીબદ્ધ ફાઇલો છે. અમને ફક્ત બેમાં જ રસ છે. જેએસ ફોલ્ડરમાંથી bootstrap.bundle.js અને CSS ફોલ્ડરમાંથી bootstrap.css.

બંને વિકલ્પો માટે કોડ લગભગ સમાન છે. ફક્ત સ્થાન પાથ બદલો.

ચાલો એક ઉદાહરણ જોઈએ
સ્થાનિક રીતે બુટસ્ટ્રેપનો ઉપયોગ કરવો

પ્રોજેક્ટ CDN માંથી ઉપયોગ કરીને

સ્થાનિક ફાઇલનું સ્થાન મનસ્વી છે. મેં તેમને બુટ્રેપ નામના ફોલ્ડરની અંદર મૂક્યા અને જેએસ અને સીએસએસ નામના બે સબફોલ્ડર્સ બનાવ્યા.

જો તમે બાકીનો કોડ સમજી શક્યા ન હોવ તો ચિંતા કરશો નહીં. અમે હવે પછીના લેખમાં તેની કાળજી લઈશું.

નોંધ

લેખ પ્રકાશિત કર્યા પછી મને જાણવા મળ્યું કે અમારું કન્ટેન્ટ મેનેજર HTML કોડ નહીં પણ પરિણામ બતાવે છે. હું Github અથવા તેના જેવા ઉદાહરણો અપલોડ કરીશ અને હું અહીં સ્ક્રીનશોટ મૂકીશ.