Home > Web Front-end > HTML Tutorial > bootstrap3 essay_html/css_WEB-ITnose

bootstrap3 essay_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:45:59
Original
1176 people have browsed it

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 screen<768px .col-xs-
  • Small screen>768px .col-sm-
  • Medium screen>992px .col-md-
  • Large screen>1200px . col-lg-
  • Typesetting

    Title

    ~

    can be used, and classes from .h1 to .h6 are provided

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

    Inline text element

  • , Strikethrough text
  • ,Underline text
  • Small text

    < The text inside the element wrapped by the small> tag will be set to 85% of the font size of the parent container.
    !!! Note 'Tip'
    The nested element in the title element is set to a different font-size

    Emphasis

    wrapped The element font-weight value will be emphasized

    italic

    Use 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


    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

    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>
    Copy after login

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

    List

      ,
        to generate ordered and unordered lists

      1. list-unstyled unstyled list
      2. list-inline Inline list (that is, lined up in one line)
      3. Description

        List with description phrase

      4. dl-horizontal can let< Phrases and their descriptions within dl> are arranged in one line
      5. Code block

      6. Inline code
      7. User input
      8.  Code block
      9. Variable
      10. Program output
    Related labels:
    source:php.cn
    Statement of this Website
    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
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template