BootStrap基础

最新推荐文章于 2023-05-08 17:53:24 发布

weixin_44606322

最新推荐文章于 2023-05-08 17:53:24 发布

阅读量399

点赞数 1

分类专栏：网页基础 BootStrap 文章标签： BootStrap基础简介 BootStrap基础用法

本文链接：https://blog.csdn.net/weixin_44606322/article/details/89282573

版权

网页基础同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

BootStrap

1 篇文章 0 订阅

订阅专栏

BootStrap简介

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架

为什么使用 Bootstrap

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

Bootstrap 包的内容

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

BootStrap获取

下载bootstrap-3.3.7-dist.zip

目录结构

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

使用CDN

CDN基本模板

<!--开发要认真 三思而后行 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 兼容定义 针对IE以最高级模式渲染文档 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--适配 设备物理宽搞 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap CSS样式引入 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

概览

HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。
在项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>
<html lang="zh-CN">
...
</html>

移动设备优先

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

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

禁止缩放

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

布局容器

container 类用于固定宽度并支持响应式布局的容器。

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

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

栅格系统

栅格系统 GridSystem

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局

行必须防止在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
栅格参数

基本结构

<div class="container">
<div class="row">
<div class="col-*-*">
</div>
<div class="col-*-*">
</div>
</div>
<div class="row">...</div>
</div>
<div class="container-fluid">....</div>

根据参数更改列形式

列偏移

<div class="col-md-1 col-md-offset-1">hhh</div>

列嵌套

<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-1">hhh</div>
</div>
</div>
</div>

列排序

<div class="row">
<div class="col-md-2 col-md-push-10">hhh2</div>
<div class="col-md-4 col-md-pull-2">hhh4</div>
<div class="col-md-6 col-md-pull-2">hhh6</div>
</div>

排版

标题

<p>标题</p>
<p class="h1">标题</p>

<h1>新标题<small>zzy</small></h1>
<h1>新标题<span class="small">zzy</span></h1>

页面主题

<p>普通显示</p>
<p class="lead">突出显示</p>
这是<mark>内联文本</mark>
这是<del>被删除文本</del>
这是<s>无用文本</s>
这是<ins>插入文本</ins>
这是<u>下划线文本</u>
这是<strong>着重文本</strong>
这是<i>斜体文本</i>
这是<em>强化文本</em>

对齐

<p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>

大小写

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

无样式列表

<ul class="list-unstyled">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

表格

table用于设置表格样式
table-striped用于设置表格隔行变色
table-bordered用于给表格添加边框
table-hover用于设置光标移动到上面时变化
table-condensed用于设置比较紧凑的表格
行或单元格的可选类
使用下列类可以使行的背景色变化，从而表达一定含义。向添加.success、.error、.warning、.info。

基本表格

<table class="table">
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

斑马线表格

<table class="table table-striped">
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

边框表格

<table class="table table-striped table-bordered">
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

鼠标悬停

<table class="table table-striped table-bordered table-hover">
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

紧缩内部

表头	表头	表头
单元格	单元格	单元格
单元格	单元格	单元格

状态设置

<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th class="active">表头</th>
<th class="success">表头</th>
<th class="info">表头</th>
</tr>
<tr>
<td class="warning">单元格</td>
<td class="info">单元格</td>
<td class="danger">单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

响应式表格–内容过多，结合滚动条显示

<div class="table-responsive" style="width: 100px;height: 100px;">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th class="active">表头</th>
<th class="success">表头</th>
<th class="info">表头</th>
</tr>
<tr>
<td class="warning">单元格</td>
<td class="info">单元格</td>
<td class="danger">单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</div>

表单

基本表单

单独的表单控件会被自动赋予一些全局样式。
所有设置了 .form-control 类的、和元素都将被默认设置宽度属性为 width: 100%;

<form>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>

内联表单

用户名：

密码:

<form class="form-horizontal">
<div class="form-group row">
<label for="username" class="col-md-1 col-md-offset-1 ">用户名：</label>
<div class="col-md-5">
<input type="text" class="form-control " id="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-1 col-md-offset-1 ">密码:</label>
<div class="col-md-5">
<input type="password" class="form-control" id="password">
</div>
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>

按钮

可作为按钮使用的标签或元素
为、或元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

预定义样式

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

尺寸

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>

激活、禁用状态

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

图片

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

代码

内联代码

<code>&lth1&gt</code>

代码块

<pre>
function func()
{
return "success";
}
</pre>

辅助类

情境文本颜色

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p

情境背景色

...

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号

<span class="caret"></span>

组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

字体图标

图标基类和子类之间必须有空格

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-lock"></span>

下拉菜单

<!-- 最外层类dropdown 包含 -->
<div class="dropdown">
<!-- data-toggle="dropdown" 确定下拉项目 -->
<button type="button" class="btn btn-info" data-toggle="dropdown">
下拉列表
<span class="caret"> </span>
</button>
<!-- dropdown-menu确定下拉内容 -->
<ul class="dropdown-menu">
<!-- 类dropdown-header确定分组 -->
<li class="dropdown-header">第一组</li>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
<!-- 类divider分割线 -->
<li class="divider"></li>
</ul>
</div>

标签页

<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">首页</a></li>
<li role="presentation"><a href="#">API</a></li>
<li role="presentation"><a href="#">DownLoad</a></li>
</ul>

胶囊式标签页、垂直显示

<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">首页</a></li>
<li role="presentation"><a href="#">API</a></li>
<li role="presentation"><a href="#">DownLoad</a></li>
</ul>

带有下拉菜单的导航

<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
</ul>

巨幕

<div class="jumbotron">
<h1>巨幕标题</h1>
<p>...正文</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

分页

<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

警告框

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

JavaScript 插件

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

弹出框

手动初始化

$(function () {
$('[data-toggle="popover"]').popover()
})

上下左右

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="left"
data-content="弹出框">
左侧
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="top"
data-content="弹出框">
顶部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="bottom"
data-content="弹出框">
底部
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
data-placement="right"
data-content="弹出框">
右侧
</button>

警告框

基本警告框

<div class="container">
<div class="alert alert-warning fade in" id="win">警告框
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>

关闭警告框

$("#win").alert('close');

模态窗口

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
打开模态窗口
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div class="modal-body">
...***************
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>

提示信息

<a href="#" data-toggle="tooltip" title="显示信息">Hover over me</a>
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
显示信息。。。
</div>
</div>

weixin_44606322

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
BootStrap基础

BootStrap简介Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架为什么使用 Bootstrap移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的主流浏览器都支持 Bootstrap。容易上手：只要具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。响应式设计：Bootstrap ...
复制链接

扫一扫