Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Mar sin, Dia duit gach duine atá ag breathnú anseo,
nó ag faire ar líne, nó go cianda.
Is é mo ainm Neel, tá an CS50.
Agus is é seimineár lae inniu Sofhreagrach Dearadh Gréasáin le bootstrap.
Tá sé ina ábhar go bhfuil an-ghar do mo chroí.
Tá súil againn go, beidh sé gar do chroí
chomh maith faoi dheireadh na seimineár lae inniu.
Mar sin, bootstrap.
Cé mhéad de tú a dhéanamh ar bith de chineál ar forbairt gréasáin roimhe seo?
Tá méid maith?
Beagánín.
>> Dá bhrí sin tá bootstrap an domhain is tóir, creat tosaigh deireadh.
Baineann sé úsáid by-- atá roghnaithe agam cúpla websites-- randamach
Lyft, Newsweek, agus Vogue.
Tá sé seo in úsáid ag roinnt de na láithreáin ghréasáin.
Tá sé ina creatlach dearadh gréasáin go Beidh iúl a dhéanann tú do láithreáin ghréasáin
araon álainn agus sofhreagrach.
Agus beidh mé ag dul thar na dhá choincheap anseo.
Álainn.
Mar sin, tá tú gnáth láithreán gréasáin ar an chlé, a bhfuil déanta ag díreach HTML.
Tá tú d'fhoghlaim HTML sa rang agus in alt ar fad.
Is bootstrap ar bhealach a dhéanamh do láithreáin ghréasáin álainn.
Is féidir leat a chur ar cad atá ar an taobh clé de do scáileán
agus sé seal i cad atá ar an thaobh na láimhe deise de do scáileán a bhfuil an-,
an-, cód-beag.
>> A gheobhaidh tú an cnaipe deas gorm, gheobhaidh tú an mhaisiúil, chothromú imill ar an scáileán,
gheobhaidh tú an liosta d'fhonn, gheobhaidh tú an cártaí, agus mar sin le cód an-beag.
Níl i ndáiríre aon CSS go tá tú chun scríobh le tú féin.
Mar sin, is féidir leat chun bootstrap tá na CSS réamh-tógtha
comhpháirteanna féidir leat a chur taobh istigh de do leathanach gréasáin
chun é a dhéanamh cuma álainn gan go mór oibriú i d'aonar.
Tá sé i ndáiríre bootstrap, phointe tosaigh,
do do chuid eachtraí forbairt gréasáin.
Agus mar sin nuair a bhíonn tú díreach magadh suas ar an suíomh gréasáin,
tá sé ina áit an-mhaith chun tús a.
Is féidir leat a fháil ar an suíomh gréasáin maith ag lorg le an-, obair an-beag.
Agus go deimhin, táimid ag dul chun é seo a muid féin
i gcúrsa nós cúig minutes-- laistigh de 10 nóiméad.
Mar sin tá sé éasca go leor chun a dhéanamh ar roinnt láithreáin ghréasáin mór.
Mar sin, go bhfuil an chéad chuid.
>> An dara part-- sofhreagrach.
Daoine, lá atá inniu ann, an bhfuil ní hamháin rochtain a fháil ar an ngréasán ar a gcuid ríomhairí glúine.
I ndáiríre, mar de 2014, níos mó daoine rochtain ar an ngréasán trí gléasanna soghluaiste,
cosúil le fóin, nó táibléad, nó seirbhísí, nó mar sin ar ná mar a láithreáin ghréasáin.
Agus tá láithreáin ghréasáin traidisiúnta deartha le ríomhairí glúine nó deasc
i gcuimhne.
Agus mar sin tá an láithreáin ghréasáin minic nach go han-mhaith a oireann do ghuthán.
Má thug tú cuairt riamh harvard.edu ar do ghuthán,
tá sé de chineál ar annoying taithí, ceart?
Sin toisc nach bhfuil sé freagrach.
Táimid ag iarraidh a dhéanamh gréasáin atá freagrúil,
freagra a thabhairt ar méideanna scáileán ndaoine.
>> Mar sin, má tá sé le fón, tá sé dul chun dul ar an bhfón.
Má tá sé ina tablet, tá sé dul chun dul ar tablet.
Choigeartú de sé a mheaitseáil leis an scáileán atá á n-úsáid.
Agus mar sin cuireann bootstrap freisin roinnt an-, fóntais-úsáideach le haghaidh sin.
Agus táimid ag dul chun plé a dhéanamh ar go chomh maith.
Mar sin arís, tá dhá chuid le Bootstrap-- álainn agus freagrach.
Táimid ag dul chun labhairt faoi sin.
An chéad, álainn.
Agus ansin sofhreagrach.
>> Mar sin, go léir an cód go mbeimid ag dul chun labhairt faoi today--
táimid ag dul a bhfuil a lán de shamplaí, a lán de na dúshláin, agus mar sin on-- sé
gach cónaí ar an suíomh gréasáin seo anseo.
Tá an sleamhnán méid a chuir muid amach.
Mar sin má tá tú anseo, is féidir leat a bhraitheann ní saor in aisce a bheith acu chun scríobh síos.
Agus má tá tú ag breathnú go cianda, is dóigh saor in aisce a tharraingt suas seo ar do ríomhaire
chomh maith.
Beidh ort is dócha sé i rith le linn an tseimineáir.
>> Mar sin, táimid ag dul a úsáid láithreán gréasáin ar a dtugtar CodePen,
a bhfuil códú comhoibríoch timpeallacht, le linn an tseimineáir.
Agus CodePen-- agus mé Feicfidh léiríonn tú anseo fíor fast--
ceadaíonn sé duit a scríobh HTML gcomhar.
Is féidir liom scríobh sé, is féidir liom é a sheoladh chuig tú guys, is féidir leat guys in eagar é.
Fiú má tá tú iargúlta, tú Is féidir rochtain a fháil go fóill mar sin.
Is féidir leat cineál cód HTML ag an barr agus Feicfidh sé go huathoibríoch
a chomhshó go dtí leathanach gréasáin ag bun an leathanaigh.
Mar sin tá sé ar bhealach chun tú chun iarracht a dhéanamh go tapa amach cód
gan a bheith a dhéanamh de chineál ar bith stuif ar do IDE, nó do láithreán gréasáin féin,
nó cibé.
>> Mar sin, dul ar aghaidh agus a tharraingt suas seo suíomh gréasáin, má tá tú iargúlta
nó má tá tú anseo, go háirithe má tá tú iargúlta.
is.gd/cs50boostrap.
Uimh caipíní, gan aon fostríocanna, gan aon rud ar bith.
Mar sin, siúd agaibh a bhfuil anseo, ach a thabhairt dom thumbs
suas nuair a tá tú ceirteacha tarraingthe suas go leathanach gréasáin.
Maith?
>> LUCHT ÉISTEACHTA: Tá.
>> NEEL MEHTA: Mar sin, beidh orainn a fháil leis sin i díreach dara.
Mar sin, an chéad, táimid ag dul a fháil chun, conas a dhéanann tú a dhéanamh do láithreáin ghréasáin go hálainn?
Táimid ag dul a fháil amach conas a ghlacadh leadránach, HTML aois, mar a thaispeáin mé leat sula,
agus cas go isteach comhpháirteanna gur deas,
cosúil le giuirléidí deas, deas, daite cnaipí, agus lipéid, agus táblaí,
agus go léir, ag baint úsáide as bootstrap.
Mar sin, má d'fhéadfadh muid go léir téigh go dtí an CodePen go bhfuil tú ceirteacha tarraingthe suas díreach.
Ba chóir breathnú le beagán mar seo.
An bhfuil sé breathnú mar seo do gach duine?
>> LUCHT ÉISTEACHTA: Tá.
>> NEEL MEHTA: Má tá tú iargúlta, é a Ba chóir breathnú mar seo chomh maith.
Mura bhfuil, beidh mé léiríonn tú conas a luaithe Is féidir leat é a fháil breathnú mar seo
i gcuid amach anseo ar an físeán.
Mar sin, anseo ní mór dúinn a scríobh a HTML an-bhunúsach,
cosúil leis an chineál atá tú ag baint úsáide as sa rang.
Tá sé deas bhunúsach.
Níl aon frills.
Agus ní mór dúinn roinnt rudaí.
Táimid tar éis a ceapadh an-, an-bhunúsach tús a chur suas
glaoch Yalp! leis ar féidir leat bialanna fháil sa cheantar,
agus athbhreithnithe, agus treoracha ar gach ceann de na.
Tá sé an coincheap an-mhaith.
Riamh Tá sé déanta roimh.
Tá sé an t-ainm an-uathúil, freisin.
>> Mar sin, cad táimid ag dul chun iarracht a a dhéanamh ná cuidiú leis an t-úinéir
de Yalp! dhéanamh ar a suíomh gréasáin breathnú i ndáiríre, really cool.
Mar sin, chun tús a chur leis, an t-úinéir Yalp! rinne cuardaigh beag
bosca, agus an cnaipe beag, agus ansin b'fhéidir beagán
limistéar aibhsithe le haghaidh bialann béim, agus ansin
liosta de na bialanna eile atá sa cheantar.
Mar sin, is féidir linn dul díreach trí an cód HTML fíor go tapa.
Cé chomh compordach a bhfuil tú guys le HTML?
Táimid tar éis a rinneadh le beagán alt san agus freisin sa rang.
Decent?
>> Mar sin, díreach mar recap, Tá HTML ar fad faoi a bhfuil
clibeanna nó eilimintí a rá leis an ríomhaire conas a leagan amach ar an leathanach gréasáin.
Mar sin, here-- an h1 tús h1, Fáilte go Yalp !, deireadh h1-- insíonn an ríomhaire,
tarraing header mór é a deir, Fáilte go dtí Yalp!
taobh istigh ann.
Mór foirmeacha againn freisin.
Is féidir linn a ionchuireann mar seo, ionchuir téacs, a sholáthar mar boscaí téacs
scríobhann tú i.
Caithfidh tú freisin cnaipí.
Fhaigheann tú deas, cnaipe chliceáil.
Ní chuireann sé aon rud a dhéanamh ceart anois, ach gheobhaidh tú an cnaipe.
Is féidir leat a bheith divs, nó roinnteoirí, a bhriseadh suas do leathanach i ngrúpaí éagsúla.
>> Is féidir leat a bheith míreanna, tá tú cnaipí.
Má tá tú míreanna, ansin tá tú liostaí gan ord, ul,
agus liostaí taobh istigh de sin, li.
Mar sin, is iad seo an bunúsach an- bloic thógála de leathanach gréasáin.
Agus go deimhin, go leor i bhfad gach suíomh gréasáin a fheiceann tú
ag dul a bheith tógtha ag baint úsáide as na huirlisí céanna.
Ar ndóigh, nach bhfuil siad go léir breathnú ar an olc mar táimid
dul chun spice sé suas le beagán.
Mar sin, a ligean ar an HTML leadránach d'aois agus tús athrú sé isteach ar an suíomh álainn
go chonaic muid ach cúpla nóiméad ó shin.
>> Sin a ligean le tús a chur amach an-simplí.
Mar sin, ní mór dúinn an cnaipe anseo.
I bootstrap, mar a chonaic muid, is féidir linn bheith deas, álainn, cnaipe gorm.
Agus go nach bhfuil déanta ag déanamh CSS saincheaptha.
Níl aon CSS saincheaptha anseo.
Sin déanta ag na ranganna a chur leis le do eilimintí HTML.
Má tá tú ag ranganna, nó hrefs, thriail ná anchors, nó cineál = "text" le haghaidh inputs--
Is féidir le heilimintí HTML bhfuil na tréithe.
Is féidir leo a bheith eolas breise go mb'fhéidir go mbeadh tú a thabhairt dóibh.
>> Agus mar sin, sa chás seo, Tá ranganna an tréith.
Mar sin, gur mhaith leat a scríobh, aicme cnaipe = rud éigin taobh istigh de teaghráin.
Agus beidh go tréith insint an ríomhaire, nach bhfuil sé seo aon, cnaipe aois.
Tá sé ina cnaipe go bhfuil i aicme seo de cnaipí.
Agus mar sin bootstrap, má thugann tú é stíl áirithe ar do eilimint,
Beidh sé a tharraingt ar bhealach áirithe.
Mar sin, scríobh mé "btn btn-bhunscoile.
btn bheith ina giorrúchán do cnaipe.
Beidh tú faoi deara anois go mo cnaipe ghránna iompaithe
isteach i deas, álainn, cnaipe gorm.
Breathnaíonn sé an-deas nuair a chliceálann muid é.
>> Agus mar sin cad a tharlaíonn é ní mór dúinn an rang btn agus an rang btn-bhunscoile
ar ár eilimint.
Agus beidh bootstrap dul i agus a rá, OK, mé fhios go bhfuil an dá rang.
Aon eilimint go bhfuil an dá Ba cheart ranganna a tharraingt mar seo.
Mar sin, go bhfuil an croí ar conas ghabhann tú stíleanna chun eilimintí i bootstrap.
Ranganna ag gabháil duit ach chun iad agus Beidh sé meáchan sé amach mar is cuí leis.
Mar sin, tá anseo sampla eile.
San ionchur, is féidir linn a chur rang = "foirm-rialú".
Agus beidh mé a thaispeáint go luath ina tú Is féidir a fháil amach cad ranganna
tá siad ar fáil de gach cineál eilimint.
Ach don rang go againn ach Tá breise deas, coirnéil chothromú,
tá sé stuáil deas, tá sé deas, Glow gorm dó.
>> Is féidir linn dul freisin i bhfoirm seo.
Agus aicme = "foirm-inlíne", rud a dhéanamh ár bhfoirm, mar a d'fhéadfá a shamhlú, inlíne.
Mar sin, tá sé ag lorg le beagán níos cosúil le cad a bhí againn roimh cheana.
Mar sin, sula théann muid ar a stíl an chuid eile den an leathanach, aon cheist agat faoi cad againn
Rinne?
Táimid ag ranganna díreach ceangailte chun ár gnéithe éagsúla.
Agus beidh mé léiríonn tú conas is féidir leat níos déanaí figiúr amach cad iad na ranganna ar fáil.
Ceangailte againn ranganna a tá stíleanna áirithe.
Agus insíonn go bhfuil an bhrabhsálaí conas a leagan amach ar an leathanach ag baint úsáide as
Bootstrap stíleanna ar fáil.
Ceisteanna ar bith as an lucht éisteachta?
>> Maith go dtí seo?
Cool.
A lán de na dúshláin leis go bhfuil bootstrap ach
a fhios agam cad iad na comhpháirteanna ar fáil agus conas a úsáideann tú iad.
Agus is é sin go léir d'fhoghlaim a bhfuil taithí agus freisin
trí léamh an doiciméadú, a beidh muid ag labhairt faoi go luath.
Mar sin, ní mór dúinn an div.
Tá sé ach leadránach, rud d'aois.
Ba mhaith linn béim a chur sé ar bhealach.
Mar sin, i bootstrap, tá lán de na comhpháirteanna atá ar fáil.
Agus tá sé seo getbootstrap.com.
Tá sé an tagairt an-úsáideach.
Tá sé rudaí like-- anseo conas a dhéanann tú an cnaipe.
Agus is féidir leat a dhéanamh barraí nav, is féidir leat lipéid, is féidir leat a barraí dul chun cinn,
Is féidir leat a dhéanamh le grúpaí liosta.
Go bunúsach, tá sé gach cineál de dtiocfadh leat a fheiceáil ar an leathanach gréasáin.
>> Seo ceann go beidh muid iarracht ceart anois.
Sé ar a dtugtar painéil.
Má úsáideann tú Google riamh Anois, tá siad cártaí.
Nó má tá aon fheiste Android cártaí.
Tá siad boscaí beag bán go bhfuil rudaí taobh istigh de sé.
Agus mar sin táimid ag dul chun iarracht a dhéanamh go muid féin ag baint úsáide as anseo an rud
ar a dtugtar painéal.
Mar sin má gabháil muid aicme = "painéal rolla-default "go dtí ár div seachtrach,
ansin ag gabháil muid rang div = - a ligean ar ach seiceáil an doiciméadú seo.
aicme div = "painéal-cheannteideal" agus ansin div aicme = "painéil-comhlacht".
Arís, ná bíodh imní ort faoi ghlanmheabhair cód seo.
Beidh sé ar fáil ar líne.
>> Mar sin, rinne muid seo agus anois ár leadránach, sean div iompú isteach an deas, cárta beag.
Tá sé stuáil deas, sé Tá teorainneacha, seasann sé amach
ón gcuid eile den leathanach, a bhfuil deas fionnuar.
Mar sin, a ligean ar dul isteach agus a athrú seo a Get treoracha cnaipe chun breathnú deas.
Cé sa lucht féachana ag iarraidh a insint dom cad is féidir liom a dhéanamh ar an gcnaipe
a dhéanamh breathnú sé deas ag baint úsáide as bootstrap?
Yes?
>> LUCHT ÉISTEACHTA: D'fhéadfadh muid a chur ar an rang.
Agus d'fhéadfadh muid a dhéanamh aicme = "btn btn-bhunscoile".
NEEL MEHTA: Tá.
Níl a bunch eile Dathanna ar fáil le haghaidh buttons--
nó le haghaidh rud ar bith, ar an ní sin.
Is féidir linn a dhéanamh btn-contúirte agus é a dhéanamh dearg é.
Tá muid ag dul.
Is féidir linn a dhéanamh btn-rath a dhéanamh glas é.
Is féidir linn a dhéanamh btn-info-- níl a bunch de rudaí atá ar fáil duit.
Mar sin, tá mé dúshlán beag ar do shon anois.
Mar sin, níl ach rud amháin níos mó go bhfuil mé fhág un-styled.
Seo Bialanna Top.
>> Agus ba mhaith linn a bhaint as an rud ar a dtugtar grúpa liosta a stíl sé.
Mar sin, tá mo dúshlán a thabhairt duit dul ar a getbootstrap.com--
Feicfidh mé a tharraingt suas anseo.
getboostrap.com.
Téigh go dtí getbootstrap.com, teacht ar an alt nuair a théann siad thar ghrúpaí liosta.
Agus beidh tú a fheiceáil anseo sampla agus na ranganna ceart
gur féidir leat é a úsáid chun a dhéanamh do liostaí i na grúpaí liosta deas.
Tá siad seo d'oibrigh amach samplaí de shamplaí cód, cad
cód a úsáideann tú, cén cód HTML úsáideann tú, agus cad a aschuir.
>> Mar sin, mo dúshlán a you-- dul ar getbootstrap.com,
cibé an bhfuil tú anseo nó sa bhaile, agus chun iarracht a dhéanamh agus stíleanna a chur leis an ul
a dhéanamh breathnú sé deas.
Agus a úsáid stíl grúpa liosta.
Ba mhaith leat a chur ar cúpla nóiméad, agus cuardach a an doiciméadú,
iarracht seo díbh féin?
Mar gheall ar mar atá tú a dhéanamh forbairt gréasáin, go mbainfidh tú a thuiscint a lán de do chuid oibre
ag dul a bheith ag léamh an doiciméadú.
Mar sin, Sílim go bhfuil sé maith a fháil ar an eolas leis an gcaoi doiciméadú a léamh,
conas a dhéanamh amach cad atá i gcás, cén cód samplaí is féidir leat é a úsáid,
cad is féidir leat a ghiaráil.
>> Mar sin arís, getbootstrap.com, téigh go dtí an cluaisín Comhpháirteanna,
agus ansin scrollú síos chun Liosta Ghrúpa.
Agus beidh tú a fheiceáil samplaí de chód go Is féidir leat é a úsáid chun a dhéanamh do HTML oiriúnach go.
Mar sin a ghlacadh ar feadh cúpla nóiméad agus iarracht a dhéanamh agus iniúchadh a dhéanamh air féin,
cibé an bhfuil tú anseo nó sa bhaile.
Má tá tú sa bhaile, sos an físeán, b'fhéidir, agus triail a bhaint amach duit féin.
Má tá tú anseo, má théann tú go dtí ár website-- má tá tú athnuachan an leathanach,
Feicfidh tú a fheiceáil seo ar ann.
Tá an cód-céanna díreach ag cur stíleanna nua ceart ann.
Mar sin a ghlacadh cúpla nóiméad.
Bíodh a fhios agam nuair a bhíonn tú ag mothú go maith mar gheall air nó nuair a bhíonn tú caillte go hiomlán.
Fuaim maith?
Cool.
Quick leataobh dóibh siúd agaibh sa bhaile, fad a bhíonn muid ag fanacht,
má théann tú ar aghaidh go dtí an suíomh GitHub gur chuir mé suas sleamhnáin cúpla ó shin,
i dtreo an tús an físeán, Tá mé repo GitHub, stór,
don chaint.
Gach na samplaí cód gur beidh orainn a bheith ag caint faoi a stóráil ar dheis anseo.
Mar sin, má théann tú chun dúshlán-1.html, seo Is léir an cód go bhfuil muid ceart anois
ar ár CodePen.
Mar sin, is féidir leat dul díreach ar aghaidh, agus cóip seo, agus greamaigh sé i d'CodePen féin.
Agus ar an mbealach sin, is féidir leat a choimeád ar bun leis an méid a bhíonn ar siúl againn anseo.
Mar sin, tá an leathanach seo ar oscailt chomh maith le linn a dul tríd an chuid eile den seimineár.
Arís, ba mhaith leat é chun breathnú cosúil le cad tú féach síos ag bun de do scáileán
ansin.
Tuairimí maith?
Soladach.
A ligean ar fanacht ar gach duine eile a chríochnú suas leis an méid atá ar siúl acu.
>> Yes?
>> LUCHT ÉISTEACHTA: Má ghlactar leis go theastaigh uaim úsáid a bhaint as bootstrap ag home--
NEEL MEHTA: Tá.
LUCHT ÉISTEACHTA: Feicim, ar an láithreán gréasáin, an leathanach Ag Tosú.
Tugann siad dom na roghanna Bootstrap, Cód Foinse, nó Sass.
Cé acu de na mian liom?
>> NEEL MEHTA: Tá.
Mar sin, an cheist, conas a dhéanann tú thosaigh ag baint úsáide bootstrap ag dúinn féin?
A tharlaíonn sé ach le magically obair ceart anseo.
Mar sin má tá am ag an deireadh an tseimineáir,
Feicfidh mé léiríonn tú conas is féidir leat é a fháil ar do leathanach gréasáin féin.
Cosúil anseo, tá mé i ndáiríre chur i roinnt suímh a
beidh sé go huathoibríoch luchtaithe, ach beidh mé
léiríonn tú é a dhéanamh ó scratch ar do leathanaigh gréasáin féin.
>> LUCHT ÉISTEACHTA: Go raibh maith agat.
>> NEEL MEHTA: Tá.
Ceist mhaith.
Tuairimí maith?
Tuairimí maith?
Cool.
Mar sin, atá ag iarraidh a insint dom conas a rinne siad an rud cuma deas agus Boostrappy?
Cad é an rang a haon táimid a chur leis an ul?
LUCHT ÉISTEACHTA: aicme = "liosta-ghrúpa".
NEEL MEHTA: Tá. liosta-ghrúpa.
Agus ansin cad a dhéanann muid ag gabháil leis an lis?
Duine eile?
LUCHT ÉISTEACHTA: Agus ansin, tar éis sin, aicme = "liosta-ghrúpa-mhír".
>> NEEL MEHTA: Tá.
>> LUCHT ÉISTEACHTA: Agus tá sé an céanna le haghaidh an chéad cheann eile.
>> NEEL MEHTA: aicme li = "liosta-ghrúpa-mhír".
Tá tú ag dul.
Tá ár ngrúpa liosta deas, díreach mar a bhí súil againn.
Mar sin, tá tú ag dul.
I 10 nóiméad, ní mór dúinn a an leadránach, sean Yalp! leathanach
cuma deas agus gairmiúla.
Agus sin ach an tús.
Mar sin, anois go mbraitheann tú maith faoi sin, a ligean ar
ach dul ar aghaidh agus labhairt faoi comhpháirteanna cúpla níos mó
D'fhéadfadh teacht i handy mar atá tú dul ar fud do eachtraíochta.
>> Ar ndóigh, níl a lán cinn anseo.
Agus anois go atá tú a foghlaimíodh conas a dhéanamh do ghrúpaí liosta,
Is féidir leat a mhúineadh go leor i bhfad féin conas a dhéanamh ar aon cheann de na.
Ach, ar ndóigh, a ligean ar iarracht ach agus a dhéanamh cúpla níos dúinn féin,
ach mar sin a gheobhaidh tú a bhraitheann ar conas a d'fhéadfadh tú iad a úsáid.
Tá mé ag dul díreach chun dul go sampla seo anseo.
Arís, an cód a pasted mé díreach Tá i anseo ar fáil ar dheis anseo.
Mar sin, glaoch a tharraingt suas.
>> Mar sin, tá muid imithe cheana féin tríd cúpla na samplaí.
Mar sin, ní mór dúinn cnaipí, a bhfuil muid Tá feicthe cheana féin conas a dhéanamh.
Is féidir linn a dhéanamh cnaipí níos mó.
De réir cnaipe class-- téann sé, btn btn-LG agus déanann btn-mainneachtain sé bán.
Mar sin, a dhéanann an ár cnaipe mó ná mar a d'fhéadfadh sé a bheith ar shlí eile.
D'fhéadfadh sé teacht i handy, má tá tú mór a chur faoi bhráid cnaipe nó rud éigin.
Chonaic muid an sampla grúpa liosta, chonaic muid an fhoirm sampla.
>> Is é ceann ar cheann an-tábhachtach deilbhíní.
Agus tá deilbhíní bhealach chun tú a chur rudaí suimiúla, ar nós seiceáil seiceáil
marcanna, nó pluses, nó cara deilbhíní, nó icons atosú,
nó pé rud a do app gréasáin.
Mar sin arís, má táimid a chur san anseo, na comhpháirteanna, glyphicons,
Tá na deilbhíní ar fáil le haghaidh bootstrap.
Níl an uileghabhálach liosta de na cinn anseo.
Mar sin, díreach mar shampla, a ligean ar iarracht a dhéanamh agus cuir amháin.
>> Mar sin, cosúil le Facebook, tá muid ag iarraidh a a bheith acu ar cnaipe Cuir Friend.
A ligean ar a chur ar dtús roinnt stíl.
aicme cnaipe = "btn btn-rath".
Agus ansin muid ag dul.
A ligean ar chur deilbhín anseo.
Cad icon, a cheapann tú, D'fhéadfadh ciall a chur anseo?
Tá tú le feiceáil dócha ar roinnt leathanaigh ghréasáin nó pé rud,
ach cad atá sampla de deilbhín a D'fhéadfadh dul go maith taobh istigh an gcnaipe seo?
Thig leat a bhrabhsáil an dearcadh seo, más gá duit aon inspioráid.
Níl a lán de úsáideach cinn atá ar fáil anseo.
Yes?
>> LUCHT ÉISTEACHTA: B'fhéidir an ceann úsáideora glyphicon?
NEEL MEHTA: OK.
An ceann seo.
Sin maith go leor.
Yes.
Ar Facebook, Sílim go bhfuil sé Bheadh cuma beagán mar sin.
Mar sin, anseo conas a théann muid faoi deilbhíní cur ár leathanaigh.
Ní mór dúinn ach is span-- réimse a coimeádán neodrach as rud éigin.
Is div coimeádán as rud éigin, Is réise coimeádán eile.
tá divs sosanna líne thart timpeall orthu, nach bhfuil réisí.
Mar sin, níl bealaí éagsúla a bhfuil coimeádáin cineálach.
Cosúil ní dhéanann sé ciall a chur air taobh istigh de mhír nó rud ar bith.
Táimid agam chun é a chur taobh istigh rud éigin áfach,
mar sin chuir muid díreach taobh istigh de thréimhse.
Mar sin, aicme span = glyphicon glyphicon-úsáideoir "réise dhúnadh.
Agus ní mór dúinn anois an icon taobh istigh an cnaipe.
>> Mar sin ní dhéanann sé cuma go hiomlán murab ionann agus cad a d'fhéadfadh tú a fheiceáil ar facebook.com.
Agus mar sin tá sé deas gur féidir leis na a chur i ndáiríre in áit ar bith is mian leat.
I do barraí header, i do ngrúpaí liosta.
Cibé rud a.
Ní chuireann sé a bheith taobh istigh de cnaipe.
Mar sin, mar shampla, is féidir liom a chur ar an rang céanna anseo.
"glyphicon glyphicon-úsáideoir".
Agus gur dealraitheach ach an gcéanna.
Mar sin, icons-- seo is féidir leat úsáid an réimse aicme = "glyphicon glyphicon-is cuma cad".
Agus a chuirfidh in iúl duit a chur deilbhíní pé áit is mian leat.
Agus tá deilbhíní a tábhacht an- mar chuid de a dhéanamh ar an suíomh gréasáin le breathnú
gairmiúla agus a dhéanamh go maith.
Ní sin a dhéanamh thar fóir leis, ach tá sé Is minic gur rud maith é go mbeadh a fhios.
>> Painéil, arís.
Feicfidh mé a dhéanamh ach seo arís mar recap toisc go bhfuil siad ag de chineál ar i gceist.
Feicfidh tú faoi deara go bhfuil i casadh do HTML gnáth
láithreán isteach bootstrap-afied suíomh, beidh sé agat ar
a chur ar struchtúr breise leis an láithreán gréasáin.
Mar shampla, ní mór dúinn breise divs anseo ach mar gheall ar na
atá de dhíth a dhéanamh painéal.
Mar sin, ach a choinneáil i gcuimhne go bhfuil go mbainfidh tú a bheith acu ar struchtúr breise.
Mar sin, "painéal rolla-default".
B'fhéidir go bhfuil sé painéal-header.
I mo thuairimse, tá sé phainéal-cheannteideal.
Yes.
Tá muid ag dul.
Mar sin, arís, tá ár painéal.
>> Rud amháin níos mó go bhfuil muid Ní raibh a chlúdach go fóill, táblaí.
Táblaí, de réir chineál cuma cheal gránna.
Mar seo.
Ach tá táblaí, ar ndóigh, cuid an-tábhachtach
de cad a bheidh leat a dhéanamh i forbairt gréasáin.
I Pset7, mar shampla, CS50 Airgeadas, a thiocfaidh amach go luath,
go mbainfidh tú úsáid a bhaint as a lán de na táblaí.
Agus a lán de dev gréasáin a úsáid ar a lán na dtáblaí eolais a chur ar taispeáint,
cosúil le stoic, nó scóir, nó cibé.
>> Mar sin, tá táblaí styling i ndáiríre an-éasca.
Cuir tú an rang tábla chun do tábla.
Agus, dare liom a rá, tá sé deas deas.
Is féidir leat a dhéanamh rudaí breise, cosúil le "tábla boird striped".
Agus beidh tú a fheiceáil ar na torthaí anseo.
Is féidir leat a dhéanamh tábla-bordered.
Níl a lán de na roghanna is féidir leat.
Ach go bunúsach, ag cur tábla, an rang tábla,
beidh a dhéanamh do táblaí breathnú go leor go deas.
Mar sin, go bhfuil rundown gairid ar cuid de na stíleanna níos tábhachtaí
agus comhpháirteanna beidh tú Ní mór a úsáid le haghaidh bootstrap.
Mar sin, is dóigh liom go wraps suas ár gcuid álainn.
Ceisteanna ar bith ceart anois faoi conas a dhéanamh do láithreáin ghréasáin go hálainn?
Conas is féidir leat úsáid a bhaint na comhpháirteanna chun tairbhe do?
Tuairimí maith?
Yes?
LUCHT ÉISTEACHTA: B'fhéidir seo Is ceist amaideach,
ach is féidir leat é a úsáid bootstrap ar Vicipéid?
Má tá tú ag athrú an leathanach Vicipéid?
NEEL MEHTA: Tá.
Mar sin, bhí an cheist, tá mé eagarthóireacht an leathanach Vicipéid,
Is féidir liom a I measc na stíleanna bootstrap i ann?
>> LUCHT ÉISTEACHTA: Tá.
>> NEEL MEHTA: Agus mar sin tá bootstrap go bunúsach bileog stíle CSS mór.
Deir stílbhileog CSS díreach, aon uair Tá mé rang seo, na stíleanna ag gabháil.
Mar sin, an stílbhileog CSS le haghaidh bootstrap ag dul a bheith rud éigin cosúil le .btn,
an rang cnaipe a bheidh, a fháil mar a bheadh teorann cúinne chothromú nó cibé.
Mar sin, go bunúsach, bootstrap sé ach bunch de ranganna agus a bunch de stíleanna
sonraíodh le haghaidh na ranganna.
Mar sin, chomh fada agus a bhfuil tú go bhfuil CSS, an liosta de rialacha i do leathanach,
gheobhaidh tú an styling bootstrap.
Is é sin, ar ndóigh, ag brath ar a bhfuil na stíleanna bootstrap i do leathanach
chun tús a chur leis.
>> Agus mar sin i Vicipéid, Ní fhéadfadh tú is dócha
é sin a dhéanamh mar gheall ar Vicipéid Níl bootstrap ann.
Ach má rinne sé ag bootstrap, is dócha d'fhéadfaí tú a dhéanamh.
Agus má raibh tú, d'fhéadfaí tú Áirítear é, ach d'fhéadfadh go
briseadh an leagan amach atá ann cheana féin ar an leathanach.
Ach ceist an-mhaith.
Is féidir leat é a úsáid bootstrap cibé áit a bhfuil sé san áireamh,
ach nach bhfuil sé tógtha i de réir réamhshocraithe.
>> LUCHT ÉISTEACHTA: Go raibh maith agat.
>> NEEL MEHTA: Tá.
Ceisteanna ar bith níos mó?
Yes.
Mar sin, cibé an bhfuil tú anseo nó sa bhaile, ach cuimhnigh getboostrap.com-- arís,
getboostrap.com-- bhfuil do chara.
Aon uair a bhfuil tú ag baint úsáide as Bootstrap, beidh sé seo a thabhairt duit
treoracha faoi conas a fháil thosaigh, conas é a úsáid comhpháirteanna.
Níl roinnt JavaScript fionnuar plug-orlach nach mbeidh muid ag dul thar anseo,
ach tá siad fiú a sheiceáil amach chomh maith.
Mar sin, is é seo do chara.
Tá sé díreach tábhachtach a fháil a úsáidtear chun conas é a úsáid seo.
>> Mar sin, a ligean ar comhrá le beagán faoi ag déanamh gréasáin sofhreagrach.
Mar sin, mar a dúirt mé cheana, daoine a úsáidtear a gcuid ríomhairí glúine, úsáideann siad a ngutháin.
Agus mar a d'fhéadfá a shamhlú go maith, is é seo a méid scáileán an-difriúil ná sin.
Agus mar sin ar an láithreán gréasáin céanna Breathnaíonn go maith ar mo ghuthán
nach bhfuil ag dul chun breathnú maith, gá, ar ríomhaire.
Mar sin, cad a bhfuil tú a dhéanamh ná dhéanamh do láithreán gréasáin a chur in oiriúint.
Tá sé a chur in oiriúint do na éagsúla méideanna scáileán go bhfuil sé ar.
>> Tá sé a rá, tá a fhios agam Tá mé ar ríomhaire, ríomhaire glúine mór, ba chóir dom a leathnú.
Tá a fhios agam Tá mé ar fón, ba chóir dom a Laghdaigh.
Agus mar sin cuireann bootstrap roinnt an-, uirlisí an-úsáideach é seo a dhéanamh.
Mar sin, a ligean ar bootstrap tú sos ar an suíomh gréasáin i 12 colúin.
Is féidir leat a dhéanamh sraitheanna agus tá 12 colúin.
Agus is féidir leat críochdheighilte iad siúd, áfach, is mian leat.
Is féidir leat a bheith ar cheann, rud mór, a bhfuil 12 colúin leithead.
Is féidir leat a bheith dhá rud go bhfuil sé an ceann.
Is féidir leat a dhéanamh ach rud amháin go bhfuil ceithre, amháin go bhfuil dhá, nó i gceann amháin go bhfuil sé.
Is féidir leat a dhéanamh trí, trí, trí, trí.
Is féidir leat a dhéanamh is cuma cad miondealú gur mian leat.
>> Mar sin, b'fhéidir riachtanais do leathanach gréasáin a bheith acu cholún ar chlé go tríú cuid an leithead.
Mar sin, bheadh a bheith go gceithre cholún leathan agus an chuid eile den leathanach
bheadh ocht colúin leathan.
Mar sin, is é seo mar shampla.
A ligean ar tharraingt suas sampla eile.
>> LUCHT ÉISTEACHTA: An bhfuil sé i gcónaí a bheith ina scoilt fiú?
D'fhéadfadh sé a bheith ina seacht, cúig scoilt?
>> NEEL MEHTA: Tá.
D'fhéadfadh sé a bheith seacht, cúig.
Yes.
Chomh fada agus cuireann sé go dtí 12, tá sé fíneáil.
Mar sin, a ligean ar dul ar ais anseo.
Arís, is é sin an cód anseo freisin ar fáil anseo,
faoi shampla sofhreagrach.
Mar sin, tharraing mé díreach tar éis suas roinnt Sampla cód sofhreagrach anseo.
Mar sin, a dhéanann tú é seo trí úsáid a bhaint rud ar a dtugtar as a chéile.
Is Rae ach rang eile.
Tá sé an stíl eile a cuir tú ar do divs chun iad a dhéanamh a gcomhpháirteanna féin.
>> Mar sin, deir tú, div aicme = "as a chéile" a dhéanamh as a chéile,
a thabhairt duit féin 12 colúin de spás.
Agus ansin chuir tú colúin taobh istigh de sin.
Mar sin, anseo againn Col-XS-6.
Ná bíodh imní ort faoi na xs.
Beidh muid ag labhairt faoi i sec.
Ach go bunúsach, ní mór dúinn ar cheann rud go bhfuil sé ar leithead.
Tugaimid fhág sé.
Agus mar sin go bhfuil an bosca clé anseo.
Ní mór dúinn rud amháin go bhfuil sé cinn de na 12 colúin leathan.
Agus is é sin ar cheann ar dheis.
>> go maith Tugann ach a dhéanann do div líonadh suas liath.
Mar sin, go díreach ionas gur féidir linn a fheiceáil go bhfuil siad ar leith.
Agus mar sin seo an chéad sampla.
Tá sé an sampla an-simplí ar conas tú Bheadh úsáid do sraitheanna agus colúin anseo.
A shainiú tú as a chéile ag baint úsáide as aicme = "as a chéile".
Agus ansin a dhéanann tú aicme = "col-XS-6" a dhéanamh leath, "col-XS-6" a dhéanamh ar an leath eile.
Seo sampla níos casta.
A ligean ar breathnú ar an Tiny, Ollmhór, an chuid eile amháin.
>> Is féidir linn a dhéanamh Tiny dhá cholún leathan, Is féidir linn a dhéanamh Ollmhór sé colúin leathan,
agus an chuid eile ceithre cholún leathan.
A chuireann suas go dtí 12.
Agus mar sin suas go deireadh leis na chuimsíonn an leithead an leathanaigh.
Arís, ní mór dúinn a chéile taobh amuigh.
Ansin ní mór dúinn div aicme = "col-XS-2" agus ansin 6, agus ansin 4.
Agus a chuirfidh an struchtúr dúinn.
Agus mar sin féidir linn a chur cuma cad an heck ba mhaith linn taobh istigh anseo.
In ionad Tiny, is féidir linn a chur ar cnaipe.
aicme cnaipe = "btn btn-bhunscoile".
Agus fógra ionas go mbeidh ár cnaipe ní a chur suas go léir an leithead,
ach ar a laghad tá sé teoranta leis an spás i bhfad.
>> Mar sin tá go léir go maith agus go maith.
Mar sin, is féidir linn a bhriseadh anois suas ár ngréasán leathanach i ***án, leithead ciallmhar.
Is féidir linn a rá ba mhaith linn a bheith acu taobh clé colún, agus colún ar dheis, agus mar sin de.
Ach ní mór dúinn a imithe thar conas a dhéanann tú sofhreagrach é.
Agus mar sin bootstrap a ligean ar é sin a dhéanamh chomh maith.
Tá sé na rudaí seo ar a dtugtar Brisphointí.
Mar sin, tá sé ar bhealach a fhios agam cé acu tá tú ar ríomhaire glúine, tá tú ar tablet,
tá tú ar cothrománach teileafóin, nó go bhfuil tú ar fón ingearach.
Fhios sé an méid scáileán.
Agus bhriseann sé seo i gceithre categories-- mór nó LG, a bhfuil ríomhairí glúine, de ghnáth.
md nó meán, a bhfuil táibléad.
sm, beag.
Nó XS, beag breise.
Agus mar sin nuair tú a shonrú colún, a deir tú,
ba chóir é a sé colúin leithead ar feiste beag breise.
Sin an fáth a rinne muid col-XS-6.
Táimid ag rá go ba chóir dó a bheith sé cinn de na 12 colúin leathan
ar feiste beag breise.
Agus má tá sé rud ar bith níos mó, beidh muid díreach réamhshocraithe a úsáid a bhaint as an méid beag breise.
Má tá sé rud ar bith níos mó ná breise beag, beidh sé a bheith sé leathan.
Agus mar sin is féidir linn a ghiaráil na a dhéanamh ar ár colúin
glacadh le méid difriúil de colúin atá bunaithe ar an méid scáileán.
A ligean ar dul go dtí an méid a athrú sofhreagrach.
Mar sin, ní mór dúinn ár colúin.
Agus deir sé, "col-lg-6 col-XS-12".
Mar sin, mar gheall ar cad a fhios agat go dtí seo, cad a dhéanann tú
I mo thuairimse, ag dul chun tarlú ar scáileán mór?
Bhuel, tá sé de chineál tugadh ar bhealach, ach cad a dhéanann
cheapann tú go mbeidh sé cuma Is maith ar scáileán mór?
Agus cén fáth go bhfuil sin?
>> LUCHT ÉISTEACHTA: An bhfuil sé go ar scáileán mór, tá sé
ag dul a ghlacadh ach amháin ar an chuid sin den spás iomlán?
Cosúil le leath de na sé, buille faoi thuairim mé?
>> NEEL MEHTA: Tá.
>> LUCHT ÉISTEACHTA: Agus ar lú scáileán, tá sé ag dul
a chur suas ar an scáileán ar fad, an 12.
NEEL MEHTA: Tá.
Ceart.
Mar sin, mar shampla, a ligean ar ach breathnú síos anseo.
Yes.
Mar sin, ar rud ar bith go bhfuil LG nó bigger-- mar sin a tharlaíonn mo ríomhaire
a LG mar tá sé wide-- deas beidh sé a dhéanamh
taobh sé le taobh mar tá sé col-lg-6.
Mar sin, mar tá sé ar mór, a dhéanann sé é sé colúin leathan agus sé colúin leathan.
A ligean ar a fheiceáil cad a tharlaíonn má mé dhéanamh i amháin níos lú.
Tá mé ag dul díreach tar éis a scáileán un-iomlán seo.
Agus tá mé ag dul chun Laghdaigh an scáileán.
Tá mé ag dul chun Laghdaigh an scáileán, mar sin tá sé Breathnaíonn an nós tá mé ar ghléas níos lú.
Mar sin, tá mé ag dul chun Laghdaigh sé mar seo.
>> Agus voila.
Tá sé Cruachta anois mar anois ní mór dúinn a imithe
ó to-- mór é seo is dócha ar méid scáileán breise beag.
Agus mar sin anois a deir sé, ceart go leor, ní bhíonn muid i mór, tá muid i dtalamh beag breise.
Mar sin, táimid ag dul a úsáid an méid beag breise.
Agus táimid ag dul chun XS-12, XS-12.
Mar sin, tá sé ag dul a bheith Cruachta.
Agus díreach faoi deara go níl rud a dtugtar brisphointe.
Is brisphointe áit rinne tú an t-aistriú
ó beag breise go beag, beag go mór, agus mar sin de.
>> Mar sin ach faoi deara go mar sleamhnán mé amach, sa deireadh, beidh tú a fháil go dtí an pointe
i gcás ina mbainfidh siad a léim chun bheith taobh le taobh.
Tá tú ag dul.
Mar sin, níl an brisphointe ceart ann.
Mar sin, is féidir linn a dhéanamh níos casta fiú.
Anois is féidir linn a rá, na Ba chóir go mbeadh rudaí a bheith ceithre leathan.
Is é sin, ba chóir dóibh chur suas thart ar an tríú
den óráid ar ghléasanna an-mhór.
Ar ghléas mheán, ba cheart é a ghlacadh suas leath an scáileán mar tá sé MD-6.
Ar ghléas an-bheag, ba chóir é a chur suas 12.
Agus mar sin Breathnaíonn an deas nádúrtha.
A ligean ar iarracht a dhéanamh ach seo amach dúinn féin.
>> Mar sin, ar scáileán mór, tá siad ceithre leithead.
Laghdaigh sé beagán beag.
Agus tá siad anois sé ar leithead.
Mar sin, is é seo sé, sé, sé.
Laghdaigh sé níos mó agus ansin beidh siad a Cruachta go hiomlán.
Mar sin, seo, mar shampla a dhéanann, ciall más rud é tú ag a bhfuil cártaí, cosúil le cártaí nuachta,
mar shampla, más rud é acu i gcás tá sé ar scáileán an-mhór,
tá sé ceart go leor má tá tú roinnt taobh le taobh toisc go mbeadh siad a fháil ar fad seomra go leor.
Ach is gá iad a bheith seomra go leor.
Mar sin, ar scáileán níos lú, gur mhaith leat a iarraidh a thabhairt dóibh
seomra níos mó, comhréireach, an leathanaigh.
>> Mar sin, mar shampla saol fíor, a ligean ar rá ní mór dúinn Twitter.
Agus ní mór dúinn bosca téacs, mar sin is féidir leat tweet ar an taobh.
Agus ní mór dúinn liosta de trending Ábhair ar an taobh deas.
Mar sin, ar scáileán mór, ba chóir dúinn Tá iad a bheith taobh le taobh,
ionas gur féidir leat iad a fheiceáil ar gloine.
Ach ar scáileán níos lú, ba cheart dúinn a dhéanamh 12 agus 12,
ionas go mbeidh na topaicí trending faoi bhun an limistéar tweet.
Toisc go bhfuil an limistéar tweet an rud is mó agus ar scáileán beag,
nach bhfuil na topaicí trending ábhar go leor oiread.
Agus mar sin chuir muid iad ar dheis thíos, mar sin gur féidir leo araon, a fháil go leor spáis.
Ciall go dtí seo?
>> LUCHT ÉISTEACHTA: Tá.
>> NEEL MEHTA: soladach.
Mar sin tá go léir na samplaí tá mé anseo.
A ligean ar iarracht a dhéanamh dúshlán.
Mar sin arís, is é an dúshlán seo-2.html do sin de tú a leanas chomh maith sa bhaile.
Mar sin, mo chara, Mark Zuckerberg, tháinig chugam an lá eile.
Agus tá sé cosúil le, Neel, tá mé gotten maith go leor ag dearadh gréasáin.
Is féidir liom a dhéanamh ar an HTML.
Rinne mé seo beag, in eagar nua le Facebook.
Tá mé smaoineamh nua do conas ba chóir dúinn a stíl Facebook.
Agus anseo tá sé.
Ceart anseo.
Seo roinnt cód, mar shampla.
Mar sin, tá sé ar a dtugtar Fancybook.
>> Tá roinnt nuashonruithe stádas.
Ní mór dúinn Nemo, Mike Kosowski, ***-- trí nuashonruithe stádas.
Agus ansin ní mór dúinn liosta de cairde ar líne dheis thíos é.
Mar sin, tá sé déanta a chuid obair bhaile.
Tá a fhios aige beagán faoi Bootstrap, tá a rinne sé ar an liosta d'fhonn,
atá déanta aige le beagán de HTML.
Mar sin, tá sé ar an leathanach gréasáin.
Ach tá sé cosúil le, Neel, ní féidir liom tuiscint a fháil ar dearadh sofhreagrach ar chor ar bith.
An bhfuil aon saineolaithe a D'fhéadfadh cabhrú liom leis sin?
Agus fortunately, tá tú anois saineolaithe i ndearadh sofhreagrach.
>> Mar sin, cad a dúirt sé go raibh sé liom go Is mian Fancybook chun breathnú mar seo.
Ar ghléas an-bheag, cosúil le fón, rud
Ba chóir a Cruachta, cosúil le anseo.
Mar sin, tá tú an líne ama upfront, suas barr, agus ansin
ba chóir duit an barra comhrá ag bun an leathanaigh.
Ach ar tablet nó ar mheán gléas, ba chóir é a leath agus leath,
mar atá sa líne ama ba chóir a bheith leath agus an liosta de na cairde comhrá
Ba chóir go mbeadh ar an leath eile.
>> Ansin, ar ríomhaire glúine, an amlíne Ba chóir dul i mbun trí cheathrú
agus ansin ba chóir an fál comhrá i mbun an ceathrú cuid eile amháin.
Agus mar sin tá sé cosúil le, Neel, tá mé an cód anseo, ach nach bhfuil sé freagrach.
Ní mór é a féin a iompar mar seo.
Mar sin, mo dúshlán a thabhairt duit Tugtar cód seo here--
má athnuachan tú do CodePens, beidh tú a fheiceáil seo.
Nó má tá tú a ghreamú díreach sa chód ar dhúshlán-2, beidh tú a fheiceáil seo.
>> Seo an sampla cód.
Feicfidh tú a fheiceáil ar roinnt xxxs.
Ba mhaith liom tú a athrú ar an xxxs, den sórt sin go an amlíne agus an liosta de na cairde
leanas na specs anseo.
Ná bíodh imní ort faoi cad atá taobh istigh den amlíne do anois.
Beidh orainn a fháil go sa chéad chéim eile.
Ach do anois, a ligean ar a fheiceáil má fhaigheann muid na rudaí seo a scoilt sé suas mar seo.
Mar sin, a dhéanann chiall sin a dhéanamh?
Mar sin, má tá tú sa bhaile, sos an físeán agus iarracht a
a dhéanamh do leathanach gréasáin cuma sofhreagrach mar seo.
Má tá tú anseo, a chur cosúil le dhá, trí nóiméad.
Thig leat comhrá a dhéanamh le comharsa, agus iarracht a dhéanamh, agus a shocrú an tUasal Zuckerberg ar
fadhb dearadh sofhreagrach.
Má tá aon cheist agat, dar saor chun iúl dom.
Tuairimí maith?
Arna dhéanamh?
Nice.
>> LUCHT ÉISTEACHTA: [inaudible].
NEEL MEHTA: Cad é?
>> LUCHT ÉISTEACHTA: Tá mé go maith.
>> NEEL MEHTA: Ó, go maith.
Nice.
LUCHT ÉISTEACHTA: an rud faoi an 12, an bhfuil sé sin Bootstrap
déileálann spás scáileán thabhairt mar 12 aonad ar fud agus ansin roinneann suas?
Conas go díreach a dhéanann an proportioning obair seo?
>> NEEL MEHTA: Tá.
Mar sin, tá an cheist, conas a dhéanann an proportioning
ag obair le haghaidh bootstrap, ceart?
>> LUCHT ÉISTEACHTA: Tá.
NEEL MEHTA: Mar sin, aon uair a tá tú aicme div = "as a chéile",
is cuma cé chomh mór is atá an scáileán, Beidh bootstrap a thabhairt duit 12 aonad
ar an méid céanna le chur suas go méid i bhfad.
Mar sin, i col 1, tá sé i gcónaí 8.33% de mhéid an scáileán,
bíodh go bhfuil sé seo ar fud an nó go bhfuil sé seo ar fud an.
Agus mar sin, ar ndóigh, ar lú scáileán, tá gach colún lú.
Tá tú fós 12 colúin leathan, tá sé níos lú.
Mar sin tá sé suas chun tú a dhéanamh cinnte go nglacfaidh rudaí suas colún níos mó,
comhréireach, mar chúiteamh don easpa spáis.
Bhfuil ciall?
>> LUCHT ÉISTEACHTA: Tá.
Go raibh maith agat.
NEEL MEHTA: Good question.
LUCHT ÉISTEACHTA: Ar mór scáileán is féidir, tá tú
an líne ama a chur suas trí cheathrú?
>> NEEL MEHTA: Tá.
NEEL MEHTA: Cén chaoi a bhfuil guys ag mothú?
Maith?
Cool.
Sin a ligean le teacht ar ais.
Agus a ligean ar iarracht a dhéanamh agus a shocrú an chuid seo Láithreán gréasáin Uasail Zuckerberg ar.
Mar sin, tá na hamlínte suas anseo, ag an barr, agus an liosta de na cairde
Is ag bun an leathanaigh.
Agus mar sin ní mór dúinn ach a shannadh colúin, le méide comhréireach,
i ngach ceann de na.
Mar sin, is é an chéad *** seo don amlíne.
Cad iad na ranganna a dhéanamh chuir muid i anseo?
Cad a rinne tú guys a chur i anseo?
Mar sin, cuimhnigh, ar scáileán mór, ní mór é chun dul i mbun trí cheathrú de na leithead.
Agus mar sin cad a bheadh stíl a thabhairt duit go?
Ar scáileán mór, trí cheathrú de na leithead.
Cén rang úsáidimid ann?
LUCHT ÉISTEACHTA: Mar sin, táimid ag dul ach a bheith eagarthóireacht go gcéad dul síos an ranga.
NEEL MEHTA: Chun anois.
Yes.
>> LUCHT ÉISTEACHTA: Níl muid ag eagarthóireacht gach, Gné ar leith den amlíne?
NEEL MEHTA: Nach anois, ar a laghad.
Mar sin, tá an rud ar fad bloc.
Táimid ag athrú go ach an dhearadh an bhloic.
Mar sin, anseo is féidir linn a Col-lg-9 mar tá sé naonúr as na 12 leithead ar scáileán mór.
Agus ansin ar scáileán mheán, cé mhéad colúin ba chóir dom a fháil?
LUCHT ÉISTEACHTA: Tá sé ceaptha a bheith leath agus leath.
NEEL MEHTA: Ceart.
Mar sin, cé mhéad é sin?
>> LUCHT ÉISTEACHTA: Mar sin, sé.
NEEL MEHTA: Sé.
Agus ba chóir ansin breise beag be-- má tá sé Bíonn suas an leithead iomlán an tsraith,
cé mhéad ba chóir é a?
LUCHT ÉISTEACHTA: 12.
NEEL MEHTA: 12.
Yes.
Agus anois tá muid fuair a seo a athrú cinn eile,
mar sin a thógann sé suas an chuid eile den spás.
Mar sin, col-lg--
LUCHT ÉISTEACHTA: Tá sé dul a chur suas ar an scáileán ar fad?
NEEL MEHTA: Tógann sé suas an ceathrú cuid ar an scáileán ar ghléas mór,
mar a léirigh muid anseo.
>> LUCHT ÉISTEACHTA: Trí.
>> NEEL MEHTA: Trí.
Agus ansin col-md-6 a ghlacadh suas an chuid eile den spás.
col-XS-12.
Mar sin, anois táimid tar éis an amlíne rachaidh sé i mbun trí cheathrú
an leathanaigh sa scáileán mór agus ansin ar an gceathrú cuid ar an taobh.
Agus ansin má mhéid an scáileán síos, ba chóir é a Athraigh dá réir.
Mar sin, tá sé Cruachta anois, ar scáileán an-bheag.
Agus má Méid muid sé suas le beagán, ba chóir iad a bheith go díreach leath agus leath.
Mar sin, atá déanta againn go dtí seo.
An-fionnuar.
Agus mar sin ní bheidh muid ag déanamh an chuid eile den dúshlán.
Is féidir leat a dhéanamh go duit féin.
Ach go bunúsach, tá tú chun iarracht a dhéanamh agus a dhéanamh ar na sofhreagrach
mar a dhéanann well-- an amlíne míreanna, iad féin, sofhreagrach.
Mar sin, anois tá muid imithe tríd gach ní mór duit fios a bheith agat
mar gheall ar an taobh sofhreagrach de bootstrap.
Ceisteanna ar bith faoi sofhreagrach dearadh le bootstrap
agus conas a d'fhéadfadh leat dul faoi á dhéanamh sin?
Yes?
>> LUCHT ÉISTEACHTA: An bhfuil cosúil é más rud é bhí againn físeán leabaithe
agus bhíomar ag iarraidh a rialú a dhéanamh ar an scála ag a bhfuil an was-- físeán
an méid de na físeáin ag dul ó ríomhaire glúine le fón.
NEEL MEHTA: Tá.
Níos mó nó níos lú.
Gur mhaith leat a rá leis an físeán a glacadh le seomra an oiread agus is tá sé tugtha,
a bhfuil beagán annoying uaireanta.
Ach tá an smaoineamh croí an gcéanna.
A físeán, mar aon rud eile i an leathanach, cosúil le cnaipe nó pé rud,
chomh fada agus a úsáideann tú an colúin agus na sraitheanna,
is féidir leat a thabhairt dó méid áirithe de spás.
Agus ag fáil mar sin tá sé chun ómós a go bhfuil ceist éagsúla mar gheall ar nós YouTube
leabaíonn bhfuil áirithe, méid is fearr.
Ach teoiriciúil ag laghad, go mbeadh sé ag obair.
Cool?
>> LUCHT ÉISTEACHTA: Is dócha mé ansin, chun í, an bhfuil tú i ndáiríre
gá go mbeadh leaganacha éagsúla de an íomhá céanna i méideanna éagsúla
do ríomhaire glúine i gcoinne iPhone?
Yeah Is í an cheist, an bhfuil gá dúinn a tá íomhánna atá sofhreagrach chomh maith.
Agus go deimhin, is féidir leat é sin a.
Sílim go bhfuil sé i CSS.
Ach ceadaíonn bootstrap tú a dhéanamh sin chomh maith.
Is féidir leat a bheith íomhánna sofhreagrach.
Is féidir leat do chuid íomhánna Athraigh de réir an méid an leathanaigh.
Agus níl an rud an-nua HTML5, an leagan is nua de HTML,
agus CSS3, an newest leagan de CSS, a
lig tú a iarraidh íomhánna éagsúla bunaithe ar an méid scáileán bhfuil tú ag.
De ghnáth, tá sé go maith go leor chun ach ní mór do íomhá Laghdaigh díreach nó ag fás go
mar sin féin mór mór é a bheith.
Ach is féidir leat, más mian leat go, tá ceann 32 ag 32
do scáileáin an-bheag, agus 64 de 64 ar feadh scáileán mór,
agus ansin a sheirbheáil dóibh siúd go roghnach.
Is féidir leat é a dhéanamh.
Tá sé seo déanta ag roinnt daoine.
Tá sé fós ar thús cadhnaíochta go leor.
Ach freagra gairid, images-- sofhreagrach Is féidir bootstrap shábháil ar an lá ann.
Cool?
>> LUCHT ÉISTEACHTA: Go raibh maith agat.
>> NEEL MEHTA: Sin a ligean le labhairt fíor-tapa faoi conas
chun seo a fháil i do leathanach gréasáin féin.
Ligean le rá gur mian leat a dhéanamh do láithreán gréasáin féin ag baint úsáide as bootstrap.
Agus mar sin a ligean ar díreach díreach siúl trí chéile.
Ligean le rá a dhéanann tú díreach gnáth leathanach HTML.
Thig leat a leanúint chomh maith i is cuma cad é do eagarthóir is fearr leat.
Mar sin, ní mór dúinn ach roinnt leathanach HTML.
Is féidir linn a dhéanamh! Html DOCTYPE.
Tá sé seo freisin html, ar ár leathanach.
Ní dhéanfaidh aon ní nua.
Táimid tar éis a rinneadh roimh seo.
Mar sin anseo ní mór dúinn ár HTML agus Is féidir linn a chur stuif taobh istigh anseo.
Is féidir linn a bheith ar ár cnaipe.
Agus mar a dúirt mé cheana, seo Níl gá dul chun na hoibre.
Cén fáth a d'fhéadfadh nach bhfuil an obair seo?
Cén fáth nach mbeidh a fháil againn ar ár deas, cnaipe colorful?
>> LUCHT ÉISTEACHTA: Toisc nach raibh againn a nascadh leis an tionscadal bootstrap nó an comhad?
NEEL MEHTA: Tá.
Ceart.
Toisc Bootstrap-- tá sé ach comhad CSS mhaisiúil.
Tá sé sraith de stíleanna go ag gabháil le do eilimintí.
Anseo tá muid dúradh go linn a ag iarraidh a bhaint as na stíleanna.
Feicfidh mé an méid sin suas le beagán.
Táimid tar éis a dúirt sé ba mhaith linn a úsáid na stíleanna, ach ní táimid ag
D'inis sé cad iad na stíleanna.
Agus sin an méid do Ba cheist ó níos luaithe.
Sin an freagra sin.
Ní mór dúinn a fháil ar bhealach a fháil ar na stíleanna agus iad a áireamh in ár leathanach ar bhealach.
Agus beidh sin bootstrap thaispeáint dúinn conas a dhéanamh sin.
>> Mar sin, má théann tú go dtí an barr anseo, Ag Tosú.
Níl bealaí éagsúla chun é a íoslódáil.
Ní fhéadfadh sé seo ciall gá.
Bootstrap-- beidh sé seo in iúl tú grab an comhad CSS féin.
Agus bhí tú é i do leathanach féin.
Tá Cód Foinse más mian leat a hack ar sé le tú féin.
Ní gá duit seo i ndáiríre.
Sass Is teanga go Tiomsaíonn i CSS.
Cuimhnigh ar sé mar réamhphróiseálaí.
I bhfad cosúil le PHP Is réamhphróiseálaí de HTML, tá Sass ina réamhphróiseálaí do CSS.
Mar sin, más mian leat é a dhéanamh ar an mbealach sin, is féidir leat é sin a.
>> Is é an bealach is éasca ag baint úsáide as CDN, nó líonra seachadta ábhar.
Tá sé ar an suíomh gréasáin go díreach Feidhmíonn suas cóip de bootstrap
an-tapa chun tú a san áireamh i do leathanach féin.
Mar sin, tá anseo sampla.
Beidh sé a thabhairt duit an ghné seo nasc seo.
Insíonn gné nasc do bhrabhsálaí, cibé comhad a stóráil anseo
agus san áireamh é in ár leathanach gréasáin.
Agus sa chás seo, tá sé an comhad CSS bootstrap.
Mar sin, beidh muid ach a chóipeáil go URL, nó téacs, agus beidh orainn é a chaitheamh taobh istigh
de ár ceann.
>> Agus ní bheidh mé tús a chur leis an leathanach seo, ach is féidir leat muinín go n-oibríonn an.
Beidh an nasc a gheobhaidh tú an CSS.
Cuir san áireamh i do leathanach agus ansin beidh tú
ann úsáid a bhaint gach ceann de na bootstrap ranganna go bhfuil a fhios agat agus grá.
Más mian leat a choinneáil go háitiúil agus bhfuil sé ar do chóras comhad féin
in ionad a bheith chun dul go dtí an idirlíon a grab é,
mhaith más mian leat a úsáid ar an suíomh as líne,
Is féidir leat úsáid an rogha Íosluchtaigh.
Ach don chuid is mó, ag baint úsáide as an Is CDN tapa go leor mar gheall ar an mbealach sin,
sé á choimeád cothrom le dáta ar do shon chomh maith.
Tá tú thabhairt cothrom le dáta de láimh é ach oiread.
Ciall?
>> Mar sin, beidh a lán de uirlisí tar éis tógtha seo i trí mhainneachtain. I do Pset7 agus Pset8,
Creidim go bhfuil bootstrap san áireamh go huathoibríoch.
Agus i CodePen, le haghaidh Mar shampla, tá sé cheana
san áireamh mar gheall mé chur leis add an socrú sin.
Mar sin, más mian leat riamh a imirt ar fud leis, is féidir leat dul díreach ar CodePen,
nó dul ar do ID, nó cibé.
Agus d'fhéadfá a bheith in ann Rochtain bootstrap ann,
ach nach bhfuil sé tógtha i gcónaí i, de réir réamhshocraithe, leis an ngréasán.
Ciall?
>> Yes.
díreach mar atá againn recap-- cosúil le cúig nóiméad fágtha.
Ach mar recap, i leathanaigh gréasáin nua, Is féidir leat san áireamh bootstrap mar seo.
Agus nuair a bhíonn tú san áireamh é, Is féidir leat a dhéanamh go léir an stuif spraoi anseo.
Is féidir leat dul ar, agus is féidir leat peruse díreach an CSS, is féidir leat a chur ar roinnt stíleanna fionnuar,
Is féidir leat a bheith comhpháirteanna cosúil leis na cnaipí,
agus na táblaí, agus an liosta nithe a luaite againn.
Níl roinnt plugins JavaScript fionnuar, a d'fhéadfadh a ba mhaith leat a iniúchadh a dhéanamh.
Cuir siad roinnt fionnuar idirghníomhaíocht leis an leathanach gréasáin.
Mar seo a dhéanann idirphlé mhódúil.
>> Mar sin, níl roinnt rudaí spraoi Is féidir leat a dhéanamh le bootstrap.
Mar sin, tá mo comhairle a thabhairt duit dul ar aghaidh agus é a úsáid i do thionscadail féin,
lean na treoracha a chuirimid díreach a rinne maidir le conas chun é a fháil,
agus díreach a léamh an bootstrap mar gheall go mbainfidh tú níos mó faoi cad atá le déanamh a fhoghlaim.
Agus mar sin tá muid imithe os a chionn, lá atá inniu ann, conas é a úsáid
an doiciméadú, cad é an foirgneamh Tá bloic, agus an chaoi a bhfuil sé choincheapa de.
Mar sin, anois tá mo dúshlán a thabhairt duit dhéanamh ar láithreán gréasáin ag baint úsáide as bootstrap.
Téigh isteach sa docs.
Agus úsáid na huirlisí a tá muid D'fhoghlaim go dtí seo chun iarracht a dhéanamh agus a pharsáil iad
agus iad a thuiscint.
Agus úsáid a bhaint as na stíleanna agus uirlisí fheiceann tú ann i do láithreán gréasáin.
Agus tá sé ach mór, próiseas turgnamhach.
>> Triail a bhaint as stíl áirithe.
Oibríonn sé?
Níl An bhfuil?
Bain triail as stuif a chur le chéile.
Féach cad a tharlaíonn.
Tá sé an-i bhfad féin treoraithe, próiseas fionnachtana.
Ach lá atá inniu ann, tá muid fhoghlaim na an-Basics de cad is bootstrap?
Cén fáth a oibríonn sé?
Conas a oibríonn sé?
Conas is féidir linn a tosú ag baint úsáide é, sa chéad áit?
Agus mar sin anois go bhfuil tú thar an hump, tú
Ba chóir go mbeadh a bheith in ann é a dhéanamh deas réidh le tú féin.
>> Mar sin arís, go léir an Tá cód rinne muid anseo.
Mar sin, más mian leat riamh a fháil Scuab suas ar,
cosúil le, cad atá le cheat tapaidh bileog do gach ceann de na stíleanna?
Is féidir leat dul isteach sa sampla anseo.
Tá roinnt sampla stíleanna anseo.
Más mian leat chun iarracht a dhéanamh an dúshláin arís le tú féin,
Is féidir leat iad a triail a anseo agus seiceáil amach na réitigh.
Mar sin, beidh an nasc seo a san áireamh ar na sleamhnáin, a
Beidh a sheoladh amach chugat ar ndóigh.
Ach tá sé chomh maith suas anseo.
Is féidir leat sos an físeán, más mian leat.
Tá an fhaisnéis go léir is gá duit ag dul a bheith ar dheis anseo, ar an suíomh.
Mar sin, má tá aon cheist agat le duine ar bith, is féidir linn iad a ghlacadh ar feadh na miontuairiscí chéad chúpla.
Seachas sin, go raibh maith agat go léir go mór do lucht féachana.