Bootstrap(WEB框架)

框架学习

发布时间 : 2022-08-12 16:23

字数:4.3k 阅读 :

Bootstrap（Web框架）

简介

Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得Web开发更加快捷，Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成， Bootstrap——经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC (微软全国广播公司)的Breaking News都使用了该项目

访问bootstrap官网：https://v3.bootcss.com/

bootstrap是套现成的css效果祥式集合
bootstrap是最受欢迎的HTM, cssfavyaScript框架，用于开发响应式布局（一个网站能够兼容多个终端）、移动设备优先的WEB项目
bootstrap特别适合没有设计师的团队，可以快速的写出一个网页

内容

甚本结构: Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构，这将在Bootstrap基本结构部分详细讲解。
CSS: Bootstrap自带以下特性:全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统，这将在Bootstrap CSS部分详细讲解。
组件: Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等，这将在布局组件部分详细讲解。
JavaScript插件: Bootstap包含了十几个自定义的jQuery插件。您可以直接包含所有的插件，也可以逐个包含这些插件，这将在Bootstrap插件部分详细讲解
定制:您可以定制ootstrp的组件、LESS 变是和jQuery插件来得到您自己的版本

BootstrapCDN

使用cdn可以直接获取互联网资源

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

基本模板

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap 通过文件形式引入配置 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>
<body>
<h1>你好，世界！</h1>

<script src="jQuery/jquery-1.7.2.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

<div class="container" style="background-color: #e8e8e8;height: 100px">
    固定宽度
</div>

<div class="container-fluid" style="background-color: #e8e8e8;height: 100px">
    占据全部
</div>

页面布局样式：https://v3.bootcss.com/css/?#tables-responsive

搜索框样式

<div class="form-inline">
    <div class="form-group">
        <label for="exampleInputEmail1">查询员工</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="员工姓名">
    </div>
    <input type="submit" value=" 查询 ">
</div>

图标样式：https://v3.bootcss.com/components/

图标式按钮

<button style="width: 50px;height: 30px" type="button" id="编辑" class="btn btn-primary">
    <span class="glyphicon glyphicon-cog"></span>
</button>

<button style="width: 50px;height: 30px" type="button" id="删除" class="btn btn-danger">
    <span class="glyphicon glyphicon-trash"></span>
</button>

<button type="button" class="btn btn-info">（一般信息）Info</button>

配合style标签调整图标button大小

<style type="text/css">
    button
    {
        width: 50px;height: 35px
    }
</style>

表格

<form class="form-horizontal col-md-offset-2">

    <div class="form-group">
        <label for="goodsName" class="col-sm-2 control-label">商品名称</label>
        <div class="col-sm-7">
            <input type="text" class="form-control" id="goodsName" placeholder="商品名称">
        </div>
    </div>
    
</form>

内联单选框

<div class="form-group">
            <label for="goodsCate" class="col-sm-2 control-label">商品类别：</label>
            <div class="col-sm-7">
                <div class="radio" id="goodsCate">
                    <label class="radio-inline">
                        <input type="radio" name="cateId" value="1">服装服饰
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="cateId" value="2">运动器材
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="cateId" value="3">家用电器
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="cateId" value="4">电子产品
                    </label>
                </div>
            </div>
        </div>

下拉框

<div class="form-group">
    <label for="goodsBrand" class="col-sm-2 control-label">商品品牌：</label>
    <div class="col-sm-7">
        <select class="form-control" id="goodsBrand" name="brandId">
            <option>---请选择---</option>
        </select>
    </div>
</div>

缩放

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能，这样禁用缩放功能后，用户只能滚动屏幕

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

排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式：

为 body 元素设置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数
为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 container 容器，注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套

container 类用于固定宽度并支持响应式布局的容器
container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

<div class="container">
  ...
</div>

<div class="container-fluid">
  ...
</div>

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

“行（row）”必须包含在 container （固定宽度）或 container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
你的内容应当放置于列（column）内，并且，只有列（column）可以作为行（row）的直接子元素

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 col-xs-4 来创建

<div class="container" style="background-color: #e8e8e8;height: 100px">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
</div>

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C	<<	<<
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12	<<	<<	<<
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）	<<	<<	<<
可嵌套	是	<<	<<	<<
偏移（Offsets）	是	<<	<<	<<
列排序	是	<<	<<	<<

实例：从堆叠到水平排列

使用单一的一组 col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有列（column）必须放在 ”row 内。

<div class="container" style="background-color: #e8e8e8;height: 100px">
    <div class="row">
        <div class="row">
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
            <div class="col-md-1">.col-md-1</div>
        </div>
    </div>
</div>

实例：多余的列（column）将另起一行排列

如果在一个 row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

列偏移

使用 col-md-offset-* 类可以将列向右侧偏移，这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin），例如，col-md-offset-4 类将 col-md-4 元素向右侧偏移了4个列（column）的宽度

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

*列排序

通过使用 col-md-push-* 和 col-md-pull-* 类就可以很容易的改变列（column）的顺序

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题

<h1>主标题 <small> 副标题</small></h1>

中心内容

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

<p class="lead">...</p>

内联文本元素

高亮文本

Test

<mark>highlight</mark>

被删除的文本

~~Test~~

<del>This line of text is meant to be treated as deleted text.</del>

对于没用的文本使用 <s> 标签（和删除效果差不多）

~~Test~~

<s>This line of text is meant to be treated as no longer accurate.</s>

额外插入的文本使用 <ins> 标签

Test

<ins>This line of text is meant to be treated as an addition to the document.</ins>

为文本添加下划线，使用 <u> 标签

Test

<u>This line of text will render as underlined</u>

小号文本

对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%，标题元素中嵌套的 <small> 元素被设置不同的 font-size

你还可以为行内元素赋予 .small 类以代替任何 <small> 元素

Test

<small>This line of text is meant to be treated as fine print.</small>

着重

Test

<strong>rendered as bold text</strong>

斜体

Test

<em>rendered as italicized text</em>

对齐

通过文本对齐类，可以简单方便的将文字重新对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式

缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针

如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性

Test

<abbr title="attribute">attr</abbr>

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

引用

在你的文档中引用其他来源的内容

默认样式的引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式

对于直接引用，建议用 <p> 标签

Test

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多种引用样式

对于标准样式的 <blockquote>，可以通过几个简单的变体就能改变风格和内容

添加 <footer> 用于标明引用来源，来源的名称可以包裹进 <cite>标签中

Test
This test by Os467

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果

<blockquote class="blockquote-reverse">
  ...
</blockquote>

列表

无序列表

排列顺序的一列元素

Test
- test

<ul>
    <li>
      Test
      <ul>
        <li>
            test
        </li> 
      </ul>
    </li>
</ul>

有序列表

顺序的一组元素

<ol>
  <li>...</li>
</ol>

描述

带有描述的短语列表

Test: test

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行，开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自动截断

通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语，在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式

代码

内联代码

通过 <code> 标签包裹内联样式的代码片段

<section>

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容

ctrl +

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

代码块

多行代码可以使用 <pre> 标签，为了正确的展示代码，注意将尖括号做转义处理

<p>Sample text here...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条

变量

通过 <var> 标签标记变量

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序输出

通过 <samp> 标签来标记程序输出的内容

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

模态框

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以邮件至 1300452403@qq.com