2.Bootstrap常用样式

1.标题

Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签 <h1> ~ <h6> ，只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，

为了让非标题元素和标题使用相同的样式，还特意定义了 .h1 ~ .h6 六个类名。同时后面可以紧跟着一行小的标题 <small></small> 或使用 .small

2.段落

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

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

3.强调

定义了一套类名，这里称其为强调类名，这些强调嘞都是通过颜色来表示强调，具体说明如下：

.text-muted：提示，使用浅灰色(#999)
.text.primary ：主要，使用蓝色(#428bca)
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色(#31708f)
text-warning：警告，使用黄色(#8a6d3n)
text-danger：危险，使用褐色(#a94442)

4.对齐效果

　　在CSS中常常使用text-align 来实现文本的对齐风格的设置。

　　其中主要有4种风格

　　 left 左对齐

　　 right 右对齐

　　 center 居中对齐

　　 justify 两端对齐

　　Bootstrap 中通过定义四个类名来控制文本的对齐风格

　　 text-left 左对齐

　　 text-right 右对齐

　　 text-center 居中对齐

　　 text-justify 两端对齐

5.列表

无序列表（ul）有序列表（ol）

　　移除了默认的 list-style 样式，也就是去掉了原无序列表前面的点 (去掉项目符号(编号))

　　给列表添加class="list-inline"，把垂直列表换成水平列表，而且去掉项目符号(编号)，将所有元素放置于同一行。也可以说内联列表就是为了制作水平导航而生的。

自定义列表（dl <dt><dd>）

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

6.代码

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

使用<code></code> 来显示单行内联代码
使用<pre></pre> 来显示多行块代码
样式pre-scrollable(height，max-height 高度固定为340px，超过则存在滚动条)
使用<kbd></kbd> 来显示键盘快捷键
显示htmL标签的代码需要适应字符实体，小于号(<）要使用硬编码“⁢”来替代，大于号(>)使用">”来替代

7.表格

　　class = "table" ：基础表格

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

tr、th、td样式

active	将悬停的颜色应用在行或者单元格上
success	表示成功的操作
info	表示信息变化的操作
warning	表示一个警告的操作
danger	表示一个危险的操作

7.表单

　　文本框和下拉框

class="form-control" 表单元素的样式下拉选择框select多个选择设置multiple="multuple"
class="input-lg" ：表单控件较大
class="input-sm" ：表单控件较小

　　单选框和复选框

垂直显示(给input标签加)：class="radio"
水平显示(给label标签加)：class="radio-inline"
垂直显示(给div标签加)：class="checkbox"
水平显示(给div标签加)：class="checkbox-inline"

　　按钮

基础样式(给button标签加)：class="btn"

class="btn btn-default" 默认样式Default
class="btn btn-primary" 首选项Primary
class="btn btn-success" 成功Success
class="btn btn-info" 一般信息Info
class="btn btn-warning" 警告Warning
class="btn btn-danger" 危险Danger
class="btn btn-link" 链接Link

多标签支持：使用 a div input 等制作按钮

注意：

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。

如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

我们总结的最佳实践是：强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

设置按钮大小

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

class="btn-lg" 大按钮
class="btn-sm" 小按钮
class="btn-xs" 超小按钮

　　为 <button> 元素添加 disabled="disabled" 属性，使其表现出禁用状态，样式添加disable看起来被禁用。

　　表单布局

　　　　基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

　　　　向父元素<form> 元素添加 role="form"

　　　　把标签和控件放在一个带有 class="form-group" 的<div> 中。这是获取最佳间距所必需的

　　　　向所有的文本元素 <input> 、<textarea> 、select 添加 class="form-control"

　　　　内联表单（水平布局）, 它的所有元素是内联的，向左对齐的，标签是并排的，向 <form> 标签添加 class="form-inline"

8.缩略图

　　字体图标

在我们下载的 Bootstrap 加压文件中有 fonts 文件夹，里面就是我们的字体图标
只需将 fonts 文件夹复制到我们的项目红，我们就可以使用字体图标了
字体图标类名地址查看，需要时去复制即可：https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

<span class="字体图标类名"> 字体图标 </span>

缩略图的使用

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式
使用 Bootstrap 创建缩略图的步骤如下：
在图像周围添加带有 class="thumbnail" 的 <a> 标签。
这会添加四个像素的内边距（padding）和一个灰色的边框。
当鼠标悬停在图像上时，会动画显示出图像的轮廓。

<body>
    <div class="container">
        <div class="col-sm-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="img/timg.jpg" alt="通用的占位符缩略图">
            </a>
        </div>
    </div>
</body>

自定义内容

现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：
把带有 class="thumbnail" 的 <a> 标签改为 <div>。
在该 <div>内，您可以添加任何您想要添加的东西。由于这是一个 <div>，我们可以使用默认的基于 span 的命名规则来调整大小。
如果您想要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。

面板

　　面板组件用于把 DOM 组件插入到一个盒子中

　　创建一个基本的面板，只需要向 <div> 元素添加 class="panel panel-default" 即可

　　默认的 .panel 组件所做的只是设置基本的边框 border 和內补 padding 来包含内容

<div class="panel panel-default"> 
    <div class="panel-body"> 这是一个基本的面板 </div> 
</div>

　　给盒子添加 class="panel-heading" 可以很简单地向面板添加标题。

　　给盒子添加 class="panel-body" 可以向面板添加主题内容

<div class="panel panel-warning">
    <div class="panel-heading">
        <h2>明星合集</h2>
    </div>
    <div class="panel-body">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/timg.jpg" alt="...">
                <h3>高圆圆</h3>
                <p>出生于北京市，中国内地影视女演员、模特。</p>
                
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>
    </div>
</div>

posted on 2021-11-29 13:53 冰冰点灯阅读(1384) 评论(0) 编辑收藏举报

无序列表（ul）有序列表（ol）

自定义列表（dl <dt><dd>）

tr、th、td样式

设置按钮大小

内联表单（水平布局）, 它的所有元素是内联的，向左对齐的，标签是并排的 ，向 <form> 标签添加 class="form-inline"

面板

　　　　内联表单（水平布局）, 它的所有元素是内联的，向左对齐的，标签是并排的，向 <form> 标签添加 class="form-inline"