文章

Bootstrap第一小节

文章目录

下载 Bootstrap

Bootstrap 安装是非常容易的,你可以从 Bootstrap官网 上下载 Bootstrap 的最新版本。
为了更方便的使用,你可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。
已编译的 CSS 和 JS(bootstrap.),以及已编译压缩的 CSS 和 JS(bootstrap.min.)。同时也包含了 Glyphicons 的字体,这是一个可选的 Bootstrap 主题。

Bootstrap CDN 推荐

您也可以选择不下载Bootstrap,直接使用 Bootstrap CDN库,国内推荐使用 BootCDN 上的库。

具体使用如下:

<!-- Bootstrap核心CSS文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件,务必在bootstrap.min.js之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

此外,您还可以使用以下的 CDN 服务:

国内推荐使用 : https://www.staticfile.org/
国际推荐使用:https://cdnjs.com/

Bootstrap CSS 概览

在本节中,我们主要概述一下 Bootstrap 的一些CSS特性。

HTML 5 文档类型(Doctype)
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要声明 HTML5 文档类型(Doctype)。

因此,请在使用 Bootstrap 项目中包含下面的代码段。

<!DOCTYPE html>
<html>
    ....
</html>

提示:使用 Bootstrap 创建网页时,如果不在开头声明 HTML5 的文档类型,则会出现一些不可预测的浏览器显示问题。

移动设备优先
Bootstrap 3 新增了移动设备优先的特性。

为了让 Bootstrap 3 开发的网页更好的兼容移动设备,确保绘制和触屏的正常使用,需要在网页的 head 中添加 viewport meta 标签。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

页面排版 - 标题

标题
Bootstrap 对 HTML 标题 (h1 ~ h6) 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class= (.h1 ~ .h6) 来实现相同的功能。

内联元素使用标题字体:

<span class="h1">Bootstrap</span>

注:使用 Bootstrap 后,网页的字体颜色、字体样式、行高均被固定了,保证其统一。

不使用 Bootstrap 时,字体样式会根据系统内置的首选字体决定。

在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题,如下所示:

<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>

下表列出了一些内联文本元素:

页面排版 - 页面主体

页面主体
Bootstrap 将页面主体设置默认为:

font-size:14px;

line-height:20px

<p>标签行高:10px

颜色:#333;

通过添加 .lead 类可以让段落突出显示:

<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p class="text-left">Bootstrap 框架</p>
<p class="text-justify">Bootstrap 框架</p>

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

我们还可以通过以下类来设置英文文本大小写,实例如下:

<p class="text-lowercase">小写hello WORLD</p>
<p class="text-uppercase">大写hello WORLD</p>
<p class="text-capitalize">首字母大写hello WORLD</p>

页面排版 - 缩略语

缩略语:当我们把鼠标悬停在缩略语上可看到完整的内容。

这里是一个缩略语的例子:

<abbr title="World Wide Web">WWW</abbr>


鼠标放到 www 上面时会变成带有“问号”的指针,并会显示 title 中的内容。

页面排版 - 引用文本

引用文本
我们将任何HTML元素包裹在

<

blockquote>中即可表现为引用样式。

标签为例,将文本设置为引用的代码如下:

<blockquote>
    <p>Bootstrap 框架 - W3Cschool </p>
</blockquote>

添加.blockquote-reverse 类可以让引用内容呈现右对齐。

代码:

<blockquote class="blockquote-reverse">
    <p>Bootstrap 框架 - W3Cschool </p>
</blockquote>

下面来看一份我的学习笔记:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- Bootstrap核心CSS文件 -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery文件,务必在bootstrap.min.js之前引入 -->
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <!-- Bootstrap核心JavaScript文件 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title></title>
    </head>
    <body>
        <span class="h1">MyBlog<small>时间是自称能治百病的庸医</small></span>
        <!-- <span class="h1">Bootstrap</span> -->
        <p>Bootstrap 框架</p>
        <p class="lead">lead段落突出</p>
        <p>Bootstrap 框架</p>
        <p class="text-left"><mark>左对齐 + mark标记</mark></p>
        <p class="text-right">右对齐</p>
        <p class="text-center"><s><strong>居中+s删除线+strong加粗</strong></s></p>
        <p class="text-right"><em>右对齐+em倾斜</em></p>
        <p class="text-uppercase">english-text-uppercase转换为大写</p>
        <p class="text-lowercase">English-text-lowercase转换为小写</p>
        <p class="text-lowercase">English-text-lowercase转换为小写</p>
        <abbr title="我测试一下abbr标签">测试标签</abbr>
        <blockquote class="blockquote">
            这是一个blockquote块引用标签,默认为左对齐-在blockquote标签内加上class属性为blockquote-reverse可以实现右对齐
        </blockquote>
        <ul class="list-inline">
            <li>Coffee</li>
            <li>- black hot drink</li>
        </ul>
        <dl class="dl-horizontal">
            <dt>Coffee</dt>
            <dd>- black hot drink</dd>
            <dd>- dl-horizontal经测试不会显示为一行</dd>
            <br>
        <ul>
            <li>Coffee</li>
            <li>- black hot drink</li>
            <li>- 这里是正常的li标签显示</li>
        </ul>

        <ul class="list-unstyled">
            <li>Coffee</li>
            <li>- black hot drink</li>
            <li>- 这里的ul在class添加了unstyled属性,就不再显示换行的缩进与圆点了</li>
        </ul>
        <code><section></code>
        <pre><p>Please input...</p></pre>
        <blockquote>
            <span>请确保使用 <pre> 和 <code> 标签时,开始和结束标签使用了 unicode 转义字符: <b><</b>和<b>></b> </span>
        </blockquote>

    </body>
</html>

他们的显示是这样的(如果看不见了也没关系,我使用了外链图片)

表格

        表格是 Bootstrap 的一个基础组件之一, 

在使用 Bootstrap 的表格过程中,只需要添加对应的类名就可以得到不同的表格风格。

下表列出了 Bootstrap 为表格不同的样式风格提供的一些类:

类名 描述
.table
基本的表格
.table-striped
条纹状表格
.table-bordered
带边框的表格
.table-hover
当指针悬停在行上时会实现背景效果的表格
.table-condensed
紧凑型表格
.table-responsive
响应式表格

条纹状表格其效果与基础表格相比,仅是在 tbody 隔行有一个浅灰色的背景色。

表格效果需要基于基本格式 .table

紧凑型表格与基础表格差别不大,只是将单元格的内距由 8px 调至 5px 。

表格效果需要基于基本格式 .table

将任何.table元素包裹在.table-responsive元素内,即可创建响应式表格。

其会在小屏幕设备上(小于768px)水平滚动,当屏幕大于 768px 宽度时,水平滚动条消失。

<table class="table  table-bordered">

            <thead>

            <tr>

                <th>产品</th>

                <th>付款日期</th>

                <th>状态</th>

            </tr>

            </thead>

            <tbody>

            <tr>

                <td>产品1</td>

                <td>23/05/2019</td>

                <td>待发货</td>

            </tr>

            <tr>

                <td>产品2</td>

                <td>13/05/2019</td>

                <td>发货中</td>

            </tr>

            </tbody>

        </table>

状态类

Bootstrap 为表格的行元素

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

具体如下所示:

设置一行的背景样式,只需要在

元素中添加上对应的类名:

<tr class="success">

按钮

多标签支持

Bootstrap 框架中的另一核心部分——按钮。

任何带有 .btn 类的元素都会继承圆角灰色按钮的默认外观。
可作为按钮使用的标签或元素

你可以在 a、button 或 input元素上添加类名 btn(如果不添加是不会有任何按钮效果)。

如下:

<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">

注意事项有三点:

虽然按钮类可以应用到其他标签元素上,但是导航和导航条组件只支持 button 元素。
如果 a 元素被作为按钮使用,并用于在当前页面触发某些功能 而不是用于链接页面,那么请为其设置 role="button" 属性。
建议在 button 元素上使用按钮类,避免跨浏览器的不一致性问题。


预定义样式:

在基础按钮风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。

以信息样式的按钮为例,代码如下:

<button class="btn btn-info">Button</button>
其他样式说明:
btn-default 默认样式        btn-success 成功样式     
btn-warning 警告样式      btn-danger 危险样式
btn-primary 首选项样式   btn-link 链接样式

尺寸大小
下面是尺寸从大到小的按钮:

<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度。

代码:

<button class="btn btn-block">Button</button>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度。

代码:

<button class="btn btn-block">Button</button>

激活状态

按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。

代码:

<button class="btn active">Button</button>

禁用状态
在 Bootstrap 框架中,要禁用按钮有两种实现方式:

在标签中添加disabled属性
在元素标签中添加类名 disabled
通过 disabled 属性禁用按钮:

<button class="btn" disabled="disabled">button</button>

通过添加类 disabled 禁用按钮:

<button class="btn disabled">button</button>

运行结果:

原文来自:Bootstrap第一小节,尊重自己,尊重每一个人;转发请注明来源!
0 0

发表评论