የቡት ማሰሪያን በመጠቀም አቀማመጥ። ተጨማሪ የማስተካከያ ክፍሎች. በተለያዩ ማያ ገጾች ላይ የተለያዩ ንጥረ ነገሮች

በአሁኑ ጊዜ፣ ብዙ የድር ዲዛይነሮች እና ገንቢዎች ስለ Twitter Bootstrap ያወራሉ እና ይጽፋሉ። አንዳንዶች ስለ ድር ዲዛይን ዜሮ እውቀት ላላቸው ገንቢዎች እውነተኛ ስጦታ ብለው ይጠሩታል። ሌሎች ደግሞ ለዲዛይነሮች በረከት ብለው ይጠሩታል. ምንም ይሁን ምን፣ Twitter Bootstrap ብዙ ነገሮችን ቀላል እና ፈጣን ያደርገዋል።

በአብዛኛዎቹ አጋጣሚዎች የድር ገንቢዎች ዝግጁ የሆነ ሀሳብ አላቸው, ነገር ግን ሊወስዱት የሚፈልጉትን ፕሮጀክት በቴክኒካዊ መንገድ መፍጠር ስለማይችሉ መጀመር አይችሉም. የደንበኛውን ጎን ለመተግበር ወደ ድር ዲዛይነሮች መዞር አለባቸው.

ይህ ሂደት ለረጅም ጊዜ ሊጎተት እና ገንቢውን በቁም ነገር ሊያዘገየው ይችላል, ለእሱ / ሷ ሀሳብ በተቻለ ፍጥነት እንዲሳካ በጣም አስፈላጊ ነው. በእነዚህ አጋጣሚዎች፣ Twitter Bootstrap ልክ እንደ የቀልድ መፅሃፍ ልዕለ ኃያል!

ትዊተር ቡትስትራፕ የድር መተግበሪያዎችን ለማዳበር የሚረዳ የCSS ማዕቀፍ ነው። ዛሬ ከሚገኙት በጣም ቀላሉ የሲኤስኤስ ማዕቀፎች አንዱ ነው እና በጅምላ ጥቅም ላይ እየዋለ ነው። ስለድር ዲዛይን ምንም እውቀት ላይኖርህ ይችላል ተብሎ ይታሰባል እና የሚያስፈልግህ በBootstrap ዝርዝር መሰረት አንዳንድ HTML ኮዶችን መፃፍ ብቻ ነው።

በአጭሩ፣ Twitter Bootstrap አስቀድሞ አለው። ዝግጁ የሆኑ ዝርዝሮችየCSS ቅጦች፣ አብሮ የተሰራ የJQuery ድጋፍ እና እንዲሁም በርካታ ታዋቂ የጃቫስክሪፕት መሳሪያዎች አሉት።

ዋው! ጥሩ አይደለም? አንድ ሙሉ ስብስብ ያገኛሉ ጠቃሚ መሳሪያዎችቀድሞውኑ ለአገልግሎት ዝግጁ ነው። እርስዎ ማድረግ የሚጠበቅብዎት ትክክለኛውን የኤችቲኤምኤል ኮድ በትክክለኛው ቦታ ላይ መለጠፍ ብቻ ነው።

በዚህ ጽሑፍ ውስጥ, Twitter Bootstrapን እንዴት መጠቀም እንደሚችሉ እገልጻለሁ. ይህንን ለማድረግ, የማሳያ ገጽ አቀማመጥ አሳይሃለሁ. እንዲሁም ከእራስዎ ፍላጎቶች ጋር በሚስማማ መልኩ ማዕቀፉን እንዴት ማበጀት እንደሚችሉ እነግርዎታለሁ.

እንጀምር

በመጀመሪያ የ bootstrap.zip ፋይልን ከ ማውረድ አለብዎት ኦፊሴላዊ ገጽየTwitter Bootstrap በ github ላይ። በTwitter Bootstrap ላይ ጣቢያ ለመፍጠር የሚያስፈልገንን የ css፣ js እና img ቅጥያ ያላቸው የፋይሎች ስብስብ ይዟል። የ"css" አቃፊ የቅጥ ሉሆችን (ምላሽ ለሚሰጥ እና ምላሽ የማይሰጥ ንድፍ) እንዲሁም ቀለል ያሉ ስሪቶችን ይዟል።

ለትንሽ ስሪቶችን ትጠቀማለህ ፈጣን ፍጥረትጣቢያ, ዲዛይኑ ቀድሞውኑ ሲጠናቀቅ እና ፕሮጀክቱ ለመጀመር ሲዘጋጅ. የ"js" አቃፊ የ bootstrap.js ፋይል እና የተቀነሰውን ስሪት ይዟል።

እነዚህ ጃቫስክሪፕት ፋይሎችየጣቢያችንን ዲዛይን ለማዘጋጀት የምንጠቀምባቸውን የተለያዩ የጃቫ ስክሪፕት ክፍሎችን ይዟል። የመጨረሻው አቃፊ "img" ሁለት የአዶዎችን ስብስብ ይዟል.

ሁለቱም ስብስቦች ከሞላ ጎደል ተመሳሳይ ናቸው, እና በውስጣቸው ያሉት ምስሎች በቀለም ብቻ ይለያያሉ. አዶዎቹን ለTwitter Bootstrap ፕሮጀክት በደግነት የለገሱት በ glyphicons ነው።

ስለዚህ ወደ ሥራ እንግባ። ከመጀመራችን በፊት የጽሑፍ አርታዒን ይክፈቱ እና የመጀመሪያውን ፋይል "index.html" ይፍጠሩ. አስቀምጥ ወደ የቤት አቃፊየእርስዎ ፕሮጀክት.

በ Bootstrap ውስጥ ለመስራት መሰረታዊ የኤችቲኤምኤል አብነቶች

የ Bootstrap መዋቅርን ለማግበር ሁሉንም ተዛማጅ ፋይሎችን ማካተት እና የኤችቲኤምኤል መዋቅር መፍጠር ያስፈልግዎታል። ግን በመጀመሪያ አወቃቀሩን እንፈጥራለን እና ከዚያ ምን አይነት ፋይሎች እንደሚያስፈልጉን እንመለከታለን. መጻፍ ያለብዎት የመጀመሪያው ነገር በኤችቲኤምኤል 5 በሚፈለገው መሠረት የሰነዱ ዓይነት መግለጫ ከላይ ነው፡

ኢንኮዲንግ ወደ UTF-8 አዘጋጅተናል ምክንያቱም በፕሮጀክታችን ውስጥ እንጠቀማለን ልዩ ቁምፊዎችእና አሳሹ በትክክል እንዲያውቅላቸው እንፈልጋለን። Twitter Bootstrap ለተሻለ ተኳኋኝነት UTF-8ን መጠቀምም ይመክራል።

ከዚያ በኋላ የተለመዱትን የኤችቲኤምኤል መለያዎችን ያዘጋጁ: እና . እነዚህ መሰረታዊ የኤችቲኤምኤል መለያዎች ናቸው። የእርስዎ index.html ገጽ ከታች ያለውን ምስል መምሰል አለበት።


አሁን በ bootstrap.css ፋይል ውስጥ ያሉትን አስፈላጊ ቅጦች ማካተት አለብን.

ቅጦች ሲገናኙ, እንገናኛለን አስፈላጊ ፋይሎችጃቫስክሪፕት በመጀመሪያ የ JQuery ፋይልን ማካተት አለቦት, ለዚህም ከታች እንደሚታየው ከ JQuery CDN እነሱን ለማገናኘት ሀሳብ አቀርባለሁ.

ከዚያም ቡትስትራፕን እናጨምራለን.

በድረ-ገጽዎ ላይ ለአፈጻጸም ምክንያቶች፣ እነዚህ ሁሉ ስክሪፕቶች ከመዘጋቱ በፊት ወዲያውኑ መቀመጥ አለባቸው።

አሁን ሁሉም አስፈላጊ ፋይሎች ተካትተዋል. የጣቢያዎን የተለያዩ ክፍሎች መፍጠር መጀመር ይችላሉ. የእርስዎ index.html ፋይል ይህን መምሰል አለበት።


ይህ እንዴት እንደሚሰራ

በመጀመሪያ፣ የTwitter Bootstrap በ 12 ፍርግርግ ላይ በእጅጉ እንደሚተማመን መረዳት አለብን። እነዚህ ምን ዓይነት ማሰሪያዎች ናቸው?

በindex.html ገጽዎ አካል ውስጥ ሁለት እኩል ክፍሎችን መፍጠር ይፈልጋሉ እንበል። ለእነዚህ ንጥረ ነገሮች ለእያንዳንዱ ብሎክ የ"span6" ክፍል መመደብ አለቦት። ይህ ማለት Bootstrap እያንዳንዳቸው ስድስት ፍርግርግ ያላቸው ሁለት እኩል ክፍሎችን መፍጠር አለባቸው ማለት ነው።

ይህ Bootstrap እንዴት እንደሚሰራ የተወሰነ ሀሳብ እንደሚሰጥዎት ተስፋ እናደርጋለን። ለእያንዳንዱ አካል አስቀድሞ የተመደቡ ክፍሎች ስብስብ አለው። አስፈላጊ ከሆነ ለእያንዳንዳቸው ተስማሚ ክፍሎችን መመደብ አለብዎት.

በ Bootstrap ኮድ ማድረግ

የማሳያ ገጹን በአምስት ዋና ዋና ክፍሎች እንከፋፍለው፡-

  • ርዕስ;
  • የገበያ ቦታ;
  • የግራ ጎን አሞሌ;
  • የይዘት አካባቢ;
  • ምድር ቤት

ሁሉንም የጣቢያችን ይዘቶች ለመጠቅለል፣ በስክሪኑ ላይ ያተኮረ እና እንዲሁም የተከበበ የመያዣ ክፍል እንፈጥራለን። የተለያዩ ጎኖችሌሎች ብሎኮች.

ለዚሁ ዓላማ, Bootstrap "ኮንቴይነር" የሚባል ልዩ ክፍል አለው. እንደ እናት ቅርፊት እንጠቀማለን. ስለዚህ ወደ ኮዶች መፃፍ እንሂድ፡-

አሁን በ DIV መያዣ ውስጥ, የጣቢያውን ርዕስ እንጽፋለን. ለዚህም የ h1 ርእስ መለያን እንጠቀማለን.

የማስነሻ ጣቢያ

ንጥረ ነገሮቹ በጥሩ ሁኔታ መቀመጡን ለማየት የእርስዎን index.html ገጽ በአሳሹ ውስጥ ያረጋግጡ። አሁን በአሰሳ አሞሌ ላይ ለመስራት ጊዜው አሁን ነው። Twitter Bootstrap የአሰሳ አሞሌ ምልክት ማድረጊያውን እንደሚከተለው ይገልፃል።

  • ቤት
  • ፕሮጀክቶች
  • አገልግሎቶች
  • ውርዶች
  • ስለ
  • ተገናኝ

"navbar" በዋናው ናቭባር DIV ውስጥ የተገለጸ ክፍል መሆን አለበት። ከTwitter Bootstrap ቅጦች ጋር ለማዛመድ ከላይ ያለውን የአሰሳ ምናሌ ምልክት ማድረጊያ መከተል አለቦት።

ይህን ኮድ ከ h1 መለያ በታች ትንሽ አስቀምጠው። ሁሉም ንጥረ ነገሮች በእኛ የወላጅ መጠቅለያ ክፍል ውስጥ መሆናቸውን ያረጋግጡ፣ ማለትም. "ኮንቴይነር" ገጹን በአሳሽ ውስጥ ይክፈቱ እና የአሰሳ ምናሌው በጥሩ ሁኔታ መቀመጡን ያረጋግጡ።

በግልጽ ለማየት እንደሚቻለው ርዕስዎ ከመደበኛው የተለየ እንዲሆን ይፈልጋሉ። በዚህ አጋዥ ስልጠና መጨረሻ ላይ እንዴት መጨመር እንዳለብን እንመለከታለን የራሱ ቅጦችየራስጌ ቦታውን እንደገና ለመንደፍ ወደ ነባር የቡትስትራፕ ቅጦች እና CSS ያክሉ። አሁን "የገበያ ቦታ" ብለን የጠራነውን ሁለተኛውን ክፍል ወደ መፍጠር እንሂድ.

ትዊተር ቡትስትራፕ በተለይ ለግብይት ጎራ አስቀድሞ የተመደበለት ክፍል አለው። እሱም "ጀግና-ክፍል" ይባላል. ከዚህ በታች ያለውን ኮድ ይቅዱ እና ከአሰሳ ምናሌው በታች ይለጥፉ።

የግብይት ዕቃዎች!

Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። ፉስሴ ዳፒበስ፣ ቴልኡስ አክ ኩርሰስ ኮሞዶ፣ ቶርቶር ሞሪስ ኮንዲሜንተም ኒብ፣ ዩት ፌርሜንቱም ማሳ ጆስቶ ሲት አሜት ሪሱስ።

እንጀምር

በአሳሹ ውስጥ ገጽዎን ያረጋግጡ ፣ እንደዚህ ያለ መምሰል አለበት-


ደህና ፣ ድንቅ አይደለም? አንድ ነጠላ የሲኤስኤስ ክፍል ሳይጽፉ ይህንን ያገኛሉ፡- ቆንጆ ብሎክየግብይት ቦታዎች. እሺ፣ ይህን ኮድ እንየው።

“hero-unit” ለ h1 መለያ የታሰበ CSS አለው። ስለዚህ፣ በ h1 መለያዎች ውስጥ የምትጽፈው ነገር ይወጣል በደማቅእና ከሌሎች የማገጃው ንጥረ ነገሮች በትንሹ ተለይተዋል። ከዚያ በመለያው በኩል የእኛ ማስታወቂያ ወይም የምርታችን መግለጫ የሚታይበት አንቀጽ መፍጠር አለብን።

እና አስደሳችው ክፍል ይኸውና፡ አገናኞች እና አዝራሮች። የ"btn" ክፍልን በማከል እና በመቀጠል መጠኑን በማስተካከል ማንኛውንም ማገናኛ ወደ አንድ አዝራር መስራት ትችላለህ እንደ btn-large/btn-small/btn-mini የመሳሰሉ ተጨማሪ ክፍሎችን በመጨመር።

የአዝራሮችን ቀለም ለመቀየር ክፍሎችን btn-ስኬት (አረንጓዴ)፣ btn-info (ሰማያዊ)፣ btn-ማስጠንቀቂያ (ቢጫ) እና btn-danger (ቀይ) ያክሉ። ስለ አዝራሮች እና የአገናኝ ስታይል ተጨማሪ መረጃ በCSS Base ክፍል ውስጥ ማግኘት ይችላሉ። እነዚህ ክፍሎች በኤችቲኤምኤል ቁልፍ ክፍሎች ላይ ሊተገበሩ ይችላሉ።

እስካሁን ድረስ ታሪኩ አስደሳች ሆኖ እንዳገኙት ተስፋ አደርጋለሁ። የTwitter Bootstrap በጣም ቀላል ስለሆነ ምንም እንኳን በሲኤስኤስ ቅጥ ሉሆች ውስጥ ምንም ነገር ማድረግ አያስፈልግዎትም። ስርዓቱ የሚያቀርባቸውን መሳሪያዎች በቀላሉ ይጠቀማሉ። Bootstrap በጣም ኃይለኛ ከሆኑ የCSS ማዕቀፎች አንዱ የሚያደርገው ይህ ነው።

አሁን ወደሚከተለው ክፍል እንሂድ፡ የግራ የጎን አሞሌ እና የይዘት ክፍል። አካባቢውን ወደ ሁለት እኩል ያልሆኑ ቀጥ ያሉ ክፍሎችን እንዴት እንደከፈልኩ እና ከእነዚህ ክፍሎች የበለጠ እንዴት እንደሚሠሩ ያያሉ። ቀደም ሲል እንደተገለፀው ትዊተር ቡትስትራፕ ባለ 12-ፍርግርግ ስርዓት ነው።

ይህንን ሁልጊዜ ማስታወስ አለብዎት. ይህ ማለት በማንኛውም የወላጅ አካል ውስጥ ቢበዛ 12 ቋሚ ፍርግርግ መፍጠር ይችላሉ።

በአሁኑ ጊዜ በወላጅ መጠቅለያ ክፍል "ኮንቴይነር" ውስጥ እየሰራን ነው። 12 ፍርግርግ በመጠቀም ወደ ሁለት እኩል ያልሆኑ ክፍሎች እንከፍላለን. ለግራ የጎን አሞሌ "span4" ክፍልን እንጠቀማለን, እና በቀኝ በኩል ለሚገኘው የይዘት ክፍል "span8" ክፍልን እንጠቀማለን.

የክፍል ስሞች ዋናውን ነገር ያንፀባርቃሉ፡ የግራ የጎን አሞሌ እስከ አራት ፍርግርግ ድረስ ይይዛል፣ እና በቀኝ በኩልበቀሪዎቹ ስምንት ፍርግርግ ላይ መሰራጨት አለበት.

ገጽዎ አሁን ይህን መምሰል አለበት፡-


ጎን ለጎን ሁለት የተለያዩ ዓምዶች ሊኖሩት ይገባል. አሁን በ "ረድፍ" ክፍል በኩል ከላይ የጨመርኩትን ተጨማሪ መጠቅለያ ለመፍጠር ማሰብ ጠቃሚ ነው. ምክንያቱ፣ በነባሪ፣ span * ክፍሎች በግራ የተሰለፉ ናቸው።

ሁለቱንም ዓምዶች ከሁሉም ይዘቶች በታች ለማስቀመጥ፣ "ረድፍ" ብሎክ አክለናል። እንደ መደበኛ መለያየት ይሠራል በጠረጴዛዎች ውስጥ. አሁን ከኮድዎ ላይ የአንቀጽ stub ክፍሎችን ማስወገድ አለብዎት።

ከዚያ የግራውን የጎን አሞሌ በአሰሳ ንጥሎች ዝርዝር ይሙሉ።

የአሰሳ ዝርዝሩ የሚከተለው ምልክት ሊኖረው ይገባል፡-

  • እኛ ምንድን ነን?
  • ቤት
  • የእኛ ደንበኞች
  • የእኛ አገልግሎቶች
  • ስለ እኛ
  • ያግኙን
  • ወዳጃችን
  • በጉግል መፈለግ
  • ያሁ!
  • ቢንግ
  • ማይክሮሶፍት
  • Gadgetic ዓለም

ከ"nav" ክፍል በተጨማሪ የአሰሳ ሜኑ ንጥሎችን የሚዘረዝር "nav-list" ክፍል ማከል አለቦት። የ"nav-header" ክፍልን ወደ ማንኛውም "li" የ"nav" ክፍል ካከሉ፣ የአገናኝ ክፍል ራስጌ ይመስላል። ወደ ፊት እንሂድ እና ገጻችን አሁን በአሳሹ ውስጥ እንዴት እንደሚታይ እንይ።

ወደ የይዘት ቦታው ስንሸጋገር፣ አጠቃላይ h3 መለያዎችን እና የአንቀጽ መለያዎችን በመጠቀም በቀላሉ እንሞላዋለን። ተጨማሪ ክፍሎችን እዚህ መጫን አያስፈልግም. ደግሞም ፣ የጽሑፍ አንቀጾች አንዱ ከሌላው በታች እንዲታዩ እንፈልጋለን። ከዚህ በታች በ"span8" ውስጥ ያስቀመጥኩት ኮድ አለ።

እንዴት ጀመርን?

Donec id elit non mi porta gravida እና eget metus። ፉስሴ ዳፒበስ፣ ቴልኡስ አክ ኩርሰስ ኮሞዶ፣ ቶርቶር ሞሪስ ኮንዲሜንተም ኒብ፣ ዩት ፌርሜንቱም ማሳ ጆስቶ ሲት አሜት ሪሱስ። Etiam porta sem malesuada magna mollis euismod. Donec ሴድ ኦዲዮ dui.

እንዴት ነው ገበያ የምናደርገው?

Donec id elit non mi porta gravida እና eget metus። ፉስሴ ዳፒበስ፣ ቴልኡስ አክ ኩርሰስ ኮሞዶ፣ ቶርቶር ሞሪስ ኮንዲሜንተም ኒብ፣ ዩት ፌርሜንቱም ማሳ ጆስቶ ሲት አሜት ሪሱስ። Etiam porta sem malesuada magna mollis euismod. Donec ሴድ ኦዲዮ dui.

Donec id elit non mi porta gravida እና eget metus። ፉስሴ ዳፒበስ፣ ቴልኡስ አክ ኩርሰስ ኮሞዶ፣ ቶርቶር ሞሪስ ኮንዲሜንተም ኒብ፣ ዩት ፌርሜንቱም ማሳ ጆስቶ ሲት አሜት ሪሱስ። Etiam porta sem malesuada magna mollis euismod. Donec ሴድ ኦዲዮ dui.

በአሳሽዎ ውስጥ ያለውን ገጽ ያድሱ እና ይህን መምሰል አለበት፡-


እንደሚመለከቱት, እኛ ቀድሞውኑ ወደ መጨረሻው ነጥብ በጣም ቀርበናል. እኛ ማድረግ ያለብን የገጹን ግርጌ ማጠናቀቅ ብቻ ነው።
ለግርጌው, እንደገና "ረድፉን" በሦስት ክፍሎች እንከፍላለን. በማሳያ ስሪት ላይ እንደሚታየው. በዚህ ጊዜ ቦታውን በሦስት እኩል ክፍሎችን እንከፍላለን, ማለትም "span4" እንጠቀማለን.

ይህ ሌላ “ረድፍ” ብሎክ ይፈጥራል፣ ከጎን አሞሌው እና ከይዘት አካባቢ ቀደም ብለን ከፈጠርነው “ረድፍ” በታች።

የሚከተለውን ኮድ ለራስዎ ይጻፉ።

ደንበኞቻችንን ያግኙ

Donec id elit non mi porta gravida እና eget metus። ፉስሴ ዳፒበስ፣ ቴልኡስ አክ ኩርሰስ ኮሞዶ፣ ቶርቶር ሞሪስ ኮንዲሜንተም ኒብ፣ ዩት ፌርሜንቱም ማሳ ጆስቶ ሲት አሜት ሪሱስ። Etiam porta sem malesuada magna mollis euismod. Donec ሴድ ኦዲዮ dui.

ደንበኞቻችን ሰራተኞቻችንን ያውቃሉ

Donec id elit non mi porta gravida እና eget metus። ፉስሴ ዳፒበስ፣ ቴልኡስ አክ ኩርሰስ ኮሞዶ፣ ቶርቶር ሞሪስ ኮንዲሜንተም ኒብ፣ ዩት ፌርሜንቱም ማሳ ጆስቶ ሲት አሜት ሪሱስ። Etiam porta sem malesuada magna mollis euismod. Donec ሴድ ኦዲዮ dui.

ሰራተኞቻችን ደርሰውናል።

Donec id elit non mi porta gravida እና eget metus። ፉስሴ ዳፒበስ፣ ቴልኡስ አክ ኩርሰስ ኮሞዶ፣ ቶርቶር ሞሪስ ኮንዲሜንተም ኒብ፣ ዩት ፌርሜንቱም ማሳ ጆስቶ ሲት አሜት ሪሱስ። Etiam porta sem malesuada magna mollis euismod. Donec ሴድ ኦዲዮ dui.

ያግኙን

ቀላል በቂ! መስመሩን በ "span4" ክፍል በመጠቀም በሶስት እኩል ክፍሎችን እንከፍላለን, እና እያንዳንዱን ክፍል በ h4 tags, paragraph tags እና አዝራሮች የሚመስሉ ሊንኮችን እንሞላለን. በአሳሽዎ ውስጥ ያገኘነውን ያረጋግጡ።

በአዝራሮቹ ውስጥ ትንሽ የደንበኞች እና የሰራተኞች ምስሎች ሊኖሩዎት ይገባል። መለያውን ይጠቀሙ እንደ አዶ-ተጠቃሚ፣ አዶ-ኮከብ፣ አዶ-መስታወት፣ ወዘተ ያሉ ተገቢውን የምስል ክፍሎችን ለመጨመር።

አዶዎችን ነጭ ለማድረግ፣ አዶ-ነጭ ክፍልን ከአዶ-ተጠቃሚ እና ከአዶ-ኮከብ ክፍሎች ጋር ይጠቀሙ። ሙሉ የአዶ ክፍሎች ዝርዝር በ ላይ ይገኛል። የማስነሻ ሰነድ, እዚህ የሚገኘው.

የገጹን ግርጌ ከይዘቱ ቦታ በትንሹ ለመለየት በ"ረድፍ" ብሎኮች መካከል መለያ እንጨምራለን ። መለያውን ከጨመርን በኋላ ያገኘነውን እንይ።

አሁን ሙሉ ለሙሉ ቀላል, ግን በጣም ሊቀርብ የሚችል ፈጠርን ማረፊያ ገጽ. እና በተመሳሳይ ጊዜ የTwitter Bootstrap ማዕቀፍ መሳሪያዎችን ብቻ እንጠቀም ነበር።

ብጁ ቅጦችን ወደ Twitter Bootstrap ማከል

ስለ CSS የተወሰነ እውቀት ካሎት እና ነባሪውን የTwitter Bootstrap ቅጦችን መቀየር ከፈለጉ ምርጡ አማራጭ የራስዎን የቅጥ ሉህ መፍጠር፣ የቡትስትራፕ ቅጦችን ማስመጣት እና ከዚያ በእርስዎ ውስጥ እንደገና መፃፍ ነው። የራሱ ፋይል CSS አገናኙ ወደ የእርስዎ ቅጦች እንጂ የቡትስትራክ ሲኤስኤስ ፋይሎች አለመሆኑን ያረጋግጡ።

ነባሪው የTwitter Bootstrap ቅጦች ለእርስዎ በቂ ከሆኑ፣ በግልጽ የቅጥ ሉህ መፍጠር አያስፈልግም። ነገር ግን ብዙ ድረ-ገጾች ተመሳሳይ ማዕቀፍ ስለሚጠቀሙ እነዚህ ቅጦች የተለመዱ ይሆናሉ እና በ Bootstrap የተገነቡ ሌሎች ብዙ ድህረ ገጾች ላይ ሊታዩ ይችላሉ. ስለዚህ፣ በTwitter Bootstrap CSS ላይ የራስዎን ቅጦች ቢያክሉ የተሻለ ይሆናል።

@import url ("bootstrap.min.css");

የTwitter Bootstrap የደመቁ ነገሮች ጥቂት ተጨማሪ ጠቃሚ አካላት

በረዥም ሰነድ አካል ውስጥ ያሉትን አንዳንድ ቁርጥራጮች ለማጉላት "እርሳስ" የሚለውን ክፍል ለእነሱ ማከል ይችላሉ። ይህ የዚያ የተወሰነ አንቀፅ ቅርጸ-ቁምፊዎች ከተቀረው ሰነድ በትንሹ እንዲበልጡ ያደርጋል።

የምርጫ መለያዎች

እንዲሁም በገጽዎ ላይ እንደ እና የመሳሰሉ መሰረታዊ የኤችቲኤምኤል ማድመቂያ መለያዎችን መጠቀም ይችላሉ። እንዲሁም መለያዎችን እና መጠቀም ይችላሉ .

የጽሑፍ አሰላለፍ

በማንኛውም የአንቀጽ ወይም የዲቪ ብሎክ ውስጥ የጽሑፍ አሰላለፍ ክፍሎችን በመጠቀም ሊዋቀር ይችላል፡- “ጽሑፍ-ግራ”፣ “ጽሑፍ-ማዕከል” እና “ጽሑፍ-ቀኝ”።

የጽሑፍ ቀለም

እንደ "ድምጸ-ከል የተደረገ" - ግራጫ ፣ "የጽሑፍ ማስጠንቀቂያ" - ቀይ ፣ "ጽሑፍ-ስህተት" - ማሮን ፣ "ጽሑፍ-መረጃ" - ሰማያዊ ሰማያዊ እና "ጽሑፍ ስኬት" - አረንጓዴ.

የጠረጴዛ ቅጦች

Twitter Bootstrap በነባሪነት የሰንጠረዥ አቀማመጥን ይደግፋል። የሚከተለው ኮድ ለዚህ ጥቅም ላይ ይውላል:

…..

ምስሎች ጋር መስራት

በመደበኛ መለያ በመጠቀም ምስሎችን ማከል ይችላሉ። . ዲዛይኖችዎ የበለጠ ሳቢ እንዲሆኑ፣ ክብ ​​ማዕዘን ላላቸው ምስሎች “img-rounded”፣ “img-circle” ምስሎችን ለማሸብለል እና “img-polaroid” በምስሉ ዙሪያ ዙሪያ ጥላ እና ድንበር ለመፍጠር ክፍሎችን ማከል ይችላሉ። .

ተቆልቋይ ምናሌዎች

ተቆልቋይ ሜኑ ወደ ነባር የአሰሳ አሞሌ ለማከል (በማሳያ ገጹ ላይ እንደሚታየው) በ "li" ኤለመንት ውስጥ የሚከተለውን ምልክት ማከል ያስፈልግዎታል።

  • ውረድ
    • ንጥል 1
    • ንጥል 2
    • ንጥል 3

    • ተቆልቋይ ዝርዝር ለመፍጠር የወላጅ ኤለመንቱን "ተቆልቋይ" ክፍልን ተጠቅመህ ለማስገባት "a" markupን መጠቀም አለብህ። ከዚያ የዝርዝር ንጥሉን በዚህ አካል ውስጥ ያስቀምጡት.

    የTwitter Bootstrapን የመጠቀም መሰረታዊ መርሆችን እና በስርዓቱ እንዴት መጀመር እንደሚችሉ አሳየሁዎት። አሁን እንዴት እንደሚሰራ ታውቃለህ, ከዋናው ሰነድ ውስጥ የማዕቀፍ ክፍሎችን ገለፃ መስራት ቀላል ይሆንልሃል ብዬ ተስፋ አደርጋለሁ.

    አንዴ ካጠኑት, ለእራስዎ ብዙ አዳዲስ መተግበሪያዎችን እንደሚያገኙ እርግጠኛ ነዎት.

    በሚቀጥለው ጽሁፍ ትዊተር ቡትስትራፕን በመጠቀም ምላሽ ሰጪ ድር ጣቢያዎችን ስለመፍጠር እነግራችኋለሁ።

    "የTwitter Bootstrap Tutorial - ውስብስብ ንድፎችን አያያዝ" የሚለውን መጣጥፍ ትርጉም የተዘጋጀው በወዳጅ የፕሮጀክት ቡድን ነው።

    ጥሩ መጥፎ

    የሲኤስኤስ ማዕቀፎችን የመጠቀም ጥቅሙ የአቀማመጥ ዲዛይነር ስለ ማዕቀፎች ፈጣሪዎች አስቀድመው ያሰቧቸውን ብዙ የአቀማመጥ ልዩነቶች ማሰብ አያስፈልገውም። እንደዚህ ያሉ ጥቃቅን ነገሮች የአሳሽ ተኳኋኝነትን፣ ለተለያዩ የስክሪን ጥራቶች ድጋፍ እና ሌሎችንም ያካትታሉ። የአቀማመጥ ዲዛይነር ምን, እንዴት እና መቼ እንደሚታይ ብቻ ይጠቁማል, የተቀረው በማዕቀፉ በራሱ ይከናወናል. ይህ አካሄድ የድር ጣቢያ አቀማመጥን በእጅጉ ሊያፋጥን ይችላል። የ Bootstrap ጥቅሞች ታዋቂነቱን ያካትታሉ. ይህ ማለት ለሌላ ኮድ ዲዛይነር ኮድዎን ለመጠበቅ ቀላል ይሆናል ማለት ነው።

    ማዕቀፎችን የመጠቀም ጉዳቱ ገጹ ትንሽ ክፍል ብቻ ቢጠቀምም ሙሉውን የማዕቀፍ ተጨማሪ ቅጦች መሸከም ይኖርበታል። ማዕቀፉ ለፕሮቶታይፕ እና እንደ የአስተዳዳሪ ገፆች ያሉ ዲዛይን ሁለተኛ ደረጃ የሆኑ ገጾችን ለመፍጠር በጣም ጥሩ መሣሪያ ነው። በጣም የተለየ ንድፍ ካሎት, ከዚያም ማዕቀፍ በመጠቀም መዘርጋት ቤተኛ መሳሪያዎችን ከመጠቀም የበለጠ ከባድ ሊሆን ይችላል. ሆኖም, ይህ ደግሞ ይቻላል.

    Bootstrapን ስለመጠቀም በአሁኑ ጊዜ ከ Bootstrap ቅጦች ጋር ለመስራት ብዙ መንገዶች አሉ ለጀማሪዎች ፣ ቡትስትራፕ ራሱ የሚከተለውን አካሄድ ይመክራል-የተጠናቀረ Bootstrapን ከጣቢያው ማውረድ እና ምንም ሳይቀይሩ በፕሮጀክትዎ ውስጥ ማስቀመጥ ያስፈልግዎታል። ከዚያ የራስዎን ባዶ የ CSS ፋይል መፍጠር እና ከ bootstrap.css በኋላ ማካተት ያስፈልግዎታል።


    ከዚያ በኋላ፣ የBootstrap ቅጦችን ለመቀየር በእርስዎ styles.css ውስጥ እንደዚህ ያለ ነገር መለወጥ ያስፈልግዎታል።

    ሀ ( ቀለም: #beceda;)
    ግልጽ የሆነ ኪሳራ ይህ አቀራረብማቋረጥ የሚፈልጓቸውን አስፈላጊ ቅጦች እራስዎ መፈለግ አለብዎት እና ይህ ሁልጊዜ ቀላል አይሆንም ፣ ምክንያቱም አንዳንድ የቡትስትራፕ አማራጮች በተሻሻለ መልኩ ለብዙ መራጮች ተፈጻሚ ይሆናሉ፣ ለምሳሌ በቀመር። የማበጀት መሣሪያ እዚህ አንዳንድ እገዛ ሊሆን ይችላል፣ ለውጦችዎን በትክክል ለማጠናቀር ይረዳል፣ ግን አንድ ጊዜ ብቻ። ለወደፊቱ አንዳንድ ግቤቶችን ለመለወጥ ከፈለጉ ፣ የእርስዎን ቅጦች ለማጠናቀር ለሁሉም መስኮች የተቀየሩትን እሴቶች እንደገና ማስገባት አለብዎት።

    ያነሰ መጠቀም ይህ ዘዴ ሁሉም የቡትስትራፕ ተለዋዋጮች ባነሰ ፋይሎች ውስጥ እንደሚቀመጡ ያስባል። ገንቢው ከነዚህ ተለዋዋጮች ጋር ይሰራል እና አስፈላጊ ከሆነም በእጅ ወይም በራስ ሰር ወደ CSS ፋይሎች ያጠናቅራል እና ኤችቲኤምኤል እራሱ የተሰባሰቡትን የ CSS ፋይሎችን ብቻ ያካትታል። በአንቀጹ ውስጥ በጣም ተለዋዋጭ ሆኖ የሚወሰደው ይህ አማራጭ ነው.

    አለ። ትልቅ ቁጥር LESS ፋይሎችን የማጠናቀር መንገዶች እና Bootstrap ይህንን በገንቢው ውሳኔ ላይ ይተወዋል። ቡትስትራፕ ራሱ Gruntን ለማጠናቀር ይጠቀማል፣ ለJetBrains ምርቶች ፕለጊን ሊመርጡ ይችላሉ፣ እና እኛ ጽሑፉ ለጀማሪዎች ያነጣጠረ ስለሆነ ቀለል ያሉ መፍትሄዎችን እንመለከታለን። እንደዚህ ያሉ መፍትሄዎች WinLess ለዊንዶውስ፣ SimpLESS ለ Mac ወይም Koala ለሊኑክስ ናቸው። እነዚህ ሁሉ ፕሮግራሞች በግምት ተመሳሳይ ነገር ያደርጋሉ፡ እንደ ግብአት ከ LESS ፋይሎች ጋር ማህደር ይቀበላሉ እና ለውጦችን ያዳምጡ። በማንኛውም ፋይል ላይ ለውጦችን እንዳደረጉ ወዲያውኑ ይዘጋጃል። የተገለጸው CSSፋይል. በዚህ መንገድ ከእያንዳንዱ ለውጥ በኋላ በእጅ ማጠናቀር አያስፈልግዎትም። LESS ፋይልን ቀይረህ አስቀምጠው እና ወዲያውኑ በተጠናቀረና በተጨመቀ ቅጽ በጣቢያው ላይ ያሉትን ለውጦች ተመልከት።

    ፕሮጀክት መፍጠር የመጀመሪያው እርምጃ ለፕሮጀክታችን ቀላል የፋይል መዋቅር መፍጠር ነው።
    ቅድመ ምርመራ የፋይል አወቃቀሩን ከፈጠሩ በኋላ የ psd ፋይልን በ Photoshop ውስጥ ይክፈቱ። አብነቱን በጥንቃቄ መመርመር እና መገምገም አስፈላጊ ነው. የሚከተሉትን ነገሮች መረዳት አለብን።
    • ምስሎቹ እንዴት እንደሚቆረጡ?
    • ምን ክፍሎች ጥቅም ላይ ይውላሉ?
    • ዋናዎቹ ቅጦች ምን ይሆናሉ?
    • የትኛውን ገጽ አቀማመጥ እናገኛለን?
    እነዚህን ጥያቄዎች በአእምሮ ከመለሱ በኋላ ብቻ ወደ አቀማመጥ መቀጠል ይችላሉ። እነዚህን ጥያቄዎች በቅደም ተከተል እንመልከታቸው አጠቃላይ ምስሎች በዚህ ደረጃ መቁረጥ እና ማስቀመጥ ብቻ ያስፈልግዎታል አጠቃላይ ምስሎች, ይህም በጣቢያው በሁሉም ገጾች ላይ ይሆናል እና ከይዘቱ ጋር የማይዛመድ. በእኛ ሁኔታ፣ ይህ ቀለል ያለ ግራጫ ገጽ ዳራ፣ የራስጌ ጀርባ፣ የካርታ ምስል፣ ሁለት አርማዎች እና የማህበራዊ ሚዲያ አዝራሮች ይሆናል።

    የካርታውን ምስል ያስቀምጡ፡-

    አርማዎቹን እንደሚከተለው እናስቀምጥ።

    ምስሎች/logo.png
    ምስሎች/ግርጌ-ሎጎ.png

    ተደጋጋሚ የጀርባ ምስሎችለመመስረት በቂ በሆነ በትንሹ ቁራጭ መቁረጥ አለበት። ሙሉ ምስልበአቀባዊ እና በአግድም መደጋገም.

    /ምስሎች/bg.png
    /ምስሎች/h1-bg.png

    ተመሳሳይ መጠን ያላቸውን የማህበራዊ አውታረ መረብ አዶዎችን ወደ አንድ ፋይል ለማስቀመጥ እና ለፈጣን ጭነት እንደ sprites ለመጠቀም ምቹ ነው። ምስሎችን ስለማጣበቅ ተጨማሪ ዝርዝሮች በመጀመሪያው ክፍል ውስጥ ተገልጸዋል. ውጤቱ ሁለት ፋይሎች ይሆናል:

    /ምስሎች/social.png
    /images/social-small.png

    አካላት ቡትስትራፕን በመጠቀም አቀማመጥ እና አቀማመጥ መካከል ያለው ዋና ልዩነት ቡትስትራፕ የአካል ክፍሎችን ጽንሰ-ሀሳብ ማስተዋወቅ ነው። ክፍሎች በተደጋጋሚ ጥቅም ላይ የሚውሉት ዝግጁ የሆኑ የኤችቲኤምኤል ብሎኮች አስቀድሞ ከተገለጹ ቅጦች ጋር ነው። አንዳንድ ጊዜ አካላት ጃቫስክሪፕት ይጠቀማሉ። የአቀማመጥ ንድፍ አውጪው ዝግጁ የሆነ አካል መጠቀም ወይም ለእሱ የራሱን ገጽታ ሊገልጽ ይችላል. ይህንን ለማድረግ ብዙውን ጊዜ በ Bootstrap ውስጥ የተለዋዋጮችን ዋጋ መለወጥ ብቻ ያስፈልግዎታል። የበለጠ ተለዋዋጭ ለውጦች ካስፈለገ፣ የአቀማመጥ ዲዛይነር ሁልጊዜ ኤችቲኤምኤል እና ሲኤስኤስን በእሱ ውሳኔ ሊለውጥ ይችላል።

    የእኛን አብነት ከተመለከቱ, የሚከተሉትን ክፍሎች እንደሚያስፈልጉን ማየት ይችላሉ:

  • ከአምዶች ጋር አቀማመጥ - የፍርግርግ ስርዓት (ረድፍ ፣ ኮል)
  • ለፍለጋ - የውስጠ-መስመር ቅጽ (ፎርም-ውስጥ መስመር)፣ የተሰባሰቡ ቁጥጥሮች (ግቤት-ቡድን)፣ አዝራር (ቢቲኤን)
  • ለአሰሳ - የአሰሳ አሞሌ(navbar) እና አሰሳ ራሱ (ናቭ)
  • ንዑስ ምናሌዎችን ለማሳየት - የተቧደኑ ዝርዝር (ዝርዝር-ቡድን)
  • ለካርታው እገዳ - የእይታ ፓነል (ፓነል)
  • ትልቅ ለማሳየት ማዕከላዊ እገዳ- jumbotron
  • የፎቶ ፍሬሞችን ለማሳየት - ድንክዬዎች
    • እያንዳንዱን አካል በአቀማመጥ ውስጥ ሲያጋጥመን በበለጠ ዝርዝር እንመለከታለን መሰረታዊ ቅጦች በ Bootstrap ውስጥ ሁሉም ነባሪ ቅጦች አስቀድመው ተዘጋጅተዋል, ከንድፍ ዲዛይን የሚለያዩ ከሆነ ብቻ ማበጀት አለብን. ይህንን በፋይል src/less/variables.css ውስጥ እናድርገው።

    በመጀመሪያ ደረጃ, ለወደፊቱ ሊጠቀሙባቸው ስለሚችሉ በ Bootstrap ቅንብሮች ውስጥ የሌሉ ተለዋዋጮችን ማከል ያስፈልግዎታል. ለእኛ ይህ የተወሰነ የንድፍ ቅርጸ-ቁምፊ ብቻ ነው።

    @brand-font: "Oswald",sans-serif;
    ለሩሲያ ጣቢያዎች አብነት ለመጠቀም ከፈለጉ የኦስዋልድ ቅርጸ-ቁምፊን ሲሪሊክን በሚደግፈው ቅርብ በሆነው Cuprum ለመተካት መሞከር ይችላሉ።

    አሁን የ Bootstrap ቅንብሮችን በራሳችን እንተካው፡-

    አሁን ከተለዋዋጮች ጋር እንደጨረስን, የእኛን ንድፍ በ styles.less ፋይል ውስጥ ማስጌጥ እንጀምር. በመጀመሪያ፣ ቡትስትራፕን እራሱን እና ተለዋዋጮቻችንን እናገናኝ፡-

    @import "bootstrap/bootstrap.less"; @import "variables.less";
    ሁሉም የ Bootstrap ነባሪ ቅጦች ተለዋዋጮችን በመጠቀም ሊለወጡ አይችሉም፣ ስለዚህ በእጅ እናድርገው፡-

    P (ህዳግ፡ 20 ፒክስል 0፤) .ቅርጽ-ቁጥጥር (ሣጥን-ጥላ፡ የለም፤) .btn ( ፎንት-ቤተሰብ፡ @brand-font;)
    እዚህ ጥላውን ከቅጽ አካላት ውስጥ አስወግደናል, እና በአዝራሮቹ ውስጥ ለጽሑፉ የተወሰነውን የገጽ ቅርጸ-ቁምፊ ገለጽን.

    ከዚያ የገጹን ዳራ እና የላይኛውን አሞሌ እንገልፃለን-

    አካል (የድንበር-ከላይ፡ 5 ፒክስል ጠንካራ #7e7e7e፤ የበስተጀርባ ምስል፡ url(../images/bg.png);)
    በጽሁፉ ውስጥ ተጨማሪ ቅጦች በየትኛው ፋይል ውስጥ እንደተፃፉ አይገለጽም. ሁሉንም ተለዋዋጮች በፋይል variables.less ውስጥ እንደምናስቀምጠው እና የCSS ቅጦች በ styles.less ውስጥ እንደሚቀመጡ ያስታውሱ።

    የኤችቲኤምኤል ማዕቀፍ የድረ-ገጹን አቀማመጥ በተለምዶ በኤችቲኤምኤል ማዕቀፍ እንጀምራለን ። ከዚህ ቀደም ሁሉንም አላስፈላጊ ነገሮችን ካስወገድን በኋላ የቀላልውን አብነት ኮድ ከመጀመሪያው ገጽ ወደ index.html ፋይል እንለጥፋለን።

    ነጭ ካሬ
    ይህ እገዳ HTML5 ሰነድ መዋቅር ይፈጥራል። በርዕሱ ውስጥ የገጻችንን ስም - ነጭ ካሬ. በእይታ ሜታ መለያ የገጹ ስፋት መሆኑን እንጠቁማለን። ተንቀሳቃሽ መሳሪያዎችመጥረቢያ ከማያ ገጹ ስፋት ጋር እኩል ይሆናል እና የመነሻ መለኪያው 100% ይሆናል. ከዚያ የቅጦች ፋይል ተካትቷል. እና ለሥሪቶች ኢንተርኔት ኤክስፕሎረርከዘጠኝ ያነሰ, የእኛን አቀማመጥ በትክክል ለማሳየት የሚያስችሉን ስክሪፕቶችን እናገናኛለን.

    አቀማመጥ በዚህ ሁኔታ, ጣቢያው ሁለት ክፍሎችን ያቀፈ መሆኑን እናያለን-ይዘት ያለው ዋናው መያዣ, በስክሪኑ ላይ ያተኮረ እና የተዘረጋው እግር. ዋናው መያዣው ሁለት ዓምዶችን ያካትታል-ዋና ይዘት እና የጎን አሞሌ. ከነሱ በላይ ራስጌ፣ አሰሳ (nav) እና የገጽ ርዕስ (. ርዕስ) አለ።

    የሚከተለውን ኮድ ወደ ሰውነት እንጨምር፡-


    እዚህ የመጀመሪያውን የ Bootstrap አካል - አምዶችን እናገኛለን. የአምዶች ወላጅ አካል ክፍል "ረድፍ" ተሰጥቷል, እና የአምድ ክፍሎች በቅድመ ቅጥያ "col-" ይጀምራሉ, ከዚያም የስክሪኑ መጠን (xs, sm, md, lg) እና በአምዱ አንጻራዊ ስፋት ያበቃል. .

    አንድ አምድ በተመሳሳይ ጊዜ የተለያዩ ክፍሎች ለስክሪኖች እሴቶች ሊመደብ ይችላል ፣ ለምሳሌ class="col-xs-12 col-md-8"። እነዚህ ክፍሎች በቀላሉ የአምዱን ስፋት ለአንድ የተወሰነ ስክሪን መጠን እንደ መቶኛ ያዘጋጃሉ። ዓምዱ የተወሰነ የስክሪን ክፍል ካልተሰጠ፣ ለዝቅተኛው የተወሰነ ስክሪን ያለው ክፍል ይተገበራል፣ ካልተገለጸ ደግሞ ወርድ አይተገበርም እና እገዳው የሚቻለውን ከፍተኛውን ስፋት ይይዛል።

    ክፍሎቻችን "col-md-7" እና "col-md-17" እንደሚያመለክቱት እገዳዎቹ ከወላጅ መያዣው አንጻር የ 7 እና 17 ስፋት ያላቸው አምዶች ናቸው. በነባሪ፣ በ Bootstrap ውስጥ ያሉት የአምድ ስፋቶች ድምር 12 ነው፣ ነገር ግን የምንፈልገውን ተለዋዋጭነት ለማግኘት ይህንን ቁጥር በእጥፍ ጨምረናል።

    አካል (… .መጠቅለያ ( padding: 0 0 50px 0;) header ( padding: 20px 0; ))
    ይህንን መዋቅር በሰውነት ውስጥ አስቀመጥን. የሌኤስኤስ አገባብ እርስ በእርሳችሁ ውስጥ ህጎችን እንድታስቀምጡ ይፈቅድልሃል፣ እነዚህም ወደሚከተሉት ግንባታዎች ይጣመራሉ።

    የሰውነት መጠቅለያ (…) የሰውነት ራስጌ (…)
    ይህ አቀራረብ እንዲመለከቱ ያስችልዎታል HTML መዋቅርልክ በሲኤስኤስ ውስጥ እና ለህጎቹ የተወሰነ “ወሰን” ይሰጣል።

    አርማ

    አርማውን ወደ ራስጌ መለያ አስገባ፡-

    ምንም ተጨማሪ ቅጦች አያስፈልግም።

    ፈልግ

    ፍለጋን ለመፍጠር የሚከተሉትን የ Bootstrap ክፍሎች ያስፈልጉናል-የመስመር ውስጥ ቅጽ ፣ የተሰበሰቡ ቁጥጥሮች እና ቁልፍ።
    በርዕስ መለያው ውስጥ በቀኝ በኩል የተስተካከለ የውስጠ-መስመር ቅጽ እንፈጥራለን። የእንደዚህ ዓይነቱ ቅጽ መስኮች "የቅጽ መቆጣጠሪያ" ክፍል እና መለያ ሊኖራቸው ይገባል.

    "የቡድን መቆጣጠሪያዎች" ክፍሉን በቅጹ ውስጥ እናስቀምጣለን. የመቧደን መቆጣጠሪያዎች በጽሑፍ ግቤት እና በአዝራሩ መካከል ያለውን ቦታ እንዲያስወግዱ እና ልክ እንደ አንድ አካል እንዲዋሃዱ ያስችልዎታል።
    ከ "ግቤት-ቡድን" ክፍል እና መስኮች ጋር ዲቪ ነው, እና የእንደዚህ አይነት አካል አዝራር ከ "ግቤት-ቡድን-ቢቲኤን" ክፍል ጋር በብሎክ ውስጥ ይቀመጣል.

    ለፍለጋ መስኩ መለያውን ማሳየት ስለማንፈልግ በ "sr-only" ክፍል እንደብቀዋለን. ይህ ለወሰኑ ስክሪን አንባቢዎች ያስፈልጋል።

    የ "btn-primary" ክፍል ወደ አዝራሩ ተጨምሯል, ይህ ማለት የዚህ ቅጽ ዋና ቁልፍ ነው.

    …GO ን ፈልግ
    የቀረን ሁሉ የፍለጋ ቅጹን ወርድ በቅጦች ማዘጋጀት ነው።

    አካል ( … .መጠቅለያ ( … አርዕስት ( … .ቅጽ ፍለጋ ( ስፋት፡ 200 ፒክስል፤ ) )))

    ምናሌ

    ምናሌውን ለማሳየት "የአሰሳ ፓነል" ክፍሉን ይውሰዱ እና በውስጡም "አሰሳ" ክፍልን ያስቀምጡ, እሱም አገናኞች ያሉት ዝርዝር ነው. ለአሰሳ፣ ክፍል "navbar-nav" ታክሏል፣ ይህም በ navbar ውስጥ ልዩ የአሰሳ ቅጦችን ይተገበራል።


    ይህንን ሜኑ ወደ ዲዛይናችን ለማምጣት፣ እናዘጋጅ የሚከተሉት እሴቶችተለዋዋጮች

    /*navbar ቁመት*/ @navbar-ቁመት: 37px; /*ተጨማሪ አግድም ንጣፍ አዘጋጅ*/ @nav-link-padding: 10px 30px; /*ለሜኑ ንጥሎች ዳራ*/ @navbar-default-bg: @panel-bg; /*በምናሌ ንጥሎች ውስጥ የጽሑፍ ቀለም*/ @navbar-default-link-color: # b2b2b2; /* እና መዳፊቱን ሲያንዣብቡ - ተመሳሳይ*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*የገቢር ሜኑ ንጥል ዳራ የእኛ ልዩ ሰማያዊ ቀለም ነው*/ @navbar-default-link-active-bg: @brand-primary; /*የገቢር ሜኑ ንጥሉ የጽሑፍ ቀለም*/ @navbar-default-link-active-color፡ #fff;
    ሊበጁ ከሚችሉ መለኪያዎች በተጨማሪ ተጨማሪዎችን በቅጦች እንገልጻለን - ይህ አቢይ ሆሄ እና የእኛ ልዩ ቅርጸ-ቁምፊ ነው-

    አካል (… .መጠቅለያ ( … .navbar a (ጽሑፍ-ትራንስፎርም፡ አቢይ ሆሄ፤ ቅርጸ-ቁምፊ፡ 14px @brand-font;) ))

    የገጽ ርዕስ

    የገጹ ርዕስ ከ"ርዕስ" ክፍል ጋር በዲቪ ውስጥ ተቀምጧል።

    ስለ እኛ
    እና የሚከተሉት ቅጦች አሉት:

    አካል (… .መጠቅለያ (… ቀለም: # 7e7e7e; ቅርጸ ቁምፊ: መደበኛ 40 ፒክስል / 40 ፒክስል "Oswald", sans-serif; ዳራ: url (../images/bg.png);
    እዚህ በዲቪው ላይ እንደ ዳራ ግራጫ ቀለም እናስገባለን እና በውስጡም h1 ን ከተፈለገው ቅርጸ-ቁምፊ እና የገጽ ቀለም ዳራ ጋር እናስገባለን ለ h1 ግልፅ ዳራ።

    ንዑስ ምናሌ

    ንዑስ ምናሌን ስንፈጥር “የአሰሳ” ክፍልን አንጠቀምም ፣ ምክንያቱም በቅጡ ለእኛ በጣም ተስማሚ ስላልሆነ ፣ “የተሰበሰበ ዝርዝር” ክፍል ለእኛ በጣም ተስማሚ ነው። የእንደዚህ አይነት አካል እያንዳንዱ አካል ክፍል "ዝርዝር-ቡድን-ንጥል" አለው.

    ንዑስ ምናሌው በጎን መለያ ውስጥ መቀመጥ አለበት። ከዋናው ምናሌ ጋር በተመሳሳይ መንገድ የአገናኞችን ዝርዝር እንፈጥራለን.


    በክፍሎች ቅንጅቶች ውስጥ ፣ ሁሉም የተቧደኑ ዝርዝሮች ከ “ፓነል” ክፍል ዳራ እና ፍሬም ጋር መታየት እንዳለባቸው እንጠቁማለን ።

    @ ዝርዝር-ቡድን-bg: @panel-bg; @ ዝርዝር-ቡድን-ድንበር: @ ፓናል-ውስጥ-ድንበር;
    እና የሚከተሉትን ቅጦች በንዑስ ምናሌው ላይ ይተግብሩ።

    አካል ( … .መጠቅለያ ( … .ንዑስ ሜኑ (ህዳግ-ከታች፡ 30 ፒክስል፤ li (ማሳያ፡ ዝርዝር-ንጥል፤ ቅርጸ-ቁምፊ፡ 300 14px @brand-font፤ የዝርዝር-ቅጥ-አቀማመጥ፡ ውስጥ፤ የዝርዝር-ስታይል ዓይነት፡ ካሬ፤ ንጣፍ) : 10 ፒክስል; የጽሑፍ ለውጥ: አቢይ ሆሄ; &. ገቢር (ቀለም: @brand-primary;) a (ቀለም: @text-color; ጽሑፍ-ማስጌጥ: ምንም; &: ማንዣበብ (ቀለም: @ጽሑፍ-ቀለም;) ) ))
    በመጀመሪያ ደረጃ, Bootstrap በራሱ ስለተካቸው መደበኛውን ቅጦች ወደ ዝርዝር አካላት እንመለሳለን. ከታች በኩል ንጣፍ ጨምር. ንዑስ ምናሌዎች ቀጫጭን ቅርጸ ቁምፊዎችን እና ካሬ ማርከሮችን ይጠቀማሉ። እና ለአገናኞች ቀለሞችን ፣ አቢይ ሆሄዎችን እናዘጋጃለን እና ከስር ስር ያሉትን እናስወግዳለን። በ"&.active" ኮድ ውስጥ ያለው አምፐርሳንድ በማጠናቀር ጊዜ በወላጅ መራጭ ይተካል፡ ".submenu li.active" የሚለውን አገባብ በመጠቀም።

    የጎን አሞሌ ይዘት ከንዑስ ሜኑ በተጨማሪ የጎን አሞሌው ይዘቱ ቢሮዎቹ የሚገኙበትን ምስልም ይዟል።

    እሱን ለማሳየት የ"ፓነል" አካልን እንጠቀማለን ፣ ወይም ይልቁንስ ልዩነቱን "ፓነል-ዋና" ርዕሱን ለማቅለም እንጠቀማለን። ይህ አካል የራስጌ ማገጃ (ፓነል-ርዕስ) እና የፓነል ይዘት ማገጃ (ፓነል-አካል) ይዟል። የ "img-responsive" ክፍልን ወደ ካርታው ምስል እንጨምራለን, ይህም የስክሪኑ ስፋት ትንሽ በሚሆንበት ጊዜ ምስሉ እንዲቀንስ ያስችለዋል.

    … ቢሮዎቻችን
    በ Bootstrap ተለዋዋጮች ውስጥ አስቀድመን ቀለሙን ለፓነሉ ጀርባ (ፓነል-ቢግ) አዘጋጅተናል እና አሁን የ"ዋና" ፓነል ነባሪ ሰማያዊ ሳይሆን ነባሪ የፓነሉ ግራጫ ድንበር እንደሚኖረው እንገልፃለን።

    @panel-primary-border: @panel-inner-border;
    አሁን በጣቢያው ቅጦች ውስጥ በተለዋዋጮች የማይለወጡ መደበኛውን የፓነል ቅንብሮችን መለወጥ ያስፈልግዎታል

    ፓነል (የሣጥን-ጥላ፡ የለም፤ ​​.ፓነል-ርዕስ (ቅርጸ-ቁምፊ፡ 14px @brand-font፣ text-transform: አቢይ ሆሄያት፤ ንጣፍ፡ 10 ፒክስል፤) .ፓነል-አካል ( padding: 10px;
    እዚህ ላይ ጥላውን ከፓነሎች ውስጥ አስወግደናል, የራሳችንን ውስጠቶች ጨምረን እና የራሳችንን አርዕስት አዘጋጀን.

    ጥቅስ ጥቅስ በማከል ይዘቱን መዘርጋት እንጀምር።

    ይህ ገጽ ከጃምቦትሮን አካል ጋር በጣም ተመሳሳይ ነው። ወደ ይዘቱ አምድ እንጨምር፡-

    "Quisque in enim velit፣ at dignissim est።" ኑላ ኡል ኮርፐር፣ ዶሎር አክ ፔለንቴስክ ፕላሴራት፣ justo tellus gravida erat፣ vel porttitor libero erat።

    ጆን ዶ, Lorem Ipsum
    ለጃምቦትሮን ክፍል ተለዋዋጮችን በመጠቀም የጽሑፍ ቀለሙን ወደ ነጭ እና ብራንድ ያለው ሰማያዊ ጀርባ እናዘጋጃለን፡

    @jumbotron-bg: @brand-primary; @jumbotron-ቀለም: #ffff;
    እና የእኛን ቅጦች እንግለጽ:

    አካል ( … .መጠቅለያ ( … .jumbotron ( ድንበር-ራዲየስ፡ 0፤ ፓዲንግ፡ 0፤ ህዳግ፡ 0፤ blockquote ( ድንበር-በግራ፡ የለም፤ ​​p ( ቅርጸ-ቁምፊ፡ 300 ሰያፍ 33 ፒክስል @brand-font፤ የጽሁፍ ለውጥ፡ አቢይ ሆሄ; ህዳግ-ታች፡ 0;) ትንሽ (ጽሑፍ-አሰላለፍ፡ ቀኝ፤ ቀለም፡ #1D8EA6፤ ቅርጸ-ቁምፊ፡ 300 20px @brand-font; &: before (ይዘት፡ ""; ) ) ))
    በእነሱ ውስጥ በነባሪ በ Bootstrap የተቀናበሩትን የማዕዘን ማዞሪያ ፣የክፍል ንጣፍ እና ማስጌጫዎችን እናስወግዳለን። ለቅርጸ-ቁምፊዎቻችን ቅጦችንም እንጨምራለን.

    ይዘት

    Lorem ipsum dolor ሲት አሜት…

    Donec vel nisl nibh…

    Donec vel nisl nibh…


    ቀጣዩ ደረጃ በይዘቱ ጽሁፍ መጨረሻ ላይ ያሉትን ሁለት ምስሎች ማከል ነው. ይህ በሁለት ዓምዶች በመጠቀም ይከናወናል-


    የ"ድንክዬ" ክፍል ምስሎችን ወደ "ድንክዬ" አካል ይለውጣል። ምስሎቹን የማስዋብ ስራውን ሁሉ ያደርግልናል። ለእኛ የቀረው ብቸኛው ነገር የእኛን ንጣፍ እና የድንበር ቀለም ለዚህ አካል በተለዋዋጭዎቹ ውስጥ ማቀናበር ነው፡

    @thumbnail-padding: 1 ፒክስል; @thumbnail-ድንበር፡ # c9c9c9;

    "ቡድናችን" አግድ

    ይህን ብሎክ በምንዘረጋበት ጊዜ፣ መጀመሪያ ርዕስ እንጨምር፡-

    የእኛ ቡድን
    ከስታይል ጋር፡

    አካል ( … .መጠቅለያ ( … h2 (ዳራ፡ የለም መድገም ጥቅልል ​​0 0 #29C5E6፤ ቀለም፡ #fff፤ ቅርጸ-ቁምፊ፡ 300 30 ፒክስል @brand-font፤ ንጣፍ፡ 0 10 ፒክስል፤ የጽሑፍ ለውጥ፡ አቢይ ሆሄ፤ ) ))
    እና ከዚያ ከ "ቡድን" ክፍል ጋር እገዳን እንጨምራለን, ይህም የሰራተኛ ካርዶችን የያዙ ሁለት መስመሮችን ያካትታል. እያንዳንዱ ካርድ አምድ ነው። ካርዱ ከግሪዳችን አራት አምዶች ጋር እኩል የሆነ ስፋት አለው። በመስመር ላይ ካለው የመጀመሪያው በስተቀር ሁሉም ካርዶች የግራ ገብ አላቸው፣ እሱም የተፈጠረው በ"col-md-offset-1" ክፍል ነው። የካርዱ ይዘት ምስል እና መግለጫ (. መግለጫ ጽሑፍ) ያካትታል

    ጆን ዶ ሳውንድራ ፒትስሊ

    የቡድን መሪ

    … ኤሪካ ኖብሪጋ

    የስነ ጥበብ ዳይሬክተር

    ኮዲ ሩሰል

    ከፍተኛ የዩአይ ዲዛይነር

    …
    ምልክት ማድረጊያውን ከፈጠርን በኋላ እነዚህን አካላት የሚከተሉትን ቅጦች እንስጥ፡

    አካል ( … .መጠቅለያ ( … .ቡድን ( .ረድፍ (ህዳግ-ከላይ፡ 20 ፒክስል፤ .col ( ነጭ-ቦታ፡ ኖራፕ፤ .thumbnail (ህዳግ-ታች፡ 5 ፒክስል፤))) .col-md-offset-1 (ህዳግ- ግራ፡ 3.7%፤ ))
    እዚህ ከተቀመጡት ኢንደንትስ እና የቅርጸ-ቁምፊ ቅጦች በተጨማሪ፣ የ"col-md-offset-1" ክፍል ቀይረናል። ገብውን ወደ 3.7% ማዘጋጀት ነበረበት ምክንያቱም... መደበኛ ገብ በጣም ትልቅ ነበር።

    ግርጌ አራት ትላልቅ ብሎኮችን ያቀፈ ነው-የቲዊተር ምግብ ፣ የጣቢያ ካርታ ፣ ማህበራዊ አገናኞችእና አርማ ከቅጂ መብት ጋር።

    በመጀመሪያ፣ ከእነዚህ ብሎኮች ጋር የእግረኛ መያዣ እንፍጠር፡-


    እና ንድፉን በእሱ ላይ ይተግብሩ-

    ግርጌ (ዳራ፡ #7e7e7e፤ ቀለም፡ #dbdbdb፤ የቅርጸ-ቁምፊ መጠን፡ 11 ፒክስል፤ .ኮንቴይነር (ቁመት፡ 110 ፒክስል፤ ንጣፍ፡ 10 ፒክስል 0፤))
    የግርጌ መለያው በጠቅላላው የስክሪኑ ስፋት ላይ ግራጫ ቦታን ይገልፃል፣ እና በውስጡ ያለው መያዣ በትልልቅ ስክሪኖች ላይ ያማከለ ቦታ ያሳያል እና የግርጌውን ቁመት እና ንጣፍ ይገልጻል። በግርጌው ውስጥ ያሉትን ብሎኮች ለማስተካከል ዓምዶችን እንጠቀማለን።

    የትዊተር ምግብ የTwitter ምግብን ይዘቶች አቀማመጥ፡-

    የትዊተር ምግብ ኦክቶበር 23

    በ ultricies pellentesque massa a porta. አሊኳም ኢፕሱም እኒም፣ ሄንድሪት ዩት ፖርታ ኔክ፣ ኡላምኮርፐር እና ኑላ። በ eget mi dui፣ amet selerisque nunc ይቀመጡ። አኔን ኦገስት


    ቅጦች፡

    አካል (... ግርጌ (... .ኮንቴይነር (... h3 (የድንበር-ታች፡ 1 ፒክስል ጠንካራ #919191፤ ቀለም፡ #ffffff፤ የቅርጸ-ቁምፊ መጠን፡ 14 ፒክስል፤ የመስመር-ቁመት፡ 21 ፒክስል፤ ቅርጸ-ቁምፊ-ቤተሰብ፡ @brand) - ቅርጸ-ቁምፊ; ህዳግ: 0 0 10 ፒክስል; የጽሑፍ ለውጥ: ትልቅ ፊደል; )))
    ለሁሉም የግርጌ ርእሶች፣ ቅርጸ-ቁምፊዎችን እና ውስጠ-ገብዎችን እናዘጋጃለን፣ እና እንዲሁም ከታች ፍሬም በኩል መስመር እንፈጥራለን። ለአንቀጾች፣ መግባቱን ያመልክቱ። ቀኑን ለሚያሳየው ማገናኛ፣ ቀለሙን አዘጋጅ እና አስምር።

    የጣቢያ ካርታው የጣቢያ ካርታው አገናኞች ያሏቸው ሁለት እኩል አምዶችን ያቀፈ ነው፡-

    የጣቢያ ካርታ ቤት ስለ አገልግሎቶች አጋሮች ድጋፍ ተገናኝ
    አገናኞችን ወደ ቀለም, ቅርጸ-ቁምፊ እና በመካከላቸው ያለውን ቦታ እናዘጋጃለን.

    አካል (... ግርጌ (... .ኮንቴይነር (... a ( ቀለም፡ #dbdbdb፤) .የጣቢያ ካርታ a (ማሳያ፡ ብሎክ፤ የቅርጸ-ቁምፊ መጠን፡ 12 ፒክስል፤ ህዳግ-ታች፡ 5 ፒክስል፤))))

    ማህበራዊ አገናኞች

    የአገናኞችን ስብስብ ከ "ማህበራዊ" ክፍል ጋር ወደ እገዳ ውስጥ እናስገባዋለን.

    ማህበራዊ አውታረ መረቦች
    እና ቅጥ እናድርጋቸው፡-

    አካል (… ግርጌ (… .ኮንቴይነር - ቀኝ: 10 ፒክስል; .social-icon-ትንሽ (ወርድ: 16 ፒክስል; ቁመት: 16 ፒክስል; ዳራ: url (../images/social-small.png) ምንም-መድገም; ማሳያ: መስመር ውስጥ-ብሎክ; ህዳግ: 5 ፒክስል 6 ፒክስል 0 0;) .twitter (ዳራ-አቀማመጥ: 0 0;) .facebook (ዳራ-ቦታ: -30 ፒክስል 0;) .google-plus (ዳራ-ቦታ: -60 ፒክስል 0;) .vimeo ( የጀርባ-ቦታ: 0 0; ) .youtube (ዳራ-አቀማመጥ፡ -16 ፒክስል 0፤) .flicker (የዳራ-ቦታ፡ -32ፒክስል 0፤) .ኢንስታግራም (ዳራ-ቦታ፡ -48 ፒክስል 0፤) .rss (ዳራ-ቦታ፡ -64px 0፤)) )))
    እዚህ የ sprite ቴክኒክን ተጠቀምን - አንድ የምስል ፋይል ለተለያዩ ስዕሎች ጥቅም ላይ ሲውል. ሁሉም ማገናኛዎች ወደ ትላልቅ አዶዎች (.ማህበራዊ-አዶ) እና ትናንሽ (.ማህበራዊ-አዶ-ትንሽ) ተከፍለዋል. እነዚህን ክፍሎች እንደ ውስጠ-መስመር ብሎክ እንዲታዩ አዘጋጅተናል ቋሚ መጠኖችእና ተመሳሳይ ዳራ. እና ከዚያ ጋር CSS በመጠቀምተጓዳኝ ምስል በእያንዳንዱ ማገናኛ ላይ እንዲታይ ይህን ዳራ አንቀሳቅሰነዋል።

    የቅጂ መብት አንድ ብሎክ የቅጂ መብት እና አርማ ያለው ምስል አገናኝ እና ከሥሩ ጽሑፍ ያለው አንቀጽ ነው።

    የቅጂ መብት 2012 ዋይትስኳር። የፒኬላብ ፈጠራ


    ቅጦች ከቀደምት ብሎኮች ጋር በተመሳሳይ መልኩ ይከናወናሉ፣ ልዩነቱ እገዳው በቀኝ ጠርዝ ላይ ተቸንክሮ እና በውስጡ ያለው አሰላለፍ ደግሞ በቀኝ በኩል መሆኑ ብቻ ነው።

    አካል ( … .ግርጌ ( … )

    ይህ አቀማመጥን ያጠናቅቃል. የተጠናቀቀው ፕሮጀክት ሊወርድ ይችላል

    እና አሁን አብዛኛው የአቀማመጥ ዲዛይነሮች እኔ እንደተረዳሁት የ Bootstrap ፍርግርግ ይጠቀማሉ, ምክንያቱም በእሱ አማካኝነት በአጠቃላይ የማመቻቸት እና የአቀማመጥ ሂደትን በከፍተኛ ሁኔታ ማፋጠን ይችላሉ.
    በአጠቃላይ, አዎ ይቻላል. ልክ ለራስህ ገንዘብ እንደማግኘት ተጨማሪ ችግሮች. በተጨማሪም ብዙውን ጊዜ ጥቅም ላይ የሚውለው እነሱ በደንብ ሊያደርጉት ስለማይችሉ ነው, ለምሳሌ, "ይህ አቀማመጥ" በመጠቀም ሊሰራ ይችላል የቡትስትራፕ ፍርግርግነገር ግን "ይህ" አይፈቀድም. ማንኛውም ይቻላል፣ ጥያቄው እዚያ መደረግ ያለበት የአርትዖት ብዛት ነው። ማሰሪያው የፍቃዶች ስብስብ አለው, እነሱ የሚስማሙ ከሆነ, ከዚያ ይቻላል. ጥያቄው ስለ ኤለመንቶች ሚዛን እንጂ ፍርግርግ አይደለም ስለዚህ አቀማመጡን ይከፍታሉ, በመጀመሪያ ምን ይመለከታሉ? ብዙውን ጊዜ በስልኩ ማያ ገጽ ላይ, ስለ እሱ የማስበውን ሁሉ ለመግለጽ ከዲዛይነር ምላሽ በመጠባበቅ ላይ. እና በተመሳሳይ ጊዜ “ይህ” በእሱ አስተያየት በአሳሽ ደረጃ እንዴት መቅረብ እንዳለበት ግልፅ ያድርጉ… እርስዎ እንደተረዱት ፣ አንድ አቀማመጥ 1920 ፒክስል ስፋት ያለው ፣ 12 አምዶች ያለው ነው እንበል እና ንብረቱን ከሰጡት ስፋት "col-lg-*" በአቀማመጥ ውስጥ ይይዛል, ከዚያም ኤለመንቱ በሚፈለገው ቦታ በትክክል ይሟላል? ለዚሁ ዓላማ, አቀማመጡ ማርክ አለው, ጨምሮ. በአምዶች, ጨምሮ. በእርግጥ ከፈለጉ እራስዎ ማመልከት ይችላሉ. "Photoshop grid 12 columns" ወይም ሌሎች ተመሳሳይ ነገሮችን በመፈለግ ብዙ አስደሳች ነገሮችን ማግኘት ይችላሉ. ፍርግርግ ይመልከቱ እና ከየት ጋር እንደሚስማማ ይረዱ። ይህ በሆነ ምክንያት በድንገት እዚያ ካልነበረ ወይም ለእያንዳንዱ አካል በትክክል የማይመጥኑ አንዳንድ የፔዲንግ ህዳጎችን ካከሉ ​​+ ሁሉንም ነገር ማስላት ያስፈልግዎታል ፣ በአቀማመጡ ውስጥ ያለውን ውስጠ-ገጽ ይመልከቱ ፣ በቡት ማሰሪያ ውስጥ ምን ያህል ያስሉ ። ውስጠ-ገጽ, እና ከዚያም መጨመር / ማስወገድ. እሱ ከገለጽከው እይታ አንጻር ሲታይ ብዙውን ጊዜ ያለሱ ከማድረግ የበለጠ ከባድ ነው። በሰዎች የተፈጠረን ማዕቀፍ ለመጠቀም እና የአቀማመጡን ሂደት ለማፋጠን , ግን እንደ እውነቱ ከሆነ 3 እጥፍ ተጨማሪ ጊዜ ማሳለፍ እንዳለብኝ ነው, ምክንያቱም እኔ ስለማላውቅ ነው በአጠቃላይ ምን እየሰሩ ነው በዚህ ላይ "ስህተት" ምን ሊሆን ይችላል ምናልባት እንደዚህ አይነት አሰልቺ እና ደደብ ስህተቶችን በግልጽ የሚያብራሩ ወይም እንዴት በትክክል እንደሚሰሩ እና እንዴት እንደማያስረዱ. እና እባኮትን “በጣቢያው ላይ ያለውን ሰነድ ያንብቡ” ማለት አያስፈልግም። በጣቢያው ላይ ያሉትን ሰነዶች ለማንበብ በጣም ገና እንደሆነ ይመስለኛል. ለመጀመር አንድ ተጨማሪ ረቂቅ ነገር እንዲያነቡ እመክራለሁ ፣ ምን ኮንክሪት ሊሆን እንደሚችል እንኳን አላውቅም… ምናልባት አንዳንድ ቪዲዮዎችን ማየት አለብዎት ala “በ 15 ደቂቃ ውስጥ ድህረ ገጽን በቴፕ እንዴት እንደሚስሉ” ፣ ወይም የሆነ ነገር ማየት አለብዎት ። በዛ መንፈስ። ኦዲዮ-ቪዥዋል ቅንብር ከጽሑፍ ይልቅ ለመረዳት ቀላል ነው። 2 ድምጽ

    እንኳን ወደ ጅምር-ዕድል ብሎግ ገፆች በደህና መጡ። ዕድል እዚህ ይጀምራል። ጥሩ እና ብቃት ያለው ድር ጣቢያ በተቻለ መጠን በቀላሉ ለመፍጠር እየሞከሩ ከሆነ ግን ፕሮግራሞቹን ፣ ሁሉንም ውሎች እና ኮድ ሙሉ በሙሉ ካልተረዱ ፣ ከዚያ ይህ ጽሑፍ ለእርስዎ ነው።

    የሚለምደዉ Bootstrap አቀማመጥ - እንዴት እርስ በርስ የተገናኘ ነው? ማዕቀፍ ለምን ያስፈልግዎታል ፣ ለማንኛውም ምንድነው ፣ እንዴት እንደሚረዳ እና በእውነቱ ህይወትን ቀላል ያደርገዋል? እንዲሁም የወደፊቱን ፕሮጀክት ሳይጎዳ ፕሮግራሙን እንዴት እንደሚጠቀሙበት እና ጥሩ ትምህርቶችን የት እንደሚያገኙ እነግርዎታለሁ። ደህና ፣ እንጀምር?

    ስለ Bootstrap ትንሽ

    ሁሉም አንባቢዎቼ ማዕቀፍ ምን እንደሆነ በደንብ እንዳልተረዱ እና አስቀድመው አውርደው በራሳቸው ለማወቅ እንደቻሉ እገምታለሁ። በተለይ ለእነሱ መረጃን እጀምራለሁ. በቅርቡ ስለ አስማሚ አቀማመጥ ጽፌ ቡትስትራፕ ፕሮግራም ብዬ ነበር። ይህንን ያደረኩት ለመረዳት ቀላል እንዲሆን ነው፣ ምንም እንኳን ክፈፉ ያን ያህል ባይሆንም።

    ይህ የመተግበሪያዎች, ስክሪፕቶች ወይም ፕለጊኖች ስብስብ ነው, ለመናገር, በጣቢያው ላይ ልዩ ቅጾችን መፍጠርን ቀላል ያደርገዋል, ካሮሴሎች በምስሎች, ጣቢያው በተንቀሳቃሽ መሳሪያዎች ላይ ያሳዩ ወይም ይህን አለማድረግ, ወዘተ.

    ምናልባት እርስዎ ቀደም ብለው እንደሚያውቁት ለእያንዳንዱ እነዚህ እርምጃዎች ፕሮግራመር አውጪው መምጣት እና ኮድ መጻፍ አለበት። Bootstrapን ከተጠቀሙ፣ ይህን ማድረግ የለብዎትም። በቀላሉ የተዘጋጀ አብነት ወስደህ እንደፈለከው ቀይር። በዚህ ምክንያት የሥራ ጊዜ በከፍተኛ ሁኔታ ይቀንሳል.

    ከማፋጠን በተጨማሪ የዚህ ማዕቀፍ ቅድሚያ የሚሰጣቸው ነገሮች ለድር ጌታው የሚያስፈልጉትን ነገሮች መቀነስንም ያካትታሉ። በጥሩ ሁኔታ, ጣቢያው የተፈጠረው በጃቫ ስክሪፕት በጣም ጠንቅቆ የሚያውቅ እና ሁሉንም ነገር እራሱ መጻፍ በሚችል ሰው ነው. ከ Bootstrap ጋር የሚሰሩ ከሆነ፣ እውቀትዎ ያን ያህል ጥልቅ ላይሆን ይችላል። መሰረታዊ ደረጃበጣም በቂ ይሆናል.

    እድሎች

    በ css ፣ JavaScript እና ክፍሎች ውስጥ ቡትስትራፕ 3 ከሩሲያኛ ሰነዶች ጋር በድረ-ገጹ ላይ ምን ማድረግ እንደሚችል ማየት ይችላሉ። በተፈለገው ትር ላይ ጠቅ ካደረጉ በኋላ, በጣም ምቹ የሆነ ምናሌ በቀኝ በኩል ይታያል, ይህም በሰነዱ ውስጥ ወደሚፈለገው ቦታ እንዲሄዱ ያስችልዎታል.

    እዚህ ላይ የተወሰኑ ምሳሌዎች ለአንድ የተወሰነ ድርጊት ኃላፊነት ያለው የኮዱ ክፍል ምን እንደሚመስል እና ውጤቱንም ያሳያሉ። ለማንኛውም ተንቀሳቃሽ መሳሪያዎች የይዘቱን ታይነት ማዘጋጀት ይችላሉ። ፈቃዶች እና ሌሎች ቅንብሮች አስቀድመው ተጠናቅቀዋል።

    ኮርሱ ራሱ ከ A እስከ Z ልምምድ ያድርጉ"ለ17 ሰዓታት ያህል ይቆያል። በዚህ ጊዜ ጠቃሚ የንድፈ ሃሳባዊ እውቀትን ያገኛሉ እና ከዚያ የተወሰኑ ንጥረ ነገሮችን በትክክል እንዴት እንደሚጠቀሙ ይለማመዱ: ከኮዱ ውስጥ የትኞቹ ንጥረ ነገሮች እንደሚወገዱ, ጣቢያው በፍጥነት እንዲሰራ ምን እንደሚያስፈልግ, ምን እንደሆነ እና ብዙ ተጨማሪ.


    ደህና፣ አንድ ተጨማሪ የጉርሻ ኮርስ፣ TOP 4 add-ons for Bootstrap፣ ማዕቀፉ በተቀላጠፈ ሁኔታ እንዲሰራ የሚያግዝ።

    እንግዲህ ያ ብቻ ይመስላል። ለጋዜጣው ደንበኝነት ይመዝገቡ እና ስለ ውስብስብ ችግሮች ቀላል መፍትሄዎች እና ትክክለኛ ካልሆኑ ምርቶች ጋር ሲሰሩ ትክክለኛውን አቀራረብ የበለጠ ይወቁ።



    ተዛማጅ ጽሑፎች