Python Day60-63 Bootstrap 的介绍和使用
1 Bootstrap 中文官网地址
http://v3.bootcss.com/css/
2 导入方式
- 在线导入：
CDN 导入 bootstrap BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议） 访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。
- 本地导入：
下载到本地 link rel="stylesheet" src="本地css"
3 设置html 文档模板
- strongHTML5 文档类型： html lang="zh-CN"
- 移动设备优先:
确保适当的绘制和触屏缩放，需要在 head 之中添加 viewport 元数据标签。 meta name="viewport" content="width=device-width, initial-scale=1"
- IE 兼容模式
Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下， 建议将此 标签加入到你的页面中：meta http-equiv="X-UA-Compatible" content="IE=edge"
<!DOCTYPE html>
<html lang="en">
<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>Title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
4 布局：
布局容器
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
手机
.col-xs-12
平板
.col-sm-6
电脑
.col-md-8
超大屏
.col-lg-8
栅格系统
流式：
row 必须放到 container和 container-fluid 里面
col 放在 row
不同的设备：
col-md-6 col-xs-4
col-md-6 col-xs-8
列嵌套
container -- 有一个 15px的padding
里面的 内标签 可以 设置 margin -15px
clearfix <div class="clearfix"></div>
另起一行
列偏移：
col-md-offset-3
列排序：
col-md-3 col-md-push-9
排版实例：
<h1> 到 <h6>
<small>Secondary text</small>
中心内容 加粗
通过添加 .lead 类可以让段落突出显示。
<p class="lead">sadsadasdsadsa</p>
高亮：
<mark>highlight</mark>
被删除：
<del>This line of text is meant to be treated as deleted text.</del>
没用的标签：
<s>This line of text is meant to be treated as no longer accurate.</s>
插入标签：
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的标签：
<u>This line of text will render as underlined</u>
小号文本
<small>This line of text is meant to be treated as fine print.</small>
着重
<strong>rendered as bold text</strong>
斜体
<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>
改变大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
缩略语
<abbr title="attribute">attr</abbr>
首字母缩略语
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
引用 左边有一条竖线
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
多种引用样式
命名来源
<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 class="blockquote-reverse">
...
</blockquote>
列表 ：
无序列表
<ul>
<li>...</li>
</ul>
有序列表
<ol>
<li>...</li>
</ol>
无样式列表
<ul class="list-unstyled">
<li>...</li>
</ul>
内联列表
<ul class="list-inline">
<li>...</li>
</ul>
描述
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描述
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
内联代码
通过 <code> 标签包裹内联样式的代码片段。
<code><section></code>
用户输入
通过 <kbd> 标签标记用户通过键盘输入的内容。
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
代码块
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
<pre><p>Sample text here...</p></pre>
变量
通过 <var> 标签标记变量。
y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
程序输出
通过 <samp> 标签来标记程序输出的内容。
<samp>This text is meant to be treated as sample output from a computer program.</samp>
表格:
基本实例
<table class="table">
...
</table>
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<table class="table table-striped">
...
</table>
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-bordered">
...
</table>
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">
...
</table>
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<table class="table table-condensed">
...
</table>
状态类
通过这些状态类可以为行或单元格设置颜色。
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
响应式表格:
其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
表单
基本实例
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
Bootstrap3居中处理：
水平居中：
- .center-block 不涉及到列的居中 本质上就是 margin: 0 auto
让那个标签居中就把它写在哪个标签的样式类中
- 我们自定义的居中 在涉及到列的居中时使用
.col-centered {
float: none;
margin: 0 auto;
}
- 文本类居中或者display: inline
.text-center
垂直居中：
.vertical-center {
display: flex;
align-items: center;
}
用在父标签中，让子块级标签垂直居中
Bootstrap组件：
图标：
span标签，里面加上样式类
glyphicon glyphicon-piggy-bank
下拉菜单： 后面我们就要用到bootstrap.js --> 之前还要引用jQuery.js
按钮组
.btn-group
.btn-toolbar
尺寸
分列式下拉菜单按钮
.css 和.min.css的区别是：
.min.css是压缩版的，用于生产环境的，因为它把多余的空格都去掉了，体积很小
.css 是没有压缩的
我们现在是开发阶段，用哪个都可以
.min.js
.js
同上
js文件我们通常放在body标签里面的最下面
除非你的js代码就必须在文档加载之前运行，这个时候要放在head标签里面
导航
******
<!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, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<!--导航区开始-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!--导航区结束-->
<!--面板区开始-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
<div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
<div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
</div>
<!--面板区结束-->
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
<!--导航区开始-->
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!--导航区结束-->
<!--面板区开始-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
<div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
<div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
</div>
<!--面板区结束-->
.nav-tabs --> tab式
.nav-pills --> 胶囊式
.nav-justified --> 两端对齐
导航条
.navbar-btn
.navbar-text
.navbar-left .navbar-right --> 在导航条里面用左右浮动的化需要使用这俩个
.navbar-link
**导航条不需要放在.container里面**
.navbar-fixed-top --> 固定在顶部
如果使用了上面固定在顶部的样式，那么就需要给body设置padding
body { padding-top: 70px; }
.navbar-static-top --> 静止在顶部
.navbar-inverse --> 反色
面包屑导航/路径导航
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分页
翻页
标签
.label
徽章
微信未读消息
个人中心通知的提示
巨幕
铺满整个屏幕
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
页头
缩略图 --> 前女友的页面
进度条
应用场景：
- 上传下载加载
- 体现步骤进度
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
.progress-bar-striped 条纹状进度条
动起来
.active
颜色
.progress-bar-success
.progress-bar-warning
.progress-bar-info
.progress-bar-danger
媒体对象
后面写项目会用到
.media-left
.media-body
.media-right
头像的位置：
.默认
.media-middle --> 中间
.media-bottom --> 底部
列表组
外面的div加这个样式： .list-group
里面的元素加这个样式: .list-group-item
面板
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">这里写标题</h3>
</div>
<div class="panel-body">
这里面是内容
</div>
<div class="panel-footer">Panel footer</div>
</div>
