Bootstrap3
作者:互联网
Bootstrap3 环境搭建
下载依赖文件
bootstrap-3.4.1
jquery-1.12.4
快速搭建Bootstrap项目
1.将下载好的Bootstrap压缩包解压到项目目录中
2.在index.html中键入如下代码进行引入
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap3环境搭建</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<h1>你好,Bootstrap3</h1>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
Bootstrap3 栅格系统
布局容器
固定宽度并支持响应式布局的容器
类 尺寸说明
.col-xs-* 手机 (<768px)
.col-sm-* 平板 (≥768px)
.col-md-* 桌面 (≥992px)
.col-lg-* 桌面 (≥1200px)
每行有12列,可以通过数字调整列宽
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap3</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.row{margin-bottom: 10px;}
.row div{border: 1px solid red;}
</style>
<div class="container-fluid">
<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 class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<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 class="row">
<div class="col-md-5">.col-md-5</div>
<div class="col-md-5">.col-md-5</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-7">.col-md-7</div>
<div class="col-md-5">.col-md-5</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-9">.col-md-9</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-10">.col-md-10</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-11">.col-md-11</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-12">.col-md-12</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
如果总列数超出12列,则超出列将进行流式布局,在下一行显示
.col-md-7 .col-md-7 如果列中设置了针对不同屏幕的类,则到达小屏幕的临界值时会使用小屏幕类,而大屏幕类将会失效 自适应屏幕 自适应屏幕 自适应屏幕 .col-*-offset-* 将列向右偏移 col-md-offset-4 .col-*-push-* 将列向右推 .col-*-pull-* 将列向左拉 .col-md-9 .col-md-push-3 .col-md-3 .col-md-pull-9 针对不同屏幕尺寸隐藏或显示页面内容超小屏幕
手机 (<768px) 小屏幕
平板 (≥768px) 中等屏幕
桌面 (≥992px) 大屏幕
桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏
.visible-md-* 隐藏 隐藏 可见
.visible-lg-* 隐藏 隐藏 隐藏
.hidden-xs 隐藏 可见 可见
.hidden-sm 可见 隐藏 可见
.hidden-md 可见 可见 隐藏
.hidden-lg 可见 可见 可见
Bootstrap3 全局类
排版
文本对齐类
文本左对齐
文本居中对齐
文本右对齐
文本两端对齐
文本不换行
文本的大小写类文本全小写
文本全大写
文本首字母大写,其余字母小写
让引用内容右对齐移除列表默认样式Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- list
- list
- list
- list
- list
- list
- list
- list
- dt-description
- dd-description
...
...
...
...
...
鼠标悬停在行或单元格上时所设置的颜色
标识成功或积极的动作
标识警告或需要用户注意
标识危险或潜在的带来负面影响的动作
标识普通的提示信息或动作
响应式表格
...
...
...
...
...
...
...
情境背景色...
...
...
...
...
关闭按钮 三角符号 快速浮动 让内容块左浮动 让内容块右浮动 让内容块居中 通过为父元素添加 .clearfix 类清除浮动(float) 显示或隐藏内容 显示内容 隐藏内容 Bootstrap3 组件 图标 下拉菜单 普通下拉菜单 上拉菜单 标题 分割线 禁用的菜单项 按钮组 基本案例 按钮工具栏 ... ... ... 尺寸 ... ... ... ... 嵌套下拉菜单 垂直排列 ... 两端对齐排列的按钮组 单按钮下拉菜单 分裂式按钮下拉菜单 输入框组 基本案例 @ 尺寸调节 ... ... ... 作为额外元素的多选框 作为额外元素的单选框 作为额外元素的按钮 作为额外元素的按钮式下拉菜单 作为额外元素的按钮组 导航 标签页 水平方向 两端对齐 胶囊式标签页 水平方向 垂直方向 两端对齐 带下拉菜单的标签页 带下拉菜单的胶囊式标签页 导航条 默认样式的导航条 带品牌图标的导航条 固定在顶部的导航条 固定在底部的导航条 静止在顶部的导航条 路径导航 分页 默认分页 禁用和激活状态 尺寸 翻页 默认实例 两端对齐链接 可选的禁用状态 标签 Default Primary Success Info Warning Danger 徽章 链接中的徽章Inbox 42
按钮中的徽章
Hello, world!
...
页头Example page header Subtext for header
缩略图 默认样式的实例 ... 自定义内容Thumbnail label
...
警告框 默认实例 ... ... ... ... 可关闭的警告框 Warning! Better check yourself, you're not looking too good. 警告框中的链接 ... 进度条 默认样式的进度条 60% Complete 带有提示标签的进度条 60% 0% 情境效果 40% Complete (success) 20% Complete 60% Complete (warning) 80% Complete (danger) 条纹效果 40% Complete (success) 动画效果 45% Complete 堆叠效果 35% Complete (success) 20% Complete (warning) 10% Complete (danger) 媒体对象 默认样式 媒体在左侧Media heading
... 媒体在右侧Media heading
... 媒体在两端Media heading
... 对齐方式 媒体顶部对齐 ... ... 媒体垂直居中对齐 ... ... 媒体底部对齐 ... ... 媒体对象列表 非嵌套列表- ... ...
- ... ... ... ... ... ... ... ...
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
- 14 Cras justo odio
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
List group item heading
...
面版 基本实例 Basic panel example 带标题的面版 Panel heading without title Panel contentPanel title
Panel content 带脚注的面版 ... Panel footer 情境效果 ... ... ... ... ... 带表格的面版 Panel heading ... ...
<table class="table"></table>
带列表组的面版
Panel heading
...
<ul class="list-group">
...
</ul>
嵌入内容
宽高比:16:9
宽高比:4:3
Bootstrap3 插件
模态框
默认样式
Modal title
... 可选尺寸 大模态框 ... 小模态框 ... 禁止动画效果的模态框 ... 使用栅格系统的模态框Modal title
... ... ... 滚动监听@fat
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
one
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
two
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
标签页<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">1...</div>
<div role="tabpanel" class="tab-pane" id="profile">2...</div>
<div role="tabpanel" class="tab-pane" id="messages">3...</div>
<div role="tabpanel" class="tab-pane" id="settings">4...</div>
</div>
工具提示
脚本
HTML
鼠标悬浮提示
鼠标悬浮提示
鼠标悬浮提示
鼠标悬浮提示
弹出框
点击后弹出/隐藏
脚本
HTML
可消失弹出框
脚本
HTML
可消失的弹出框
鼠标悬浮显示
脚本
HTML
可消失的弹出框
按钮
切换效果
Checkbox效果
Collapsible Group Item #1
...Collapsible Group Item #2
...Collapsible Group Item #3
... 轮播图 不带标题的轮播图First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Previous Next标签:...,ac,md,按钮,对齐,col,Bootstrap3 来源: https://www.cnblogs.com/gaobangguo/p/14866366.html