【学习笔记】Bootstrap3 - 基于HTML、CSS、JavaScript的前端开发框架

shawxlee

已于 2023-09-24 14:48:44 修改

阅读量377

点赞数

分类专栏：学习笔记 Bootstrap 文章标签：学习笔记 bootstrap html css javascript

于 2023-09-13 18:31:13 首次发布

本文链接：https://blog.csdn.net/weixin_43642751/article/details/132861432

版权

学习笔记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Bootstrap

5 篇文章 0 订阅

订阅专栏

Bootstrap CSS

一、移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Bootstrap网页标题</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

width=device-width 适配不同屏幕分辨率的设备
initial-scale=1.0 确保网页以1:1呈现，不会有任何的缩放

二、网格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。

1、工作原理

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

2、网格选项

	手机屏幕	平板显示器	桌面显示器	大型显示器
class前缀	.col-xs-*	.col-sm-*	.col-md-*	.col-lg-*
设备宽度	＜768px	≥768px	≥992px	≥1200px

col 列
-xs 超小屏幕  -sm 小屏幕  -md 中等屏幕  -lg 大屏幕
-* 当屏幕为前缀规定的尺寸时，每个div所占列数（每row行共12列）

① 媒体查询：

/* 当屏幕为超小设备（＜768px）时 */
@media (max-width:@screen-xs-max) {……}

/* 当屏幕为小型设备（≥768px）时 */
@media (min-width:@screen-sm-min) and (max-width:@screen-sm-max) {……}

/* 当屏幕为中型设备（≥992px）时 */
@media (min-width:@screen-md-min) and (max-width:@screen-md-max) {……}

/* 当屏幕为大型设备（≥1200px）时 */
@media (min-width:@screen-lg-min) {……}

② 网格结构：

<div class="container">
    <div class="row">
        <div class="col-xs-4">……</div>
        <div class="col-xs-4">……</div>
        <div class="col-xs-4">……</div>
    </div>
    <!-- 当屏幕为xs时，并排显示3个div，每个div占4列 -->
    
    <div class="row">
        <div class="col-md-3">……</div>
        <div class="col-md-9">……</div>
    </div>
    <!-- 当屏幕为md时，并排显示2个div，第一个占3列，第二个占9列 -->
    
    <div class="row">
        <div class="col-xs-12 col-sm-9 col-md-6">……</div>
    </div>
    <!-- 随着屏幕尺寸的变化，应用不同的类的样式 -->
</div>
<div class="container">
    ……
</div>

3、偏移列

偏移可用来给列腾出更多的空间，.col-md-offset-*类会把一个列的左外边距（margin）增加 * 列，其中1≤ * ≤11。

<div class="container">
   <div class="row" >
      <div class="col-md-6 col-md-offset-3">……</div>
      <!-- 当屏幕为md时，div向右偏移3列，使居中显示 -->
   </div>
</div>

三、辅助类

1、情境文本颜色：`.text-muted` `.text-primary` `.text-success` `.text-info` `.text-warning` `.text-danger`

<p>我是普通文字</p>
<p class="text-muted">我使用了text-muted</p>
<p class="text-primary">我使用了text-primary</p>
<p class="text-success">我使用了text-success</p>
<p class="text-info">我使用了text-info</p>
<p class="text-warning">我使用了text-warning</p>
<p class="text-danger">我使用了text-danger</p>

![此处输入图片的描述][1]

2、情境背景颜色：`.bg-primary` `.bg-success` `.bg-info` `.bg-warning` `.bg-danger`

<div>我是普通的div元素</div>
<div class="bg-primary">我使用了bg-primary</div>
<div class="bg-success">我使用了bg-success</div>
<div class="bg-info">我使用了bg-info</div>
<div class="bg-warning">我使用了bg-warning</div>
<div class="bg-danger">我使用了bg-danger</div>

![此处输入图片的描述][2]

3、关闭按钮：`.close`

通过使用一个象征关闭的图标让模态框和警告框消失

<button type="button" class="close" aria-hidden="true">&times;</button>
<p>右上角是一个关闭图标</p>

<!-- aria-hidden="true" 确保语义能够被辅助设备识别 -->

![此处输入图片的描述][3]

4、下拉/弹出三角符号：`.caret`

指示元素具有下拉/弹出菜单的功能

<!-- 下拉菜单的三角符号向下（默认） -->
<div class="dropdown">
	<button>下拉指示 <span class="caret"></span></button>
</div>

<!-- 弹出菜单的三角符号向上 -->
<div class="dropup">
	<button>弹出指示 <span class="caret"></span></button>
</div>

![此处输入图片的描述][4]

5、向左/向右浮动：`.pull-left` / `.pull-right`

<div class="pull-left">元素浮动到左侧</div>
<div class="pull-right">元素浮动到右侧</div>

<!-- .pull-left和.pull-right不能用于导航组件中 -->

![此处输入图片的描述][5]

6、清除浮动：`.clearfix`

<!-- 给容器添加.clearfix清除浮动，容器顺利撑开 -->
<div class="clearfix" style="background:grey; border:1px solid black; padding:5px;">
	<div class="pull-left" style="background:yellow;">向左浮动</div>
   	<div class="pull-right" style="background:blue;">向右浮动</div>
</div>

<!-- 未清除浮动，容器不能被撑开 -->
<div style="background:grey; border:1px solid black; padding:5px;">
	<div class="pull-left" style="background:yellow;">向左浮动</div>
   	<div class="pull-right" style="background:blue;">向右浮动</div>
</div>

![此处输入图片的描述][6]

7、让内容块居中：`.center-block`

使元素为display:block，设置宽度后可使其居中显示

<div class="center-block" style="width:150px;">此元素居中显示</div>

<!-- 必须设置width或max-width属性才能居中显示 -->

![此处输入图片的描述][7]

8、显示/隐藏内容：`.show` / `.hidden`

<div class="show">我被显示了</div>
<div class="hidden">我被隐藏了</div>

<!-- .show和.hidden只对块级元素起作用 -->

9、屏幕阅读器：`.sr-only` `.sr-only-focusable`

对屏幕阅读器以外的设备隐藏内容

<a class="sr-only" href="#">跳转到主要内容</a>

<!-- .sr-only与.sr-only-focusable结合使用，在元素获取焦点时显示 -->
<a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>

10、图片替换：`.text-hide`

将元素的文本内容替换为CSS设置的背景图

<p>.text-hide将元素的文本内容替换为背景图：</p>
<div class="text-hide" style="width:300px; height:100px; background-image:url('/paper.gif');">一些不重要的文本</div>

<!-- 必须先设置宽高，再引入背景图片 -->

![此处输入图片的描述][8]

Bootstrap 布局组件

一、下拉菜单

• 基础下拉/弹出菜单：`.dropdown/.dropup` `.dropdown-toggle` `.dropdown-menu`

<!-- 将触发器和下拉菜单都包裹在.dropdown里，指定一个下拉菜单 -->
<div class="dropdown">
    <!-- 向触发器添加.dropdown-toggle和data-toggle="dropdown" -->
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">
	    下拉菜单 <span class="caret"></span>
	</button>
	<!-- .dropdown-menu创建一个下拉菜单 -->
	<ul class="dropdown-menu">
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

<!-- 将触发器和下拉菜单都包裹在.dropup里，指定一个弹出菜单 -->
<div class="dropup">
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">
	    弹出菜单 <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

![此处输入图片的描述][9]

• 按钮下拉/弹出菜单：`.btn-group` / `.btn-group` `.dropup`

<!-- 在.btn-group中放置按钮和下拉菜单，让按钮成为菜单的触发器 -->
<div class="btn-group">
    <!-- 任何按钮颜色和按钮尺寸的类都适用于按钮下拉菜单 -->
	<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
		按钮下拉菜单 <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

<!-- 在.btn-group后添加.dropup，使触发的下拉菜单向上打开 -->
<div class="btn-group dropup">
	<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
		按钮弹出菜单 <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

![此处输入图片的描述][10]

• 分裂式按钮下拉菜单

分割按钮的左边是原始的功能，右边是显示下拉菜单的切换

<div class="btn-group">
    <!-- 将按钮与下拉菜单触发器分开书写 -->
	<button class="btn btn-default" type="button">按钮下拉菜单</button>
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
		<span class="caret"></span>
    </button>
	<ul class="dropdown-menu">
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

![此处输入图片的描述][11]

1、菜单对齐方式：`.dropdown-menu-right`/`.dropdown-menu-left`

下拉菜单默认沿着父元素的上沿和左侧被定位为100%宽度，这些类可以改变菜单对齐方向

<div class="dropdown">
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">
	    下拉菜单 <span class="caret"></span>
	</button>
	<!-- 向.dropdown-menu添加.dropdown-menu-right使菜单右对齐 -->
	<ul class="dropdown-menu dropdown-menu-right">
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

![此处输入图片的描述][12]

2、菜单小标题：`.dropdown-header`

<div class="dropdown">
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">
	    下拉菜单 <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
	    <!-- 向列表中添加带.dropdown-header的标题项 -->
	    <li class="dropdown-header">我是标题一</li>
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
		<li class="dropdown-header">我是标题二</li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

![此处输入图片的描述][13]

3、菜单分割线：`.divider`

<div class="dropdown">
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">
	    下拉菜单 <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">链接1</a></li>
		<!-- 向列表中添加带.divider的空项，生成分割线 -->
		<li class="divider"></li>
		<li><a href="#">链接2</a></li>
		<li><a href="#">链接3</a></li>
	</ul>
</div>

![此处输入图片的描述][14]

4、禁用菜单项：`.disabled`

<div class="dropdown">
	<button class="dropdown-toggle" type="button" data-toggle="dropdown">
	    下拉菜单 <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">可用链接1</a></li>
		<!-- 向列表项添加.disabled，禁用该链接 -->
		<li class="disabled"><a href="#">禁用链接2</a></li>
		<li><a href="#">可用链接3</a></li>
	</ul>
</div>

![此处输入图片的描述][15]

二、导航元素：`.nav`

• 标签式导航：`.nav-tabs`

<!-- 以一个带有.nav的无序列表开始，添加.nav-tabs -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>

![此处输入图片的描述][16]

• 胶囊式导航：`.nav-pills` / `.nav-pills` `.nav-stacked`

<!-- 以一个带有.nav的无序列表开始，添加.nav-pills -->
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>

<!-- 在.nav-pills后添加.nav-stacked，实现垂直的胶囊式导航 -->
<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>

![此处输入图片的描述][17]
![此处输入图片的描述][18]

1、两端对齐方式：`.nav-justified`

当屏幕宽度＞768px时，使标签式/胶囊式导航菜单与父元素等宽，若缩小屏幕，导航菜单会自适应为垂直堆叠

<!-- 向标签式导航添加.nav-justified -->
<ul class="nav nav-tabs nav-justified">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>

<!-- 向胶囊式导航添加.nav-justified -->
<ul class="nav nav-pills nav-justified">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>

![此处输入图片的描述][19]

2、禁用导航链接：`.disabled`

使导航内某链接变为灰色，同时禁用了该链接的:hover状态，但不改变链接功能

<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<!-- 向列表项添加.disabled，禁用此项的链接 -->
	<li class="disabled"><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>

![此处输入图片的描述][20]

3、标签页内容切换：`.tab-content` `.tab-pane`

设置标签页对应的内容随标签的切换而更改

<ul class="nav nav-tabs">
    <!-- 向链接添加data-toggle="tab"，并绑定对应标签页的id -->
	<li class="active"><a data-toggle="tab" href="#tab1">SVN</a></li>
	<li><a data-toggle="tab" href="#tab2">iOS</a></li>
	<li><a data-toggle="tab" href="#tab3">Java</a></li>
	<li><a data-toggle="tab" href="#tab4">PHP</a></li>
</ul>
<!-- 将所有标签页内容包裹在一个带有.tab-content的div里 -->
<div class="tab-content">
    <!-- 在标签页标记id，并添加.tab-pane切换内容 -->
	<div id="tab1" class="tab-pane active">SVN是Subversion的简称……</div>
	<div id="tab2" class="tab-pane">iOS是由苹果公司开发的移动操作系统……</div>
	<div id="tab3" class="tab-pane">Java是一门面向对象编程语言……</div>
	<div id="tab4" class="tab-pane">PHP是一种通用开源脚本语言……</div>
</div>

![此处输入图片的描述][21]

4、带下拉菜单的导航

<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<!-- 向列表项添加下拉菜单组件，生成可下拉的标签 -->
	<li class="dropdown">
		<a class="dropdown-toggle" href="#" data-toggle="dropdown">
		Java <span class="caret"></span>
	    </a>
	    <ul class="dropdown-menu">
	    	<li class="dropdown-header">common items:</li>
	    	<li><a href="#">Swing</a></li>
	    	<li><a href="#">jMeter</a></li>
	    	<li><a href="#">EJB</a></li>
	    	<li class="divider"></li>
	    	<li><a href="#">Others...</a></li>
	    </ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>

![此处输入图片的描述][22]

三、导航栏：`.navbar`

导航栏是导航页头的响应式基础组件，在移动设备上可以折叠收放，且随着视窗宽度增加会水平展开

• 基础导航栏：`.navbar-default` `.nav` `.navbar-nav`

<!-- 以一个带有.navbar和.navbar-default的nav标签开始 -->
<nav class="navbar navbar-default">
    <!-- 内容包裹在.container-fluid里，保持宽度始终为视窗的100% -->
	<div class="container-fluid">
	    <!-- 向ul标签添加.nav和.navbar-nav，创建链接列表 -->
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">SVN</a></li>
			<li><a href="#">iOS</a></li>
			<li><a href="#">VB.Net</a></li>
			<li><a href="#">Java</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
	</div>
</nav>

<!-- 若使用div作为导航栏的父元素，必须设置role="navigation"属性 -->
<div class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">SVN</a></li>
			<li><a href="#">iOS</a></li>
			<li><a href="#">VB.Net</a></li>
			<li><a href="#">Java</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
	</div>
</div>

![此处输入图片的描述][23]

• 反色导航栏：`.navbar-inverse` `.nav` `.navbar-nav`

<!-- 将导航栏组件的预设.navbar-default改为.navbar-inverse即反色 -->
<nav class="navbar navbar-inverse">
	<div class="container-fluid">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">SVN</a></li>
			<li><a href="#">iOS</a></li>
			<li><a href="#">VB.Net</a></li>
			<li><a href="#">Java</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
	</div>
</nav>

![此处输入图片的描述][24]

1、导航栏中的表单：`.navbar-form`

适当的垂直对齐，并在较窄的视窗中自动折叠，使用对齐方式选项规定其位置

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- 向导航栏添加带.navbar-form的表单样式 -->
        <form class="navbar-form">
            <div class="form-group">
                <input class="form-control" type="text" placeholder="请输入关键词">
            </div>
            <button class="btn btn-default" type="submit">搜索</button>
        </form>
    </div>
</nav>

![此处输入图片的描述][25]

2、导航栏中的按钮：`.navbar-btn`

使表单之外的按钮在导航栏里垂直居中

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- 向导航栏添加带.navbar-btn的按钮样式 -->
        <button class="btn btn-primary navbar-btn" type="button">注册</button>
		<button class="btn btn-primary navbar-btn" type="button">登录</button>
		<button class="btn btn-default navbar-btn" type="button">帮助</button>
    </div>
</nav>

<!-- 不要在.navbar-nav内的a元素上使用.navbar-btn -->

![此处输入图片的描述][26]

3、导航栏中的文本：`.navbar-text`

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div>
            <!-- 使用带.navbar-text的p标签确保正确的行距和颜色 -->
			<p class="navbar-text">注册/Register</p>
			<p class="navbar-text">登录/Login</p>
			<p class="navbar-text">帮助/Help</p>
		</div>
    </div>
</nav>

![此处输入图片的描述][27]

• 外部链接：`.navbar-link`

在导航组件之外添加标准链接，使用.navbar-link让链接有正确的默认设置

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div>
            <!-- 在文本内添加带.navbar-link的a标签 -->
			<p class="navbar-text">了解更多：<a href="https://www.runoob.com/" class="navbar-link">https://www.runoob.com/</a></p>
		</div>
    </div>
</nav>

![此处输入图片的描述][28]

4、导航栏头部：`.navbar-header`

• 品牌标志：`.navbar-brand`

已内置padding和height，作为品牌标志的文本字号更大，也可替换为图标展示

<nav class="navbar navbar-default">
	<div class="container-fluid">
	    <!-- 添加.navbar-header的div，包含.navbar-brand的链接 -->
	    <div class="navbar-header">
	        <a class="navbar-brand" href="#">Brand</a>
	    </div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">SVN</a></li>
			<li><a href="#">iOS</a></li>
			<li><a href="#">VB.Net</a></li>
			<li><a href="#">Java</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
	</div>
</nav>

<nav class="navbar navbar-default">
	<div class="container-fluid">
	    <div class="navbar-header">
	        <a class="navbar-brand" href="#">
	            <!-- 将标志文本替换为图片，可展示logo -->
	            <img src="/logo.png" alt="Brand">
	        </a>
	    </div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">SVN</a></li>
			<li><a href="#">iOS</a></li>
			<li><a href="#">VB.Net</a></li>
			<li><a href="#">Java</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
	</div>
</nav>

<!-- 当图片尺寸溢出导航栏时，需设置max-width和max-height为100% -->

![此处输入图片的描述][29]

• 折叠式导航栏：`.navbar-toggle` `.collapse` `.navbar-collapse`

<nav class="navbar navbar-default">
    <div class="container-fluid"> 
	    <div class="navbar-header">
		    <a class="navbar-brand" href="#">Brand</a>
		    <!-- 在.navbar-header中添加一个.navbar-toggle按钮，并绑定id -->
		    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
		        <!-- 通过图标类自定义按钮显示的样式 -->
			    <span class="icon-bar"></span>
			    <span class="icon-bar"></span>
			    <span class="icon-bar"></span>
		    </button>
	    </div>
	    <!-- 折叠内容包裹在.collapse和.navbar-collapse的div中，并标记id -->
	    <div class="collapse navbar-collapse" id="example">
		    <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">SVN</a></li>
                <li><a href="#">iOS</a></li>
            </ul>
	    </div>
	</div>
</nav>

![此处输入图片的描述][30]

5、导航栏对齐方式：`.navbar-left`/`.navbar-right`

使导航栏中的链接、表单、按钮、文本这些组件向左或向右对齐

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- 向组件容器标签添加对齐的类 -->
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">SVN</a></li>
            <li><a href="#">iOS</a></li>
            <li><a href="#">VB.Net</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
</nav>

![此处输入图片的描述][31]

6、导航栏定位方式

• 滚动并贴合页面顶部：`.navbar-static-top`

去掉由.navbar-default设置的上、右、左边框，使导航栏更贴合页面的顶部边框

<!-- 向导航栏组件添加.navbar-static-top，贴合页面顶部边框 -->
<nav class="navbar navbar-default navbar-static-top">
	<div class="container-fluid">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">.navbar-static-top导航栏</a></li>
			<li><a href="#">SVN</a></li>
			<li><a href="#">iOS</a></li>
		</ul>
	</div>
</nav>

<!-- 默认导航栏有四边边框，与页面边框分离 -->
<nav class="navbar navbar-default">
	<div class="container-fluid">
		<ul class="nav navbar-nav">
		    <li class="active"><a href="#">默认导航栏</a></li>
		    <li><a href="#">SVN</a></li>
		    <li><a href="#">iOS</a></li>
		</ul>
	</div>
</nav>

![此处输入图片的描述][32]

• 固定并贴合窗口顶部：`.navbar-fixed-top`

<head>
    <style type="text/css">
        /* 防止内容被导航栏遮挡，需为body设置padding-top ≥ 50px */
		body {padding-top: 70px;}
	</style>
</head>

<body>
    <!-- 向导航栏组件添加.navbar-fixed-top，固定在顶部 -->
    <nav class="navbar navbar-default navbar-fixed-top">
	    <div class="container-fluid">
		    <ul class="nav navbar-nav">
			    <li class="active"><a href="#">Home</a></li>
			    <li><a href="#">SVN</a></li>
			    <li><a href="#">iOS</a></li>
		    </ul>
	    </div>
    </nav>
    <div>这是页面内容。需为body元素设置padding-top，内容才不会被导航栏遮挡。</div>
</body>

![此处输入图片的描述][33]

• 固定并贴合窗口底部：`.navbar-fixed-bottom`

<head>
    <style type="text/css">
        /* 防止内容被导航栏遮挡，设置body的padding-bottom ≥ 50px */
		body {padding-bottom: 70px;}
	</style>
</head>

<body>
    <!-- 向导航栏组件添加.navbar-fixed-bottom，固定在底部 -->
    <nav class="navbar navbar-default navbar-fixed-bottom">
	    <div class="container-fluid">
		    <ul class="nav navbar-nav">
			    <li class="active"><a href="#">Home</a></li>
			    <li><a href="#">SVN</a></li>
			    <li><a href="#">iOS</a></li>
		    </ul>
	    </div>
    </nav>
    <div>这是页面内容。需为body元素设置padding-bottom，内容才不会被导航栏遮挡。</div>
</body>

![此处输入图片的描述][34]

四、路径导航：`.breadcrumb`

路径导航表示当前页面在导航层次结构内的位置，可以显示日期、类别或标签等

<!-- 以一个带有.breadcrumb的无序列表开始 -->
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">2018</a></li>
	<li><a href="#">Oct.</a></li>
	<li class="active">27th</li>
</ul>

<!-- 各路径间的分隔符已经自动通过CSS设置好了 -->

![此处输入图片的描述][35]

shawxlee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】Bootstrap3 - 基于HTML、CSS、JavaScript的前端开发框架

Bootstrap CSS一、移动设备优先为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap网页标题&l
复制链接

扫一扫