其他分享
首页 > 其他分享> > Bootstrap3

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 栅格系统
布局容器
固定宽度并支持响应式布局的容器

... 100% 宽度,占据全部视口(viewport)的容器 ... 注意:这两个容器不能相互嵌套 行 .row为行,.row必须包含在.container 或 .container-fluid中 ... ... 列 列有4类,适用于4种不同的屏幕,具体类与尺寸如下表,列必须放在.row中,并且,.row中只能放置列

类 尺寸说明
.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.

Someone famous in Source Title
移除列表默认样式 让列表项水平排列 让dt和dd水平排列
dt-description
dd-description
表格 基本表格

...

条纹状表格

...

带边框的表格

...

让表格支持鼠标悬停

...

让表格更加紧凑

...

设置行或单元格的背景颜色 ... ... ... ... ...

鼠标悬停在行或单元格上时所设置的颜色
标识成功或积极的动作
标识警告或需要用户注意
标识危险或潜在的带来负面影响的动作
标识普通的提示信息或动作

响应式表格

...
表单 普通表单

帮助信息

内联表单
...
将label隐藏 输入框组
$ .00
label和控件水平对齐
复选框 垂直排列 水平排列 不带label文本 单选按钮 垂直排列 水平排列 不带label文本 给表单控件添加校验颜色 给输入框添加额外的图标 标题与控件垂直排列 (成功) (警告) (错误) @ (成功) 标题与控件水平排列
(成功) @ (成功)
隐藏label (成功) @ (成功) 控件尺寸 单控件尺寸调整 控件组尺寸调整 通过列调整控件宽度 按钮 可作为按钮使用的标签或元素 Link 预定义样式 尺寸 按下状态的按钮 禁用按钮 Link 图片 响应式图片 ... 图片水平居中 ... 图片形状 矩形 圆形 缩略图 辅助类 情境文本颜色

...

...

...

...

...

...

情境背景色

...

...

...

...

...

关闭按钮 三角符号 快速浮动 让内容块左浮动 让内容块右浮动 让内容块居中 通过为父元素添加 .clearfix 类清除浮动(float) 显示或隐藏内容 显示内容 隐藏内容 Bootstrap3 组件 图标 下拉菜单 普通下拉菜单 上拉菜单 标题 分割线 禁用的菜单项 按钮组 基本案例 按钮工具栏 ... ... ... 尺寸 ... ... ... ... 嵌套下拉菜单 垂直排列 ... 两端对齐排列的按钮组 单按钮下拉菜单 分裂式按钮下拉菜单 输入框组 基本案例 @ 尺寸调节 ... ... ... 作为额外元素的多选框 作为额外元素的单选框 作为额外元素的按钮 作为额外元素的按钮式下拉菜单 作为额外元素的按钮组 导航 标签页 水平方向 两端对齐 胶囊式标签页 水平方向 垂直方向 两端对齐 带下拉菜单的标签页 带下拉菜单的胶囊式标签页 导航条 默认样式的导航条 带品牌图标的导航条 Brand 固定在顶部的导航条 固定在底部的导航条 静止在顶部的导航条 路径导航 分页 默认分页 禁用和激活状态 尺寸 翻页 默认实例 两端对齐链接 可选的禁用状态 标签 Default Primary Success Info Warning Danger 徽章 链接中的徽章

Inbox 42
按钮中的徽章

导航中的徽章 巨幕

Hello, world!

...

Learn more

页头

Example page header Subtext for header

缩略图 默认样式的实例 ... ... 自定义内容 ...

Thumbnail label

...

Button Button

警告框 默认实例 ... ... ... ... 可关闭的警告框 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 按钮列表组 禁用列表组中的条目 Cras justo odio ... 给条目添加请景色 定制内容

List group item heading

...

面版 基本实例 Basic panel example 带标题的面版 Panel heading without title Panel content

Panel title

Panel content 带脚注的面版 ... Panel footer 情境效果 ... ... ... ... ... 带表格的面版 Panel heading ...
    ...
<table class="table"></table>
带列表组的面版 Panel heading ...
<ul class="list-group">
    ...
</ul>
嵌入内容 宽高比:16:9 宽高比:4:3 Bootstrap3 插件 模态框 默认样式 ... 可选尺寸 大模态框

... 小模态框

... 禁止动画效果的模态框 ... 使用栅格系统的模态框 ... ... ... 滚动监听

@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效果

Radio效果 折叠效果 普通案例 ... 手风琴

Collapsible Group Item #1

...

...

... 轮播图 不带标题的轮播图 ... ... ... Previous Next 带标题的轮播图 ...

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