fomba Fiasa

Raha manome fitsangatsanganana fampidirana ny tetikasa sy ny zavatra atolony ny pejy fanombohana, ity antontan-taratasy ity dia mifantoka amin'ny antony anaovanay ny zavatra ataonay ao amin'ny Bootstrap. Izy io dia manazava ny filozofiantsika amin'ny fananganana amin'ny tranonkala mba hahafahan'ny hafa mianatra amintsika, mandray anjara amin'ny anjarantsika ary manampy antsika hivoatra.

Mahita zavatra tsy mety, sa mety ho vita tsara kokoa? Sokafy olana iray — tianay ny hiresaka izany aminao.

FAMINTINANA

Hiditra amin'ny tsirairay amin'ireo bebe kokoa isika, fa amin'ny ambaratonga ambony, ity no mitarika ny fomba fiasantsika.

• Ny singa dia tokony ho tompon'andraikitra ary voalohany amin'ny finday
• Ny singa dia tokony hatsangana miaraka amin'ny kilasy fototra ary hitarina amin'ny alàlan'ny kilasy modifier
• Ny fanjakana singa dia tokony hankatò ny mari-pamantarana z mahazatra
• Raha azo atao dia aleo ny fampiharana HTML sy CSS toy izay JavaScript
• Raha azo atao, ampiasao ny fitaovana ampiasaina amin'ny fomba mahazatra
• Isaky ny azo atao, aza hadino ny fampiharana ny fepetra henjana HTML (mpifidy ankizy)

manaiky

Ny fomba famalian'i Bootstrap dia natsangana mba handraisana andraikitra, fomba iray antsoina matetika hoe mobile-first . Mampiasa an'io teny io izahay ao amin'ny dokanay ary miombon-kevitra aminy amin'ny ankapobeny, fa indraindray dia mety midadasika loatra. Na dia tsy ny singa rehetra aza dia tsy maintsy mamaly tanteraka ao amin'ny Bootstrap, ity fomba fandraisana andraikitra ity dia momba ny fampihenana ny fanoheran'ny CSS amin'ny alàlan'ny fanosehana anao hampiditra fomba rehefa mihamitombo ny viewport.

Eo amin'ny Bootstrap, ho hitanao mazava tsara izany amin'ny fanontanianay amin'ny haino aman-jery. Amin'ny ankabeazan'ny toe-javatra, mampiasa min-widthfanontaniana izay manomboka mihatra amin'ny toerana fiatoana manokana izahay ary mitondra any amin'ireo teboka ambony kokoa. Ohatra, a .d-nonemihatra hatramin'ny min-width: 0infinity. Amin'ny lafiny iray, ny a .d-md-nonedia mihatra avy amin'ny toerana fiatoana antonony sy ambony.

Indraindray isika dia hampiasa max-widthrehefa mila izany ny fahasarotan'ny singa iray. Indraindray dia mazava kokoa amin'ny fomba fiasa sy ara-tsaina ny fampiharana sy ny fanohanana ireo fanodinkodinana ireo noho ny fanoratana indray ny fiasa fototra avy amin'ny singantsika. Miezaka mametra io fomba fiasa io izahay, fa hampiasa azy io tsindraindray.

fianarana

Ho fanampin'ny Rebooty, takelaka fanamafisam-peo amin'ny navigateur, ny fombanay rehetra dia mikendry ny hampiasa kilasy ho mpifidy. Midika izany fa manaisotra ireo mpifidy karazana (oh, input[type="text"]) sy kilasy tsy misy ray aman-dreny (oh, .parent .child) izay mahatonga ny fomba voafaritra loatra ka tsy azo ihodivirana mora foana.

Noho izany, ny singa dia tokony hamboarina miaraka amin'ny kilasy fototra izay mitahiry tsiroaroa fananan-tany mahazatra, tsy azo ovaina. Ohatra, .btnary .btn-primary. Ampiasainay .btnamin'ny fomba mahazatra rehetra toy ny display, padding, ary border-width. Avy eo isika dia mampiasa modifiers toy .btn-primaryny manampy ny loko, ny afara, ny sisin-tany, sns.

Ny kilasin'ny modifier dia tsy tokony hampiasaina raha misy fananana na sanda maromaro hovaina amin'ny karazany maro. Tsy ilaina foana ny mpanova, koa aoka ho azo antoka fa tena mitahiry andalana misy kaody ianao ary misoroka ny fanovana tsy ilaina rehefa mamorona azy ireo. Ohatra tsara amin'ny mpanova dia ny kilasin'ny loko loha-hevitray sy ny habeny.

z-index mizana

Misy z-indexmizana roa ao amin'ny Bootstrap — singa ao anatin'ny singa iray ary singa manarona.

singa singa

• Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the border property. For example, button groups, input groups, and pagination.
• These components share a standard z-index scale of 0 through 3.
• 0 is default (initial), 1 is :hover, 2 is :active/.active, and 3 is :focus.
• This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly anything can be hovered.

Overlay components

Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index scale that begins at 1000. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.

Each overlay component increases its z-index value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.

Learn more about this in our z-index layout page.

HTML and CSS over JS

Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.

This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.

Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

Utilities

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.

Code conventions

Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifies guidelines for general formatting, common sense defaults, property and attribute orders, and more.

We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.

Mampiasa vnu-jar izahay mba hampiharana HTML manara-penitra sy semantika, ary koa amin'ny fitadiavana lesoka mahazatra.