Bootstrap3

2023-12-12 21:00:57

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

移除列表默认样式

list
list
list
list

让列表项水平排列

list
list
list
list

让dt和dd水平排列

dt-description: dd-description

表格基本表格

...

条纹状表格

...

带边框的表格

...

让表格支持鼠标悬停

...

让表格更加紧凑

...

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

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

响应式表格

...

表单普通表单内联表单将label隐藏输入框组 label和控件水平对齐复选框垂直排列 Option one is this and that—be sure to include why it's great Option two is disabled 水平排列 1 2 3 不带label文本单选按钮垂直排列 Option one is this and that—be sure to include why it's great Option two can be something else and selecting it will deselect option one Option three is disabled 水平排列 1 2 3 不带label文本给表单控件添加校验颜色成功警告错误给输入框添加额外的图标标题与控件垂直排列成功 (成功) 警告 (警告) 错误 (错误) 成功 @ (成功) 标题与控件水平排列隐藏label (成功) @ (成功) 控件尺寸单控件尺寸调整控件组尺寸调整大尺寸控件组小尺寸控件组通过列调整控件宽度按钮可作为按钮使用的标签或元素 Link 预定义样式尺寸按下状态的按钮禁用按钮 Link 图片响应式图片

图片水平居中

图片形状

辅助类情境文本颜色

...

情境背景色

...

关闭按钮三角符号快速浮动让内容块左浮动让内容块右浮动让内容块居中通过为父元素添加 .clearfix 类清除浮动（float）显示或隐藏内容显示内容隐藏内容 Bootstrap3 组件图标下拉菜单普通下拉菜单上拉菜单标题分割线禁用的菜单项按钮组基本案例按钮工具栏 ... ... ... 尺寸 ... ... ... ... 嵌套下拉菜单垂直排列 ... 两端对齐排列的按钮组单按钮下拉菜单分裂式按钮下拉菜单输入框组基本案例 @ 尺寸调节 ... ... ... 作为额外元素的多选框作为额外元素的单选框作为额外元素的按钮作为额外元素的按钮式下拉菜单作为额外元素的按钮组导航标签页水平方向

两端对齐

... 胶囊式标签页水平方向

垂直方向

... 两端对齐

... 带下拉菜单的标签页

Dropdown

带下拉菜单的胶囊式标签页

Dropdown

导航条默认样式的导航条

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <p class="navbar-text">Signed in as Mark Otto</p>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

带品牌图标的导航条固定在顶部的导航条固定在底部的导航条静止在顶部的导航条路径导航分页默认分页禁用和激活状态尺寸翻页默认实例两端对齐链接可选的禁用状态标签 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

带徽章的列表组

14 Cras justo odio

链接列表组 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 按钮列表组禁用列表组中的条目 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 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. *lyn 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 *lyn nesciunt.

three

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

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3 Radio效果 Radio 1 (preselected) Radio 2 Radio 3 折叠效果普通案例 Link with href ... 手风琴

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

码农公寓

Bootstrap3

Hello, world!

Example page header Subtext for header

Thumbnail label

Media heading

Media heading

Media heading

List group item heading

Panel title

@fat

@mdo

one

two

three

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

First slide label

Second slide label

Third slide label

码农公寓

Hello, world!

Example page header Subtext for header

Thumbnail label

Media heading

Media heading

Media heading

List group item heading

Panel title

Modal title

Modal title

@fat

@mdo

one

two

three

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

First slide label

Second slide label

Third slide label

相关文章