Kif Tikteb App li tiffavorixxi l-mowbajl billi tuża JQuery u Bootstrap
Fil-Parti 1 ta 'din is-serje, waqqafna proġett HTML 5 bażiku bl-użu ta' Netbeans bħala l-IDE tagħna, u ppreżentajna wkoll ftit elementi li ġew miżjuda f'din l-ispeċifikazzjoni ġdida tal-lingwa.
[ Tista 'tħobb ukoll: 27 L-Aħjar IDEs għall-Programmazzjoni C/C++ jew Edituri tal-Kodiċi Sors fuq Linux ]
Fi ftit kliem, tista 'taħseb f'jQuery bħala librerija Javascript cross-browser u cross-platform li tista' tissimplifika bil-kbir l-iskripts min-naħa tal-klijent f'paġni HTML. Min-naħa l-oħra, Bootstrap jista 'jiġi deskritt bħala qafas komplut li jintegra għodod HTML, CSS, u Javascript biex jinħolqu paġni tal-web li jiffavorixxu l-mowbajl u li jirrispondu.
F'dan l-artikolu, aħna ser nintroduċu inti jQuery u Bootstrap, żewġ utilitajiet prezzjuża biex tikteb kodiċi HTML 5 aktar faċilment. Kemm jQuery kif ukoll Bootstrap huma liċenzjati taħt il-liċenzji MIT u Apache 2.0, li huma kompatibbli mal-GPL u għalhekk huma softwer b'xejn.
Jekk jogħġbok innota li l-kunċetti bażiċi HTML, CSS, u Javascript mhumiex koperti fl-ebda artikolu ta 'din is-serje. Jekk tħoss li għandek bżonn taġġorna dawn is-suġġetti l-ewwel qabel ma tipproċedi, nirrakkomanda ħafna t-tutorja HTML 5 f'W3Schools.
Inkorporaw jQuery u Bootstrap fil-Proġett Tagħna
Biex tniżżel jQuery, mur fil-websajt tal-proġett fuq http://jquery.com u kklikkja fuq il-buttuna li turi l-avviż għall-aħħar verżjoni stabbli.
Se mmorru b'din it-tieni għażla f'din il-gwida. Għadux tikklikkjax fuq il-link tat-tniżżil. Tinduna li tista' tniżżel jew verżjoni .min.js kompressata jew .js mhux kompressata ta' jQuery.
L-ewwel huwa maħsub apposta għal websajts u jgħin biex jitnaqqas il-ħin tat-tagħbija tal-paġni (u għalhekk Google se jikklassifika s-sit tiegħek aħjar), filwaqt li t-tieni huwa mmirat l-aktar lejn kodifikaturi għal skopijiet ta 'żvilupp.
Għall-finijiet tal-qosor u l-faċilità tal-użu, aħna se tniżżel il-verżjoni kkompressata (magħrufa wkoll bħala minifikata) fil-folder tal-iskripts ġewwa l-istruttura tas-sit tagħna.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Issa wasal iż-żmien li nżidu Bootstrap mal-proġett tagħna. Mur fuq http://getbootstrap.com u kklikkja fuq Niżżel Bootstrap. Fil-paġna li jmiss, ikklikkja fuq l-għażla enfasizzata kif indikat hawn taħt biex tniżżel il-komponenti minifikati, lesti biex jintużaw, f'fajl zip:
Meta titlesta t-tniżżil, mur fil-folder tat-Tniżżil tiegħek, aqla' l-fajl, u kkopja l-fajls enfasizzati fid-direttorji indikati ġewwa l-proġett tiegħek:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Issa kkopja fajls CSS u JS f'folders rispettivi fl-istruttura tal-proġett.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Jekk issa tespandi l-istruttura tas-sit tiegħek f'Netbeans, għandha tidher kif ġej:
Żieda ta' Referenzi
Dan żgur jidher tajjeb, iżda għadna ma għedniex lill-fajl index.html tagħna biex juża kwalunkwe minn dawk il-fajls. Għal raġunijiet ta' sempliċità, l-ewwel se nissostitwixxu l-kontenut ta' dak il-fajl b'fajl html barebones:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Imbagħad, iddreggja u qiegħed kull fajl mis-sezzjoni tan-navigatur tal-proġett għall-kodiċi, ġewwa t-tikketti , kif tista 'tara fil-screencast li ġej. Kun żgur li r-referenza għal jQuery tidher qabel ir-referenza għal Bootstrap minħabba li din tal-aħħar tiddependi minn tal-ewwel:
Dak hu - żidt ir-referenzi kemm għal jQuery kif ukoll għal Bootstrap, u issa tista 'tibda tikteb il-kodiċi.
Tikteb l-Ewwel Kodiċi Responsiv Tiegħek
Ejja issa żid bar tan-navigazzjoni u poġġiha fil-quċċata tal-paġna tagħna. Ħossok liberu li tinkludi 4-5 links b'test finta u ma torbotx ma' xi dokument għalissa - sempliċement daħħal is-snippet tal-kodiċi li ġej fil-korp tad-dokument.
Tinsiex li tqatta' ftit ħin biex issir familjari mal-karatteristika ta' tlestija awtomatika f'Netbeans, li turik il-klassijiet disponibbli minn Bootstrap hekk kif tibda ttajpja.
Fil-qalba tas-snippet tal-kodiċi hawn taħt hemm il-klassi tal-kontejners Bootstrap, li tintuża biex tpoġġi kontenut ġewwa kontenitur orizzontali li awtomatikament se jbiddel id-daqs skont id-daqs tal-iskrin fejn ikun qed jaraha. Mhux inqas importanti hija l-klassi tal-kontenitur-fluwidu, li se tiżgura li l-kontenut fi ħdan se jokkupa l-wisa 'sħiħ tal-iskrin.
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Karatteristika oħra ta 'distinzjoni ta' Bootstrap hija li telimina l-ħtieġa għal tabelli fil-kodiċi HTML. Minflok, juża sistema ta 'grilja biex iqassam il-kontenut u jagħmilha tidher sew kemm fuq apparati kbar kif ukoll żgħar (mit-telefowns sat-triq kollha għall-iskrins kbar tad-desktop jew tal-laptop).
Fis-sistema tal-grilja ta 'Bootstrap, it-tqassim tal-iskrin huwa maqsum fi 12-il kolonna:
Setup tipiku jikkonsisti fl-użu tat-tqassim ta’ 12-il kolonna maqsum fi 3 gruppi ta’ 4 kolonni kull wieħed, kif ġej:
Biex tindika dan il-fatt fil-kodiċi, u sabiex jintwera b'dak il-mod li jibda f'apparat ta' daqs medju (bħal laptops) u 'l fuq, żid il-kodiċi li ġej taħt it-tikketta ta' l-għeluq :
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
Irid ikollok probabilment ndunat li l-klassijiet tal-kolonni fil-grilja Bootstrap jindikaw it-tqassim tal-bidu għal daqs speċifiku ta 'apparat u 'l fuq, peress li md f'dan l-eżempju tfisser medju (li jkopri wkoll lg, jew apparati kbar).
Għal apparati iżgħar (sm u xs), id-divs tal-kontenut jiġu f'munzelli u jidhru fuq xulxin.
Fl-iscreencast li ġej, tista' tara kif għandha tidher il-paġna tiegħek sa issa. Innota li tista’ tibdel id-daqs tat-tieqa tal-browser tiegħek biex tissimula daqsijiet differenti tal-iskrin wara li tniedi l-proġett billi tuża l-buttuna Mexxi proġett kif tgħallimna fil-Parti 1.
Sommarju
Prosit! Int trid tkun ktibt paġna sempliċi, iżda funzjonali, li tirreaġixxi sa issa. Tinsiex tiċċekkja l-websajt Bootstrap sabiex issir aktar familjari mal-funzjonalità kważi bla limitu ta 'dan il-qafas.
Bħal dejjem, f'każ li jkollok mistoqsija jew kumment, tħossok liberu li tikkuntattjana billi tuża l-formola hawn taħt.