zoukankan      html  css  js  c++  java
  • Bootstrap 基本css样式

    1.标题
    1级标题<h1> 38px 是默认大小的2.7倍
    2级标题<h2> 32px 是默认大小的2.25倍
    3级标题<h3> 24px 是默认大小的1.70倍
    4级标题<h4> 18px 是默认大小的1.25倍
    5级标题<h5> 14px 是默认大小的1.00倍
    6级标题<h6> 12px 是默认大小的0.85倍
    添加<small>标签会得到比标题字体更小的文本。
    <h1><small>这里会得到比h1更小的文本</small></h1>
    2.页面主体
    bootstrap定义了一个和其他段落有所区别的中心段落。
    要想创建一个中心段落,可以把lead类添加到段落中。
    <p class = "lead">这是一个中心段落。</p>
    3.排版元素
    强调内联元素、对齐、强调类、缩略语、地址、引用、列表
    3.1强调内联元素
    <strong>字体设置为粗体,文本比周围其他文本重要。<b>元素没有任何语义上的含义,只是粗体。
    <em>设置为斜体重点强调。注意与<i>的区分,<i>无语义上的含义。
    <mark>用于突出显示从其他地方引用过来的文本
    <u>为文本添加下划线
    <del>删除线
    3.2对齐类
    text-left:在其父级块元素中左对齐。与text-align:left效果一样。
    text-center:右对齐。
    text-right:居中。
    text-justify:类似Word排版中的文字两端对齐。
    3.3强调类
    text-muted:文本情景颜色设置为浅灰色。用来降低文本的重要性。
    text-warning:文本情景颜色设置为橙色。表示警告或出现错误。
    text-danger:文本情景颜色设置为红色。表示危险的动作、问题或很重要的错误。
    text-success:文本情景颜色设置为绿色。某个动作执行成功。
    text-info:文本情景颜色设置为蓝色。一般信息
    text-primary:文本情景颜色设置为天蓝色。表示文本具有一定的优先级。
    同样,有情景背景色。
    bg-primaryg-successg-infog-warningg-danger
    3.4地址
    <address>
    <a href = "mailto:1214443035@qq.com">Contact me</a>
    </address>
    3.5引用
    将<p>元素放入<blockquote>来显示引用。在引用的的左侧加入了一条5像素长的浅灰色线。
    <blockquote>
    <p>这一段是引用</p>
    </blockquote>
    3.6缩略语
    <abbr>HTML</abbr>
    在缩略语的底部添加浅灰色的短线。有个title属性。有个辅助光标。
    3.7列表
    无序列表、有序列表、描述列表的外边距和内边距变的一直。
    <li> <ol> <dl>
    4.表格
    在<table>中添加class = “table”这个类。
    table-bordered#设置边框
    table-striped#设置斑马条纹
    为某个单元格添加情景颜色使用success、warning、danger、info、active类。
    5.按钮
    可以在<a>或<input>元素上使用button类
    <button type = "button" class = "btn btn-default"></button>
    <button type = "button" class = "btn btn-primary"></button>
    <button type = "button" class = "btn btn-success btn-lg"></button>
    <button type = "button" class = "btn btn-info btn-sm"></button>
    <button type = "button" class = "btn btn-waning btn-xs"></button>
    <button type = "button" class = "btn btn-danger"></button>
    <button type = "button" class = "btn btn-link"></button>
    6.表单
    正常、内联、水平
    <form role = "form"></form>
    <form role = "form" class = "form-inline"></form> #相同元素的处于同一行中。
    <form role = "form" class = "form-horizontal"></form> #表单具有水平的布局
    7.代码
    <code>代码片段<code/>#将内联的代码片段包起来。如果有多个片段,就要使用<pre>标签。
    <code>标签中的尖括号必须要用&lt;和&gt;来代替。
    8.图片
    <img src = "1.png" class = "img-rounded" height = "150" width = "130">#方角
    <img src = "1.png" class = "img-circle">#圆角
    <img src = "1.png" class = "img-thumbnail" height = "75" width = "75">#缩略图
    还可以使用img-responsive类让图片成为响应式的。
    9.字体
    Bootstrap默认包含sans-serif、serif、monospace
    10.字体尺寸

  • 相关阅读:
    [刘阳Java]_eayui-pagination分页组件_第5讲
    [刘阳Java]_easyui-draggable拖动组件_第4讲
    [刘阳Java]_easyui-panel组件入门级_第3讲
    [刘阳Java]_TortoiseSVN基础应用_第1讲
    [刘阳Java]_SpringMVC文件上传第2季_第11讲
    [刘阳Java]_Spring中IntrospectorCleanupListener的用途【补充】_第16讲
    使用fetch代替ajax请求 post传递方式
    react购物车demo
    react-redux异步数据操作
    redux模块化demo
  • 原文地址:https://www.cnblogs.com/xubing-613/p/6908186.html
Copyright © 2011-2022 走看看