Home  >  Article  >  Web Front-end  >  bootstrap3 essay_html/css_WEB-ITnose

bootstrap3 essay_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:45:591164browse

bootstrap3 essay

[TOC]

layout container

Bootstrap needs to wrap the page content and grid system in a .container container

! !! Caution "Warning!"
Due to padding and other attributes, these two containers cannot be nested in each other

  • .container class is used for fixed-width containers that support responsive layout
  • .container-fluid class is used for containers with 100% width and occupy the entire viewport
  • Grid parameters

  • Ultra-small screene4207e210c437027aa404e028d6732b1~4e9ee319e0fa4abc21ff286eeb145ecc can be used, and classes from .h1 to .h6 are provided

    !!! Hint "Info"
    If using a subtitle you can include the d015d241ae6d34c34210679b5204fe85 tag or use the .small class

    Inline text element

  • 823db3943044a0a9a620ada8d4b1d965, 2e44d2d3284d23d932e1fd85f3d4cf3aStrikethrough text
  • 426be984ffbbb815d7d88e3543a85d91,88f336217b3880082bb52d49b5de60a5Underline text
  • Small text

    0e23445c7f178fab98f561ce2b90cbc1 tag will be set to 85% of the font size of the parent container.
    !!! Note 'Tip'
    The nested d015d241ae6d34c34210679b5204fe85 element in the title element is set to a different font-size

    Emphasis

    8e99a69fbe029cd4e2b854e244eab143 wrapped The element font-weight value will be emphasized

    italic

    Use 907fae80ddef53131f3292ee4f81644b tag wrapping

    aligned

  • text-left left-aligned
  • text-center Align in the middle
  • text-right Align right
  • text-justify Align both ends
  • text-nowrap The text does not wrap
  • Basic abbreviation

    8a7974376be5f6c00c121222b727adb9
    If the abbreviation is the first letter, in order to highlight it, you can add the .initialism class to make the font-size Slightly smaller

    Quote

    b8a712a75cab9a5aded02f74998372b4 You can add quoted content

    	<blockquote>	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>	  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>	</blockquote>

    !!! Note "Another presentation style"
    by giving. The blockquote-reverse class allows quotes to render content right-aligned.

    List

    ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6 to generate ordered and unordered lists

  • list-unstyled unstyled list
  • list-inline Inline list (that is, lined up in one line)
  • Description

    5c69336ffbc20d23018e48b396cdd57a List with description phrase

  • dl-horizontal can leta110096fa04ab252360e16609b12f350 are arranged in one line
  • Code block

  • ffbe95d20f3893062224282accb13e8f Inline code
  • 5e4e803d53d659f332070b5d4aa430db User input
  • e03b848252eb9375d56be284e690e873 Code block
  • b7f90f73cad438258bf67e62f79b2113 Variable
  • 162cd570ab1483e383d78dcb7f452f7c Program output
  • Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn