【Bootstrap】<前端框架>Bootstrap常用样式 - 排版

简介: 【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版

 目录

一、标题:

二、段落:

三、强调:

四、对齐效果:

五、列表:

1.去点列表:

2.内联列表:

3.定义列表:

六、代码:

七、表格:


一、标题:

       Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只是Bootstrap覆盖了默认的样式,使用其所在浏览器下显示的效果一样。为了让非标题标签元素和标题使用相同的样式,还特意定义了.h1- .h6六个类名。同时,后面还可以跟着一个小的副标题<small></small>或使用 .small

<body>
    <!-- Bootstrap定义的标题标签 -->
    <h1>标题1(使用h1标签)</h1>
    <div class="h1">标题1(使用.h1类名)</div>
    <div class="h1">标题1<small>这是一个由small定义的副标题</small></div>
    <div class="h3">标题1<small>这是一个由small定义的副标题</small></div>
  </body>

image.gif

image.gif编辑


二、段落:

       段落是排版中另一个重要元素之一。通过.lead 来突出强调的内容。其作用就是增大文本字号,加粗文本内容,而且对行高和margin也做相应的处理。可以使用下标签给文本给文本做突出样式处理:

<p class="lead">
    <small>以后的你</small><b>会</b><i>感谢</i><em>现在</em><strong>努力</strong>的你!
</p>

image.gif

image.gif编辑

    • <small>:小号字
    • <b>,<strong>:加粗
    • <i>,<em>:斜体

    三、强调:

           Bootstrap定义了一套类名,这里称为强调类名,这些强调类都是通过颜色来起强调作用。

      • text-muted:提示,使用浅灰色(#999)
      • text-primary:主要,使用蓝色(#428bca)
      • text-success:成功,使用浅绿色(#3c783d)
      • text-info:通知信息,使用浅蓝色(#31708f)
      • text-warning:警告,使用黄色(#8a6d3b)
      • text-dager:危险,使用褐色(#a94442)
      <!-- 
            text-muted:提示,使用浅灰色(#999)
            text-primary:主要,使用蓝色(#428bca)
            text-success:成功,使用浅绿色(#3c783d)
            text-info:通知信息,使用浅蓝色(#31708f)
            text-warning:警告,使用黄色(#8a6d3b)
            text-danger:危险,使用褐色(#a94442)
           -->
          <div class="text-muted">提示效果</div>
          <dic class="text-primary">主要效果</dic>
          <div class="text-success">成功效果</div>
          <div class="text-info">信息效果</div>
          <div class="text-waring">警告效果</div>
          <div class="text-danger">危险效果</div>

      image.gif

      image.gif编辑


      四、对齐效果:

             在CSS中常常使用text-align来实现文本的对齐风格设置。其中主要的四种风格:

        • 左对齐,left
        • 居中对齐,center
        • 右对齐,right
        • 两端对齐,justify

               为了简化操作,Bootstrap通过定义四个类名来控制文本的对齐风格:

          • text-left:左对齐
          • text-center:居中对齐
          • text-right:右对齐
          • text-justify:两端对齐

          image.gif编辑


          五、列表:

                 在HTML中,列表结构主要有三种:

            • 无序列表:(<ul><li>...</li></ul>)
            • 有序列表:(<ol><li>...</li></ol>)
            • 定义列表:(<dl><dt>...</dt><dd>...</dd></dl>)

            1.去点列表:

                   class="list-unstyled"

            <ul class="list-unstyled">
                <li>无序列表一</li>
                <li>无序列表二</li>
            </ul>

            image.gif

            2.内联列表:

                   class="list-inline",把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。内联列表是为制作水平导航而生

            <ul class="list-inline">
                <li>首页</li>
                <li>java</li>
                <li>c++</li>
            </ul>

            image.gif

            3.定义列表:

                   在原有的基础上加入了一些样式,使用样式class="dl-horizontal",制作水平定义列表:当标题宽度超过160px时,会显示三个省略号。

            <dl class="dl-horizontal">
                  <dt>情绪</dt>
                  <dd>如果一个人影响到了你的情绪,你的焦点应该放在控制自己的情绪上,而不是影响你情绪的人身上。只有这样,才能真正自信起来。</dd>
                  <dt>立志</dt>
                  <dd>不怕变成自己厌恶的人,我怕的是,过的还不如他们。</dd>
                  <dt>带着面具时你说我虚伪,摘下面具你问我是谁。</dt>
                  <dd>无论受了多少委屈。我只会把它憋在心里。不是不想说,只是不知道该怎么说,能和谁说。</dd>
                </dl>

            image.gif

            image.gif编辑


            六、代码:

                   一般在个人博客上使用较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格:

              • 使用<code></code>,来显示单行内联代码
              • 使用<pre></pre>,来显示多行代码。样式:pre-scrollable(height)max-height高度固定为340px,超过存在滚动条
              • 使用<kbd><kbd>,来显示用户输入的代码,如快捷键
              <!doctype html>
              <html lang="zh-CN">
                <head>
                  <meta charset="utf-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <title>Bootstrap 101 Template</title>
                  <!-- 加载BootStrap CSS样式 -->
                  <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.min.css">
                </head>
                <body>
                  <!-- 键盘按键 -->
                  <p>键盘快捷键<kbd>ctrl</kbd> + <kbd>/</kbd></p>
                  <!-- 单行代码 -->
                  <p>输出“你好世界!” : <code>system.out.println("你好世界!");</code></p>
                  <hr>
                  <!-- 多行代码 -->
                  <pre>
                    public class MyClass {
                      public static void main(String[] args){
                          System.out.println("你好世界!");
                      }
                    }
                  </pre>
                  <hr>
                  <!-- 滚动条 -->
                  <pre class="pre-scrollable">
                    public class MyClass {
                      public static void main(String[] args){
                          System.out.println("你好世界!");
                      }
                    }
                    public class MyClass {
                      public static void main(String[] args){
                          System.out.println("你好世界!");
                      }
                    }
                    public class MyClass {
                      public static void main(String[] args){
                          System.out.println("你好世界!");
                      }
                    }
                    public class MyClass {
                      public static void main(String[] args){
                          System.out.println("你好世界!");
                      }
                    }
                    public class MyClass {
                      public static void main(String[] args){
                          System.out.println("你好世界!");
                      }
                    }
                    public class MyClass {
                      public static void main(String[] args){
                          System.out.println("你好世界!");
                      }
                    }
                  </pre>
                </body>
                <!-- 引入需要的JavaScript文件 -->
                <script src="../bootstrap-3.4.1/js/jquery.js"></script>
              </html>

              image.gif

              image.gif编辑


              七、表格:

                     Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格:

              基础样式:

                • .table:基础表格

                附加样式:

                  • .table-striped:斑马线表格
                  • .table-bodered:带边框的表格
                  • .table-hover:鼠标悬停高亮表格
                  • .table-condensed:紧凑型表格,单元格没有内距或者内距较其它表格小

                  tr、th、td样式:

                         Bootstrap提供了五种不同的类名,每种类名控制了行的不同背景颜色

                  image.gif编辑

                  <!-- On rows -->
                  <tr class="active">...</tr>
                  <tr class="success">...</tr>
                  <tr class="warning">...</tr>
                  <tr class="danger">...</tr>
                  <tr class="info">...</tr>
                  <!-- On cells (`td` or `th`) -->
                  <tr>
                    <td class="active">...</td>
                    <td class="success">...</td>
                    <td class="warning">...</td>
                    <td class="danger">...</td>
                    <td class="info">...</td>
                  </tr>

                  image.gif


                  相关文章
                  N..
                  |
                  25天前
                  |
                  开发框架 前端开发 容器
                  Bootstrap排版
                  Bootstrap排版
                  N..
                  12 0
                  |
                  3月前
                  |
                  编解码 移动开发 前端开发
                  【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
                  【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
                  |
                  4月前
                  |
                  前端开发 JavaScript
                  Web前端之移动端课程开发之06.bootstrap
                  Web前端之移动端课程开发之06.bootstrap
                  46 0
                  |
                  6月前
                  |
                  前端开发
                  前端基础 - Bootstrap简单案例
                  前端基础 - Bootstrap简单案例
                  40 0
                  |
                  6月前
                  |
                  前端开发 JavaScript 容器
                  前端基础 - Bootstrap简介
                  前端基础 - Bootstrap简介
                  31 0
                  |
                  6月前
                  |
                  前端开发
                  |
                  29天前
                  |
                  前端开发
                  bootstrap样式代码案例
                  bootstrap样式代码案例
                  11 0
                  |
                  29天前
                  |
                  前端开发 JavaScript 容器
                  bootstrap样式
                  bootstrap样式
                  10 0
                  |
                  1月前
                  |
                  前端开发
                  uni-app中基于bootstrap的css样式
                  uni-app中基于bootstrap的css样式
                  22 0