> 웹 프론트엔드 > HTML 튜토리얼 > bootstrap3随笔_html/css_WEB-ITnose

bootstrap3随笔_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:45:59
원래의
1176명이 탐색했습니다.

bootstrap3随笔

[TOC]

布局容器

Bootstrap需要为页面内容和栅格系统包裹在一个.container容器

!!! Caution "Warning!"
由于padding等属性的原因,这两种容器不能互相嵌套

  • .container类用于固定宽度并支持响应式布局的容器
  • .container-fluid类用于100%宽度,占据全部视口(viewport)的容器
  • 栅格参数

  • 超小屏幕
  • 小屏幕 >768px .col-sm-
  • 中等屏幕 >992px .col-md-
  • 大屏幕 >1200px .col-lg-
  • 排版

    标题

    ~

    都可以使用,同时提供了.h1到.h6的类

    !!! Hint "Info"
    如果使用副标题的话可以包含标签或者使用.small类

    内联文本元素

  • ,为文本加上删除线
  • ,为文本加上下划线
  • 小号文本

    标签包裹的元素,其内的文本将被设置为父容器字体大小的85%。
    !!! Note '提示'
    标题元素中嵌套的元素被设置不同的font-size

    着重

    包裹的元素font-weight值会加重

    斜体

    使用标签包裹

    对齐

  • text-left 左对齐
  • text-center 中间对齐
  • text-right 右对齐
  • text-justify 两端对齐
  • text-nowrap 文本不换行
  • 基本缩略语


    如果缩略语是首字母,为了突显出来,可以加上.initialism类,可以让font-size变得稍微小一些

    引用

    可以添加引用内容
    	<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 "另一种展示风格"
    通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

    列表

      来生成有序列表和无序列表
    1. list-unstyled 无样式列表
    2. list-inline 内联列表(就是排成一行)
    3. 描述

      带有描述短语的列表
    4. dl-horizontal 可以让
      内的短语及其描述排在一行
    5. 代码块

    6. 内联代码<br>
    7. 用户输入
    8.  代码块<br>
      로그인 후 복사
    9. 变量
    10. 程序输出
    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿