【Bootstrap】＜前端框架＞Bootstrap常用样式 - 排版

2024-01-21 100

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、标题：

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>

编辑

二、段落：

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

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

编辑

<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>

编辑

四、对齐效果：

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

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

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

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

编辑

五、列表：

在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>

2.内联列表：

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

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

3.定义列表：

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

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

编辑

六、代码：

一般在个人博客上使用较为频繁，用于显示代码的风格。在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>

编辑

七、表格：

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

基础样式：

.table：基础表格

附加样式：

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

tr、th、td样式：

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

编辑

<!-- 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>