Түргэн эхлүүлэх жишээнүүд

Шуурхай загвар хэрэгтэй байна уу? Бидний нэгтгэсэн эдгээр үндсэн жишээг харна уу:

Өгөгдмөл сүлжээ

Bootstrap-ийн нэг хэсэг болгон өгсөн анхдагч сүлжээний систем нь 940px өргөнтэй 16 баганатай сүлжээ юм. Энэ нь алдартай 960 сүлжээний системийн амт боловч зүүн болон баруун талд нэмэлт зах/доторгүй.

Сүлжээний тэмдэглэгээний жишээ

Энд үзүүлсэнчлэн үндсэн бүдүүвчийг хоёр "багана"-аар үүсгэж болох бөгөөд тус бүр нь бидний сүлжээний системийн нэг хэсэг гэж тодорхойлсон 16 суурийн баганын хэд хэдэн хэсгийг хамардаг. Доорх жишээнүүдээс илүү олон хувилбаруудыг харна уу.

<div анги = "мөр" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Үүрлэх баганууд

.rowХэрэв шаардлагатай бол одоо байгаа багана дотор контентоо үүсгээрэй.

Оруулсан баганын жишээ

<div анги = "мөр" > 
  <div class = "span12" > 
    Баганын 1-р түвшин
    <div анги = "мөр" > 
      <div class = "span6" > 
        2-р түвшин
      </div>
      <div class = "span6" > 
        2-р түвшин
      </div>
    </div>
  </div>
</div>

Өөрийнхөө сүлжээг эргүүл

Bootstrap-д суурилуулсан нь өгөгдмөл 940px сүлжээний системийг тохируулах цөөн тооны хувьсагч юм. Бага зэрэг тохируулснаар та баганын хэмжээ, тэдгээрийн суваг, тэдгээрийн байрлах савны хэмжээг өөрчлөх боломжтой.

Сүлжээ дотор

Сүлжээний системийг өөрчлөхөд шаардлагатай хувьсагч нь одоогоор бүгд дотор байна preboot.less.

Одоо тохируулах

Сүлжээг өөрчлөх нь гурван @grid-*хувьсагчийг өөрчилж, Less файлуудыг дахин хөрвүүлнэ гэсэн үг юм.

Bootstrap нь 24 хүртэлх багана бүхий сүлжээний системийг зохицуулахаар тоноглогдсон; өгөгдмөл нь ердөө 16. Таны сүлжээний хувьсагчдыг 24 баганатай сүлжээнд тохируулан хэрхэн харагдахыг эндээс үзнэ үү.

@gridБаганууд : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Дахин эмхэтгэсний дараа та тохируулагдах болно!

Тогтмол зохион байгуулалт

Нэг <div.container>.

<бие>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Шингэний зохион байгуулалт

Хамгийн бага ба хамгийн их өргөн, зүүн талын хажуу талбар бүхий өөр, уян хатан шингэн хуудасны бүтэц. Аппликешн болон баримт бичигт тохиромжтой.

<бие>
  <div class = "контейнер-шингэн" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Гарчиг ба хуулбар

Таны вэб хуудсуудыг зохион байгуулах стандарт хэвлэх шатлал.

Бүх хэвлэх сүлжээ нь манай preboot.less файлын хоёр Less хувьсагч дээр суурилдаг: @basefontболон @baseline. Эхнийх нь үндсэн үсгийн хэмжээ, хоёр дахь нь үндсэн мөрийн өндөр юм.

Бид эдгээр хувьсагч болон зарим математикийг ашиглан бүх төрлийн захын зай, дэвсгэр, шугамын өндрийг болон бусад зүйлийг бий болгодог.

h1. Гарчиг 1

h2. Гарчиг 2

h3. Гарчиг 3

h4. Гарчиг 4

h5. Гарчиг 5

h6. Гарчиг 6

Жишээ догол мөр

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis aparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Жишээ гарчигт дэд гарчиг байна...

Бусад. элементүүд

Өргөлт, хаяг, товчлолыг ашиглах

<strong> <em> <address> <abbr>

Хэзээ хэрэглэх вэ

Үг, хэллэгийн эргэн тойрны хуулбартай харьцуулахад нэмэлт ач холбогдол, онцлох тэмдэглэгээг тэмдэглэхийн тулд онцлох тэмдэглэгээг ( <strong>ба ) ашиглах ёстой. <em>Ач <strong>холбогдол болон стрессийг<em> онцлохын тулд ашиглана уу .

Догол мөрөнд онцлон тэмдэглэ

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

Тэмдэглэл:<b> HTML5-д болон шошгыг ашиглах нь зөв <i>бөгөөд тэдгээрийг тод, налуу хэлбэрээр тус тусад нь бичих шаардлагагүй (хэдийгээр илүү семантик элемент байгаа бол үүнийг ашиглана уу). <b>Энэ нь нэмэлт ач холбогдол өгөхгүйгээр үг, хэллэгийг онцлон тэмдэглэх зорилготой бөгөөд <i>ихэнхдээ дуу хоолой, техникийн нэр томъёо гэх мэт.

Хаяг

Элементийг <address>хамгийн ойрын өвөг дээдэс эсвэл бүхэл бүтэн ажлынхаа холбоо барих мэдээлэлд ашигладаг. Үүнийг хэрхэн ашиглаж болох хоёр жишээ энд байна:

Тайлбар: Агуулгыг зөв зохион байгуулахын тулд мөр бүр <address>заавал мөр таслах ( <br />) буюу блок түвшний шошгонд (жишээ нь, ) ороосон байх ёстой .<p>

Товчлол

Товчлол болон товчилсон нэрийн хувьд <abbr>тагийг ашиглана уу ( HTML5<acronym> дээр хуучирсан ). Тайлбарын хэлбэрийг шошгон дотор байрлуулж, бүтэн нэрэнд гарчиг тавь.

Хаалттай ишлэл

<blockquote> <p> <small>

Хэрхэн иш татах вэ

<blockquote>Блок ишлэл оруулахын тулд тойруулан боож <p>, <small>тэмдэглэнэ үү. Элементийг ашиглан эх сурвалжаа иш татвал өмнө <small>нь зураас авах болно .—

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо posuere erat a ante venenatis dapibus posuere velit aliquet.

Доктор Жулиус Хибберт

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Доктор Жулиус Хибберт </small>
</blockquote>

Захиалгагүй<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Масса дахь бүхэл тоо
• Дээд зэрэглэлийн nisl aliquet дахь Facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Идээний идээт ундаа
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutp at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Загваргүй<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Масса дахь бүхэл тоо
• Дээд зэрэглэлийн nisl aliquet дахь Facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Идээний идээт ундаа
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutp at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Захиалсан<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Масса дахь бүхэл тоо
4. Дээд зэрэглэлийн nisl aliquet дахь Facilisis
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Тодорхойлолтdl

Тодорхойлолтын жагсаалтууд

Тодорхойлолтын жагсаалт нь нэр томъёог тодорхойлоход төгс төгөлдөр юм.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Малесуада порта

Etiam porta sem malesuada magna mollis euismod.

Код

<code> <pre>

Хоёр энгийн шошготойгоор кодоо загварчлаарай. Жаваскриптээр дамжуулан илүү гайхалтай болгохын тулд Google-ийн кодыг гоёмсог номын сан руу оруулснаар та бэлэн боллоо.

Кодыг танилцуулж байна

Код, блокууд эсвэл зүгээр л хэсэгчилсэн хэсгүүдийг зөвхөн баруун шошгон дээр ороож хэв маягаар харуулах боломжтой. Олон мөрийг хамарсан кодын блокуудын хувьд <pre>элементийг ашиглана уу. Дотор кодын хувьд <code>элементийг ашиглана уу.

<div>
  <h1>Гарчиг</h1>
  <p>Энд ямар нэг зүйл байна...</p>
</div>

<div> <h1> Гарчиг </h1> <p> Энд ямар нэг зүйл байна... </p> </div>
  
  

Дотор хаягууд

<span class="label">

Биеийн текст дэх дурын хэллэгт анхаарлаа хандуулаарай.

Аливаа зүйлийг шошго

Хэзээ нэгэн цагт эдгээр шинэлэг зүйлсийн нэг нь хэрэгтэй байсан ! эсвэл код бичих үед чухал дарцагууд? За, одоо танд тэд байна. Энд анхдагчаар юу орсон байна:

Медиа сүлжээ

HTML хэмжээ багатай, хамгийн бага загвартай хуудсууд дээр янз бүрийн хэмжээтэй өнгөц зургийг харуулах.

Жишээ өнгөц зураг

Өнгөц зураг нь .media-gridямар ч хэмжээтэй байж болох ч тэдгээрийг шууд суулгасан Bootstrap сүлжээний системд буулгах үед хамгийн сайн ажилладаг. .span290, 210, 330 гэх мэт зургийн өргөн нь , .span4, болон .span6баганын хэмжээтэй тэнцүү байхын тулд хэдэн пикселийн дэвсгэртэй нийлдэг .

Том

Дунд

Жижиг

Тэдгээрийг кодлох

Медиа сүлжээнүүд нь ашиглахад хялбар бөгөөд тэмдэглэгээний тал дээр маш энгийн. Тэдний хэмжээс нь зөвхөн оруулсан зургийн хэмжээнээс хамаарна.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Барилгын ширээ

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Хүснэгт нь маш сайн - олон зүйлд зориулагдсан. Гайхалтай хүснэгтүүд нь ашигтай, өргөтгөх боломжтой, унших боломжтой (кодын түвшинд) байхын тулд бага зэрэг тэмдэглэгээ хийх хэрэгтэй. Энд туслах хэдэн зөвлөгөө байна.

Баганын толгой хэсгийг үргэлж > > <thead>байхаар боож байгаарай .<thead><tr><th>

Баганын толгойтой адил таны хүснэгтийн бүх агуулгыг дотор нь ороосон байх ёстой бөгөөд <tbody>ингэснээр таны шатлал <tbody>> <tr>> <td>байна.

Жишээ нь: Өгөгдмөл хүснэгтийн загварууд

Унших, бүтцийг хадгалахын тулд бүх хүснэгтийг зөвхөн чухал хүрээгээр автоматаар загварчлах болно. Нэмэлт анги, шинж чанар нэмэх шаардлагагүй.

<хүснэгт>
  ...
</хүснэгт>

Жишээ нь: тахө судалтай

Тахө зураасыг нэмж ширээгээ бага зэрэг гоёмсог болго—зүгээр л .zebra-stripedанги нэмээрэй.

Тайлбар: Zebra-striping нь IE8 болон түүнээс доош настай хөтчүүдэд байхгүй дэвшилтэт сайжруулалт юм.

<хүснэгт анги = "тахө судалтай" > 
...
</хүснэгт>

Жишээ нь: тахө судалтай / TableSorter.js

Өмнөх жишээг авч үзвэл, бид jQuery болон Tablesorter залгаасаар дамжуулан эрэмбэлэх функцээр хангаснаар хүснэгтийнхээ ашиг тусыг сайжруулдаг . Ангилалыг өөрчлөхийн тулд дурын баганын толгой дээр дарна уу.

<script src = "js/jquery/jquery.tablesorter.min.js" >></script> 
<скрипт > 
  $ ( функц () { 
    $ ( "хүснэгт#sortTableExample" ). хүснэгт эрэмбэлэгч ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<хүснэгт анги = "тахө судалтай" > 
  ...
</хүснэгт>

Өгөгдмөл хэв маяг

Бүх маягтыг унших боломжтой, өргөтгөх боломжтой байдлаар харуулахын тулд үндсэн хэв маягийг өгсөн. Текст оруулах, сонгох жагсаалт, текстийн талбар, радио товч болон шалгах хайрцаг, товчлуур зэрэгт зориулж хэв маягийг өгсөн.

Давхардсан маягтууд

Маягтынхаа HTML-д нэмбэл .form-stackedта талбаруудын зүүн талд биш дээд талд шошготой болно. Хэрэв таны маягт богино эсвэл хүнд хэлбэрт оруулах хоёр багана байгаа бол энэ нь маш сайн ажилладаг.

Маягтын талбайн хэмжээ

Тэмдэглэгээнд хэдхэн анги нэмж дурын хэлбэр input, select, эсвэл өргөнийг тохируулаарай.textarea

1.3.0 хувилбараас бид маягтын элементүүдийн сүлжээнд суурилсан хэмжээсийн ангиллыг нэмсэн. Эдгээрийг одоо байгаа .mini, .small, гэх мэт ангиудад ашиглаарай.

Товчлуурууд

Дүрмээр бол товчлууруудыг үйлдэл хийхэд ашигладаг бол холбоосыг объектод ашигладаг. Жишээлбэл, "Татаж авах" нь товчлуур, "сүүлийн үйл ажиллагаа" нь холбоос байж болно.

Бүх товчлуурууд нь анхдагчаар цайвар саарал өнгөтэй байдаг боловч янз бүрийн өнгөт загварт хэд хэдэн функциональ ангиллыг ашиглаж болно. Эдгээр ангиудад цэнхэр .primaryанги, цайвар цэнхэр .infoанги, ногоон .successанги, улаан .dangerанги орно.

Жишээ товчлуурууд

Товчлуурын хэв маягийг ашигласан бүх зүйлд .btnхэрэглэж болно. Ерөнхийдөө та эдгээрийг зөвхөн <a>, <button>, сонгох <input>элементүүдэд хэрэглэхийг хүсдэг. Энэ нь дараах байдалтай байна.

Өөр хэмжээсүүд

Илүү том эсвэл жижиг товчлуурууд танд таалагдаж байна уу? Болоорой!

Идэвхгүй байдал

Идэвхгүй байгаа эсвэл ямар нэг шалтгааны улмаас програм идэвхгүй болсон товчлууруудын хувьд идэвхгүй байдлыг ашиглана уу. Энэ .disabledнь холбоосууд болон элементүүдэд :disabledзориулагдсан .<button>

Холбоосууд

Товчлуурууд

Энэ юу вэ

Манай topbar нь вэб сайтын лого эсвэл нэр, үндсэн навигаци, хайлтын маягтыг агуулсан суурин баар юм.

Тохируулах боломжтой

Доторх бүх элементүүд болон дээд самбарыг бүхэлд нь сонгох боломжтой. Та лого/нэр, навигаци, хайлт, хоёрдогч навигац эсвэл тэдгээрийн аль нэг хослолыг оруулахаар сонгож болно.

Унтраах цэсүүд багтсан

Үндсэн навигацийн нэг хэсэг болгон бид танд өөрийн Nav-д унадаг цэс нэмэх боломжийг оруулсан. Хэрхэн хийгдсэнийг харахын тулд дээрх (баруун зэрэгцүүлсэн) хоёрдогч хөтөчийг шалгана уу. Унтраах liшошгууд нь .activeодоогийн хуудасны сонголтыг харуулахыг дэмждэг.

Таб болон эм

ашиглан энгийн хоёрдогч навигац үүсгээрэй <ul>. Тохиромжтой ангиллыг нэмж таб эсвэл эм хооронд солино уу.

Манай акаунтын тохиргооны хуудас, хэрэглэгчийн он цагийн хэлхээс зэрэг контентын дэд хэсгүүдэд таалагдсан контентын хуудсуудын хооронд шилжихэд тохиромжтой. Таб болон шахмал хэлбэрээр авах боломжтой.

• Гэр
• Профайл
• Мессежүүд
• Тохиргоо
• Холбоо барих
• Унтраах цэс
  • Хоёрдогч холбоос
  • Энд өөр зүйл байна
  • Өөр нэг холбоос

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Нүүр хуудас </a></li>  
  <li><a href = "#" > Профайл </a></li> 
  <li><a href = "#" > Мессежүүд </a></li> 
  <li><a href = "#" > Тохиргоо </a></li> 
  <li><a href = "#" > Холбоо барих </a></li> 
</ul>

• Гэр
• Профайл
• Мессежүүд
• Тохиргоо
• Холбоо барих

<ul class = "эм" > 
  <li class = "active" ><a href = "#" > Нүүр хуудас </a></li>  
  <li><a href = "#" > Профайл </a></li> 
  <li><a href = "#" > Мессежүүд </a></li> 
  <li><a href = "#" > Тохиргоо </a></li> 
  <li><a href = "#" > Холбоо барих </a></li> 
</ul>

Талхны үйрмэг

Breadcrumb навигацыг хэрэглэгчдэд програм эсвэл сайт дотор хаана байгааг харуулах арга болгон ашигладаг боловч үндсэн навигацид ашигладаггүй.

• Гэр

• Нүүр хуудас /
• Дунд хуудас

• Нүүр хуудас /
• Дунд хуудас /
• Өөр нэг

• Нүүр хуудас /
• Дунд хуудас /
• Өөр нэг /
• Та энд байна

<ul class = "breadcrumb" > 
  <li><a href = "#" > Нүүр хуудас </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Дунд хуудас </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Өөр нэг </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Та энд байна </li> 
</ul>

Хуудсууд

Rdio-ээс санаа авсан хэт энгийн бөгөөд хамгийн бага хэв маягтай хуудаснаа. Том блок нь алдахад хэцүү, хялбархан өргөжүүлэх боломжтой бөгөөд том товшилтын хэсгүүдийг өгдөг.

<div class = "хуудас" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Өмнөх </a></li>  
    <li анги = "идэвхтэй" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li анги = "дараагийн" ><a href = "#" > Дараагийн → </a></li>  
  </ul>
</div>

Үндсэн сэрэмжлүүлэг

.alert-message

Аливаа үйлдлийн бүтэлгүйтэл, болзошгүй бүтэлгүйтэл, амжилтыг тодруулах нэг мөр мессеж. Ялангуяа маягтуудад хэрэгтэй.

JavaScript авах »

Жишээ код

<div class = "aert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Ариун гуакамоле! </strong> Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна. </p>
</div>

Зурвасуудыг блоклох

.alert-message.block-message

Бага зэрэг тайлбар шаарддаг мессежүүдийн хувьд бид догол мөрний хэв маягийн анхааруулгатай. Эдгээр нь илүү урт алдааны мэдээг гаргах, хэрэглэгчдэд хүлээгдэж буй үйлдлийн талаар сэрэмжлүүлэх, эсвэл хуудсанд илүү их анхаарал хандуулахын тулд зүгээр л мэдээлэл өгөхөд тохиромжтой.

JavaScript авах »

Жишээ код

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Ариун гуакамоле! Энэ бол анхааруулга! </strong> Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна. Nulla vitae elit libero, pharetra augue. Тэнд commodo cursus magna, vel sclerisque nisl consectetur et. </p>
  <div class = "alert-action" > 
    <a class = "btn small" href = "#" > Энэ үйлдлийг хийх </a> <a class = "btn small" href = "#" > Эсвэл үүнийг хий </a>     
  </div>
</div>

Модаль

Модаль-харилцах цонх эсвэл гэрлийн хайрцаг нь суурь контекстийг хадгалах нь чухал нөхцөл байдалд контекст үйлдэл хийхэд тохиромжтой.

JavaScript авах »

Зөвлөмж

Twipsies нь эргэлзсэн хэрэглэгчдэд тусалж, зөв ​​чиглэлд чиглүүлэхэд маш хэрэгтэй байдаг.

JavaScript авах »

Поповерууд

Хуудасны бүтцэд нөлөөлөхгүйгээр дэд текст мэдээллээр хангахын тулд поповер ашиглана уу.

JavaScript авах »

Эхлэх

JavaScript-г Bootstrap номын сантай нэгтгэх нь маш хялбар юм. Доор бид үндсэн зарчмуудыг судалж, таныг эхлүүлэхэд тань туслах хэдэн гайхалтай залгаасуудыг санал болгож байна!

JavaScript баримтуудыг үзэх »

Юу багтсан байна

Bootstrap-ийн зарим үндсэн бүрэлдэхүүн хэсгүүдийг jQuery болон Ender дээр ажилладаг шинэ захиалгат залгаасуудаар амилуулаарай . Таны хөгжлийн тусгай хэрэгцээнд нийцүүлэн тэдгээрийг өргөтгөж, өөрчлөхийг бид танд зөвлөж байна.

JavaScript шаардлагатай юу?

Үгүй ээ! Bootstrap нь юуны түрүүнд CSS номын сан байхаар бүтээгдсэн. Энэхүү javascript нь оруулсан загваруудын дээр үндсэн интерактив давхаргыг өгдөг.

Гэсэн хэдий ч javascript хэрэгтэй байгаа хүмүүст зориулж бид Bootstrap-г javascript-тэй хэрхэн нэгтгэх талаар ойлгоход тусалж, үндсэн функцийг түргэн шуурхай, хялбар болгох үүднээс дээрх нэмэлт өргөтгөлүүдийг өгсөн.

Дэлгэрэнгүй мэдээлэл авах болон зарим амьд үзүүлэнг үзэхийг хүсвэл манай залгаасын баримт бичгийн хуудаснаас үзнэ үү .