系统学习——Bootstrap

最新推荐文章于 2023-04-18 10:00:00 发布
最新推荐文章于 2023-04-18 10:00:00 发布
阅读量997 收藏 39
点赞数 8
分类专栏： 系统学习 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoguang2018/article/details/105119173
版权

学习目录

环境安装

<!-- Bootstrap核心CSS文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件，务必在bootstrap.min.js之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

全局CSS样式

概述

  • 声明 HTML5 文档类型（Doctype）：
    <!DOCTYPE html>
<html>
	....
</html>
  • 为了让 Bootstrap 3 开发的网页更好的兼容 移动设备，确保绘制和触屏的正常使用，需要在网页的 head 中添加 viewport meta 标签。
    <head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>

排版样式

页面排版
  • Bootstrap 对 HTML 标题 (h1 ~ h6) 进行了 CSS 样式的重构,并且还支持 普通内联元素 定义 class= (.h1 ~ .h6) 来实现相同的功能。
  • 内联元素文本：
    在这里插入图片描述
  • Bootstrap 将页面主体设置默认为：font-size:14px; line-height:20px; line-height:10px; color:#333;
  • text-left：向左对齐 text-right：向右对齐 text-center：居中对齐 text-justify：两端对齐
  • text-lowercase:内容全部小写；text-uppercase：内容全部大写；text-capitalize：单词首字母大写。
  • 缩略语：当我们把鼠标悬停在缩略语上可看到完整的内容。<abbr title="World Wide Web">WWW</abbr>
  • 引用文本：将任何HTML元素包裹在<blockquote>中即可表现为引用样式。在标签上添加.blockquote-reverse类可以让引用内容呈现右对齐。
  • 列表排版：在这里插入图片描述
代码
  1. 内联显示代码，使用 <code>标签。
  2. 代码需要被显示为一个独立的块元素或者代码有多行，使用 <pre> 标签。
  3. 确保使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 转义字符： &lt; 和 &gt;

表格

  • bootstrap为表格提供的一些类：
    在这里插入图片描述
  • 表格的各种效果都要基于基本表格效果：.table。
  • 将任何.table元素包裹在.table-responsive元素内，即可创建 响应式表格 。
  • Bootstrap 为表格的行元素 <tr> 提供了五种不同的类，每种类控制了行的不同背景颜色。在这里插入图片描述

按钮

  • 任何带有 .btn 类的元素都会继承圆角灰色按钮的默认外观。
  • 虽然按钮类可以应用到其他标签元素上，但是导航和导航条组件只支持<button> 元素。
  • 如果 <a> 元素被作为按钮使用，并用于在当前页面触发某些功能 而不是用于链接页面，那么请为其设置 role="button" 属性。
  • 所有的按钮样式都必须基于按钮基本样式.btn。
  • btn-default 默认样式；btn-success 成功样式；btn-warning 警告样式；btn-danger 危险样式；btn-primary 首选项样式；btn-link 链接样式；btn-info 信息样式
  • 尺寸从大到小：btn-lg 默认 btn-sm btn-xs。
  • 块级按钮：通过给按钮添加btn-block来使其拉伸到父元素的100%宽度。
  • 按钮的状态：active（激活态）呈现为被按压的外观（深色的背景、深色的边框、阴影）； disabled(禁用)悬浮时改变光标样式。

栅格系统

  • 浏览器会随着屏幕的大小的增减自动分配最多12列。
  • Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器
  • 如果一行中包含了的列大于 12，多余的列所在的元素将被作为一个整体另起一行排列。
  • 网格系统夸设备工作的原理：在这里插入图片描述
  • 嵌套：在列中添加一个或多个row，在row中再添加column，实现嵌套列。
  • 列排序：col-*-push-*向右移动几个列； col-*-pull-*向左移动几个列。移动列不影响其他列的布局。

表单

  • 所有设置了.form-control类的 <input> 、 <textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;
  • 将<label>元素和上面提到的控件包裹在.form-group中可以获得最好的排列。
  • 只有正确设置了输入框 input 的 type 类型，才能被赋予正确的样式。
  • 通过 .input-lg 类似的类可以为控件设置高度。
  • 为了让控件在各种表单风格中样式不出错，需要添加类名form-control。
  • 内联表单：将表单的控件都在一行内显示，只需要在 <form> 元素中添加类名 form-inline 即可。
  • 水平表单：
    • <form> 元素添加 .form-horizontal 类。
    • 配合 Bootstrap 框架的栅格系统。
  • 校验状态：.has-warning、.has-error、.has-success。
  • label 标签同步相应状态：control-label

图片

  • .img-rounded：添加 border-radius:6px 来获得图片圆角。
  • .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
  • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
  • .img-responsive：响应式图片，主要针对于响应式设计

辅助类

  • 情景文本色：在这里插入图片描述

  • 情景背景色：在这里插入图片描述

  • 关闭按钮：

    <button type="button" class="close">×</button>

  • 三角符号：

    <span class="caret"></span>

  • 快速浮动：

    <div class="pull-left">左边</div>
<div class="pull-right">右边</div>

  • 清理浮动：

    <div class="clearfix"></div>

  • 块级居中：

    <div class="center-block">居中</div>

  • 显示和隐藏：

    <div class="show">show</div>
<div class="hidden">hidden</div>

响应式工具

  • 在这里插入图片描述
  • 打印类：在这里插入图片描述

Bootstrap组件

图标菜单按钮组件

字体图标
  • Bootstrap 提供了免费的 263 个小图标。
    <span class="glyphicon glyphicon-trash"></span>
下拉菜单
<!-- 按钮和菜单需要包裹在 .dropdown 的容器里 --> 
<!-- 若为dropup则菜单出现在上方 -->
<!-- 添加open设置菜单默认展示 -->
<div class="dropdown">
	<!-- 作为被点击的元素按钮需要设置 data-toggle="dropdown" -->
	<!-- 设置 class="caret"表示箭头,箭头的朝向由div元素的类名决定，默认向下。dropdown向下，dropup向上 -->
    <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
    </button>
    <!-- 菜单部分设置 class="dropdown-menu" 才能自动显隐并添加固定样式 -->
    <!-- 设置对齐方式dropdown-menu-left（默认） dropdown-menu-right -->
    <ul class="dropdown-menu">
    	<!-- 设置菜单标题 -->
    	<li class="dropdown-header">网站导航</li>
    	<!-- 设置菜单的分割线-->
		<li class="divider"></li>
        <li>
            <a href="#">首页</a>
        </li>
        <!-- 设置菜单的禁用项 -->
        <li class="disabled">
            <a href="#">产品</a>
        </li>
    </ul>
</div>
按钮组

  • 按钮组常用类

    class描述
    .btn-group该class用于形成基本的按钮组。在btn-group中放置一系列带有.btn的按钮。
    .btn-toolbar该class有助于把几组<div class="btn-group">结合到一个<div class="btn-toolbar">中一般获得更复杂的组件。
    btn-group-lg .btn-group-sm .btn-group-xs这些class可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
    btn-group-vertical该class让一组按钮垂直堆叠显示，而不是水平堆叠显示。

  • 按钮工具栏
    将 按钮组 分组排列在一起。

    <div class="btn-toolbar">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">按钮1</button>
        ...
    </div>
    <div class="btn-group btn-group-sm">
        ...
    </div>
</div>

  • 嵌套：嵌套一个分组，须把 .btn-group 放入另一个 .btn-group 中。

  • 两端对齐

    • 按钮会均分铺满整个 btn-group-justified元素。
    • 使用<a>标签,设置两端对齐按钮组
      <div class="btn-group-justified">
    <a type="button" class="btn btn-default">左</a>
    <a type="button" class="btn btn-default">右</a>
</div>
    • 使用<button>标签，需要对每个按钮进行群组
      <div class="btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default"> 左 </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"> 右 </button>
    </div>
</div>

  • 按钮下拉菜单：只需将下拉菜单最外层容器的dropdown换成btn-group即可。

  • 分裂式按钮下拉菜单：分裂式按钮的左边是原始的功能，右边是显示下拉菜单的切换。

    <div class="btn-group">
    <button type="button" class="btn btn-danger"> 下拉菜单 </button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">首页</a>
        </li>
        ...
    </ul>
</div>

  • 向上弹出式：在btn-group后面追加dropup。

输入框组

  • 输入框组扩展自表单控件。
  • 向.form-control添加前缀或后缀元素的步骤如下：
    1. 把前缀或后缀元素放在一个带有.input-group类的 <div> 中；
    2. 在相同的 <div> 内，在.input-group-addon类的 <span> 内放置额外的内容；
    3. 把该 <span> 放置在 <input>元素的前面或者后面。
  • 可以通过向 .input-group 添加相对表单大小的类（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。
  • 向输入框组中添加按钮时就不能使用input-group-addon了，要使用input-group-btn。
    <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default"> 按钮 </button>
    </span>
</div>

导航栏

  • Bootstrap 中的导航组件都依赖同一个.nav类。但是.nav样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如nav-tabs、nav-pills之类。
    <ul class="nav nav-tabs">
    <li class="active">
        <a href="#">首页</a>
    </li>
    <li>
        <a href="#">资讯</a>
    </li>
</ul>
胶囊式导航
  • 在nav类名之后添加nav-pills类名即可。<ul class="nav nav-pills">。
  • 垂直胶囊式导航：在nav-pills后追加nav-stacked即可。<ul class="nav nav-pills nav-stacked">。
带下拉菜单的导航
  1. 将 <li> 当作父容器；
  2. 使用类名dropdown；
  3. 在 <li> 中嵌套另一个列表 <ul>。
面包屑导航（Breadcrumbs）
  • Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb 类的无序列表。
    <ul class="breadcrumb">
	 <li>
	     <a href="#">首页</a>
	 </li>
	 <li>
	     <a href="#">课程列表</a>
	 </li>
	 <li class="active"> Bootstrap 3 </li>
</ul>
  • 其中的分隔符会通过 CSS（bootstrap.min.css）中下面所示的类自动被添加：
    .breadcrumb > li + li:before {
	color: #CCCCCC;
	content: "/ ";
	padding: 0 5px;
}
导航条
  • 说明：导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航）、表单以及表单和导航一起结合等多种形式。
  • 步骤：
    1. 首先在制作导航的列表(<ul class='nav'>)上添加类名 navbar-nav；
    2. 在列表外部添加一个容器（<nav>），并且使用类名 navbar 和 navbar-default。
      <!-- 若想取反色黑底白字直接加类名：navbar-inverse -->
<nav class="navbar navbar-default"> 
    <ul class="nav navbar-nav">
        <li><a href="#">首页</a></li>
        ...
    </ul>
</nav>
带表单的导航条
<nav class="navbar navbar-inverse">
	<!-- navbar-left/navbar-right 工具类让调整表单对齐方式 -->
	<form class="navbar-form navbar-left">
	    <div class="input-group">
	        <input type="text" class="form-control">
	        <span class="input-group-btn">
	            <button type="submit" class="btn btn-default"> 提交 </button>
	        </span>
	    </div>
	</form>    
</nav>
导航条中的按钮、文本和链接
  • 按钮：navbar-btn
  • 文本：navbar-text
  • 普通链接：navbar-link
  • 对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。 .navbar-btn 可被使用在 <a> 和 <input> 元素上。但是，导航和导航条组件只支持 <button> 元素。
固定导航条
<!-- 固定在顶部：navbar-fixed-top，底部：navbar-fixed-bottom -->
<nav class="navbar navbar-default navbar-fixed-top">

分页标签徽章组件

分页
  • 分页（Pagination）是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
  • 默认分页：在这里插入图片描述
  • 翻页：
    在这里插入图片描述
标签
  • 标签可用于计数、提示或页面上其他的标记显示。
    <h6>标签 <span class="label label-primary">new</span></h6>
<h5>标签 <span class="label label-success">new</span></h5>
<h4>标签 <span class="label label-info">new</span></h4>
<h3>标签 <span class="label label-warning">new</span></h3>
<h2>标签 <span class="label label-danger">new</span></h2>
<h1>标签 <span class="label label-default">new</span></h1>
徽章
  • 徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
    <!-- 链接中添加徽章 -->
<a href="#">信息 <span class="badge">10</span></a>

<!-- 按钮中添加徽章 -->
<button class="btn btn-success"> 提交 <span class="badge">3</span>
</button>

<!-- 导航激活态时徽章会自动适配颜色 -->
<ul class="nav nav-pills">
    <li class="active">
        <a href="#">首页
        <span class="badge">2</span></a>
    </li>
    <li>
        <a href="#">资讯</a>
    </li>
</ul>

巨幕、页头、缩略图、警告框

巨幕(Jumbotron)
  • 巨幕组件主要是展示网站的关键性区域。
<!--在固定范围内，有圆角-->
<div class="container">
    <div class="jumbotron">
        <h2>W3Cschool</h2>
        <p> 这是一个学习性的网站！ </p>
        <p>
            <a href="#" class="btn btn-default">更多内容</a>
        </p>
    </div>
</div>
  • 如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，将jumbotron放到container外面其他不变。
页头（page-header）

  • 当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页头这个组件就显得特别有用。

  • 页头组件能够为标题标签增加适当的空间，并且与页面的其他部分形成一定的分隔。

    <div class="page-header">
    <h1>大标题 <small>小标题</small></h1>
</div>
缩略图（thumbnail）
  • 通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。
    <div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4">
        <!-- 一个简单的图片展示,鼠标悬浮有选中效果-->
            <a class="thumbnail">
                <img src="img/pic.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4">
        <!-- 一个复杂的缩略布局 -->
            <div class="thumbnail">
    			<img src="img/pic.png" alt="">
        		<div class="caption">
            		<h3>图文并茂</h3>
            		<p> 这是一个图片结合文字的缩略图 </p>
            		<p>
               			<a href="#" class="btn btn-default">按钮</a>
            		</p>
         		</div>
			</div>
        </div>
    </div>
</div>
警告框（alert）
  • 将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框。
    <!--四个样式类： alert-success alert-info alert-warning alert-danger -->
<div class="alert alert-success"> 
	Bootstrap 
	<!-- 关闭按钮，必须写data-dismiss=“alert”属性 -->
	<button type="button" class="close" data-dismiss="alert">
        <span>×</span>
    </button>
</div>
  • 警告框中的链接(用.alert-link工具类，可以为链接设置与当前警告框相符的颜色)
    <div class="alert alert-success"> 
	Bootstrap，请到官网 
	<a href="http://www.bootcss.com/" class="alert-link">下载</a>
</div>

列表组组件和面板组件

列表组
  • 带徽章的列表组
    <ul class="list-group">
<!-- 徽章自动处于该列表的最右侧 -->
    <li class="list-group-item"> 1.这是起始 <span class="badge">10</span></li>
    <li class="list-group-item"> 2.这是第二条数据 </li>
    <li class="list-group-item"> 3.这是末尾 </li>
</ul>
  • 列表组 – 定制内容
    <!-- 使用a标签替换li标签即可实现列表全是连接的效果 -->
<a href="#" class="list-group-item">W3Cschool</a>
<!-- 同理全是按钮 -->
<button class="list-group-item">...</button>

<!-- 任意内容的列表组:使用div替换li -->
<div class="list-group">
    <a href="#" class="list-group-item active">
    <h4>内容标题</h4>
    <p class="list-group-item-text"> 这里是相关内容详情！ </p>
    </a>
    ...
</div>
面板
  • 面板常用基础类在这里插入图片描述
类描述实例
.panel
.panel-default		添加该类创建一个基本的面板<div class="panel panel-default">
  <div class="panel-body"> 这里是详细内容区！</div>
</div>
  • 组合展示
    <div class="panel panel-default">
    <div class="panel-heading"> 表格标题 </div>
    <div class="panel-body">
        <p> 这里是表格标题的详细内容！ </p>
    </div>
    <!-- 为了在面板中创建一个无边框的表格，我们可以在面板中使用 `.table` 类 -->
    <table class="table">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </table>
     <!-- 面板中包含列表组:我们可以在面板中直接放入列表组组件 -->
    <ul class="list-group">
		<li class="list-group-item">one</li>
		<li class="list-group-item">two</li>
	</ul>
</div>

进度条媒体对象和 Well 组件

进度条
  • 效果
    在这里插入图片描述
  • 代码
    <!-- progress作为进度条的外部容器 -->
<div class="progress">
<!-- progress-bar作为进度条的填充 -->
	<div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:40%"> 40% </div>
	<div class="progress-bar progress-bar-default progress-bar-striped " style="min-width:20px;width:20%"> 20% </div>
	<div class="progress-bar progress-bar-info progress-bar-striped active" style="min-width:20px;width:15%"> 15% </div>
	<div class="progress-bar progress-bar-warning active" style="min-width:20px;width:10%"> 10% </div>
	<div class="progress-bar progress-bar-danger progress-bar-striped active" style="min-width:20px;width:1%"> 1% </div>
	<div class="progress-bar progress-bar-striped active" style="min-width:20px;width:5%;background-color:green;"> 5% </div>
</div>
  • 说明
  1. 自备四种状态色：progress-bar-success、progress-bar-default、progress-bar-info、progress-bar-warning、progress-bar-danger。背景色可自行添加。
  2. 添加斜条纹：progress-bar-striped。
  3. 斜条纹滚动：active。
  4. 添加最小宽度是为了保证进度条上的字符可以正常展示。
  5. 一次写多个progress-bar则bar们会依次展示。
  6. 当进度条相加超过100时，从超过100的那个条开始不再展示。如：80%，10%，15%，2%，进度条容器中展示的只有80%和10%，因为算上15%就超过100了。
媒体对象

  • 媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。

    <div class="media">
<!-- 此时图在左，文字在右。 -->
    <div class="media-left">
    	<img src="img/media.jpg" alt="" class="media-object">
    </div>
    <div class="media-body">
    	<h4 class="media-heading">标题</h4>
   		<p>针对美国财长称将于近期来华磋商消息,中国商务部新闻发言人高峰16日在新闻发布会上称,中方不掌握美方来华计划  </p>
    </div>
   
   <!-- 此时图在右，文字在左。 -->
    <div class="media-body">
    	<h4 class="media-heading">标题</h4>
    	<p>针对美国财长称将于近期来华磋商消息,中国商务部新闻发言人高峰16日在新闻发布会上称,中方不掌握美方来华计划  </p>
    </div> 
    <div class="media-right">
    	<img src="img/media.jpg" alt="" class="media-object">
    </div>
</div>

  • 列表展示只需在最层加上<ul class="media-list>元素，并将<div class="media"> 改成 <li class="media">即可。

Well
  • Well 组件可以实现简单的 嵌入 效果。
  • well-lg 或 well-sm 来改变 Well 的pading。
  • <div class="well"> Bootstrap </div>。

Bootstrap插件

概览

插件引入
  • 单个引入：使用 Bootstrap 提供的单个 *.js 文件。
  • 一次性全部引入：使用bootstrap.js 或压缩版的bootstrap.min.js。
  • 一些插件和 CSS 组件 依赖 于其他插件。如果单独引用插件，请确保在文档中检查插件之间的依赖关系。
  • jQuery 必须在所有插件之前引入页面。
data属性

  • 可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件。

  • // 关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。
$(document).off('.data-api');
//关闭某个特定的插件
$(document).off('.alert.data-api');
编程方式的 API
  • Bootstrap 插件中所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合。
    $(".btn.danger").button("toggle").addClass("fat")
  • 所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为）
    // 初始化为默认行为
$("#myModal").modal()    
 // 初始化为不支持键盘               
$("#myModal").modal({ keyboard: false })  
// 初始化并立即调用 show
$("#myModal").modal('show')
  • 每个插件在 Constructor 属性上也暴露了其原始的构造函数：$.fn.popover.Constructor。如果你想获取某个特定插件的实例，可以直接通过页面元素获取：
    $('[rel=popover]').data('popover').
避免命名空间冲突
  • 通过调用插件的 .noConflict 方法恢复其原始值。
    // 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict();
// 为 $().bootstrapBtn 赋予 Bootstrap 功能                           
$.fn.bootstrapBtn = bootstrapButton
事件
  • Bootstrap 为大多数插件的独特行为提供了自定义事件。
  • 不定式：表示其在事件开始时被触发。例如: show
  • 过去式：在动作执行完毕之后被触发。例如 shown。
    $('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模态框的展示
})
  • 所有以不定式动词命名的事件都提供了 preventDefault 功能，这使得在事件开始执行前可以将其停止。

模态框

基本结构
  • 使用模态框的弹窗组件需要 三层 div 容器元素，分别为 modal(模态声明层) 、dialog(窗口声明层) 、content(内容层) 。
  • 在内容层里面，还有三层，分别为 header(头部)、body(主体)、footer(注脚)。
  • <!-- 模态声明，show 表示初始化时模态框显示；fade表示当模态框被切换时，它会引起内容淡入淡出。 -->
<div class="modal show fade">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明 -->
        <div class="modal-content">
            <!-- 头部:主要包括标题和关闭按钮 -->
            <div class="modal-header">
            	 <!-- data-dismiss="modal"，用于关闭模态窗口。 -->
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            	<h4 class="modal-title">会员登录</h4>
            </div>
            <!-- 主体:弹出框的主要内容 -->
            <div class="modal-body">
                <p> 暂时无法登录会员 </p>
            </div>
            <!-- 注脚:主要放置操作按钮 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default"> 注册 </button>
                <button type="button" class="btn btn-primary"> 登录 </button>
            </div>
        </div>
    </div>
</div>
基本使用
属性名称类型默认值描述
data-toggle字符modal用来控制模态弹出框的展示
data-target字符用户自定义用来定义要触发的模态弹出框是哪一个。
值可以是“div.modal”元素独有的类名或者id名
data-backdrop布尔值true是否包含一个背景div元素，如果为真，点击背景关闭弹窗，如果为假 则没有背景。
如果取值为static则会展示背景，但是点击背景不会关闭弹窗。
data-keyboard布尔值true是否可以按键盘的ESC键来关闭弹窗。true：可以；false：不可以。
data-show布尔值ture初始化时弹出窗是否展示。与在“div.modal"中直接添加类名”show“效果一样。
触发方式
  1. 声明式触发方法：用 data-toggle 和 data-target 来控制模态框。
    <!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">
	点击我会弹出模态弹出窗
</button>
<!-- 模态框 -->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
        <!-- 模态框内容 -->
        </div>
    </div>
</div>
  2. javaScript式：监听按钮点击事件，调用命令使弹窗展示。
     $("#btn-show").on("click",()=>{
       $("#myModal").modal("show");
   });
自带事件
事件类型描述
show.bs.modal在show方法调用时立即触发（尚未显示前）；如果单击了一个元素，该元素将作为事件的 relatedTarget 属性
shown.bs.modal该事件在弹出框完全显示（并且动画完成）之后触发；如果单击了一个元素，该元素将作为事件的 relatedTarget 属性
hide.bs.modal在hide方法调用时立即触发（还未隐藏）。
hedden.bs.modal该事件在弹出框完全隐藏（并且动画完成）之后触发。

示例：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

下拉菜单和滚动监听

下拉菜单
  • 触发方式：

    1. 和常规下载菜单组件类似

      <!-- 如果触发按钮在菜单容器外面，使用data-target="#dropdown"指明要展示的菜单容器 -->
<button class="btn btn-primary" id="btn" data-toggle="dropdown" data-target="#dropdown"></button>

<!-- 外部容器使用功能类.dropdown声明；#dropdown是为了让外部的按钮指定该菜单容器-->
<div class="dropdown" id="dropdown">
	<!-- data-toggle="dropdown"绑定下拉菜单事件 -->
    <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span>
    </button>
    <!-- .dropdown-menu声明菜单类表 -->
    <ul class="dropdown-menu">
          <li><a href="#">首页</a></li>
          ...
    </ul>
</div>

    2. javascript式(不推荐）

      $('#btn').dropdown();
$('#btn').dropdown('toggle');

      注：无论是通过 JavaScript 调用下拉列表还是使用 data-api，都需要在下拉列表的触发元素上显示 data-toggle =“dropdown”。

滚动监听(Scrollspy)

  • data属性调用

    <nav id="nav" class="navbar navbar-default">
	<ul class="nav navbar-nav">
  	   <li>
    	    <a href="#html5">HTML5</a>
       </li>
       <li>
            <a href="#bootstrap">Bootstrap</a>
       </li>
	</ul>
</nav>
<!-- 为监控对象设置被监控的 data 属性：data-spy="scroll" -->
<!-- 指定监控的导航条：data-target="#nav" -->
<!-- 定义监控过程中滚动条偏移位置 data-offset="0"（默认值为10） -->
<div data-offset="0" data-target="#nav" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;padding: 0 10px;">
	 <h4 id="html5">HTML5</h4>
	 <h4 id="bootstrap">bootstrap</h4>
    ....
</div>

  • JavaScript调用

    <nav id="navbar-menu" class="navbar navbar-default">
  ...
</nav>
<div class="scrollspy" id="scrollspy">
  ...
</div>

    $('#scrollspy').scrollspy({
    offset : 0,
    target: "#navbar-menu",
});

  • 无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即 相对定位 方式。

  • 方法：当滚动监控所作用的 DOM 有增加或删除页面元素的操作时，需要调用下面的refresh方法

    $(function(){
    $("[data-spy='scroll']").each(function(){
        var $spy=$(this).scrollspy("refresh");
    })
})

    注：这个方法必须使用 data-* 声明式。

  • 事件
    activate.bs.scrollspy：每当一个新条目被激活后都将有滚动监听触发此事件。

    $('#nav').on('activate.bs.scrollspy', function() {
    ...
});

标签页

页面结构
  1. 菜单项
    <!-- 标签页组件（菜单项nav-tabs）--> 
<ul class="nav nav-tabs">
    <li class="active">
    	<!-- 设置 data-toggle="tab" -->
        <a href="#bootstrap" data-toggle="tab">bootstrap</a>
    </li>
        ...
</ul>
  2. 内容面板
    <!-- 面板内容统一放在 tab-content 容器中 -->
<div class="tab-content">
	<!-- 每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与标签页中的 data-target 或 href 的值匹配 -->
    <div class="tab-pane" id="bootstrap">
        <p>bootstrap ... </p>
    </div>
      ...
</div>
  3. 标签页中链接的锚点要与对应的面板内容容器的ID相匹配。
调用方式
  1. data属性
    页面结构中就是data属性调用。
  2. JavaScript调用
    $('#nav a').on('click', function(e) {
    e.preventDefault();
    $(this).tab('show'); 
})
其他用法

  1. 淡入淡出：添加 .fade 到每个 .tab-pane 后面。最初的 默认显示 的内容面板一定要加上 in 类名，不然其内容用户无法看到。<div class="tab-pane fade in active" id="html5">

  2. 胶囊式标签页：直接将nav-tabs 换成 nav-pills即可。<ul class="nav nav-pills">

  3. 事件

    事件名描述
    show.bs.tab在调用tab事件时触发
    shown.bs.tab在显示整个标签时触发
    $('#nav a').on('show.bs.tab', function() {
    alert('调用 tab 时触发！');
});

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

工具提示（Tooltips）

  • 当鼠标悬浮于目标元素时进行提示，类似于原始HTML元素自带的 title 属性。
结构
  • 常用<button> 和 <a> 元素来做提示。
    <!-- data-toggle="tooltip"：表示这里会有一个工具提示 -->
<!-- title属性值则是要提示的文本；如果同时设置了 data-original-title和title，那么 data-original-title 的优先级要高于 title。 -->
<!-- data-placement:提示框出现的位置。top（默认值）、right、bottom 和 left -->
<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
触发方式
  • 此插件与之前的插件触发方式不同，它不直接通过自定义的属性 data-* 来触发，必须 得依赖于 JavaScript 的代码触发。
    //启动页面上所有的工具提示
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
//启动某一个工具提示，单独设置提示内容
$(function(){
    $('#myTooltip').tooltip({
       title:"超文本标识符"
    });
});
    注：如果元素中使用的title属性值作为提示文本，且没有在javascript中进行触发，就会出现原始的工具提示。
设置工具提示参数
属性名称类型默认值描述
original-title字符串“”提示框的提示信息
title字符串“”提示框的提示信息
placementstring / functiontop提示框的显示位置，可选项：top / right / bottom / left / auto。如果使用使用”auto“，将会再次调整，比如，如果声明”auto left“，提示框提示信息将尽量显示在左边，实在不行就会显示在右边。
animation布尔值true在提示框上运用一个动画效果
selector字符串false如果声明了 data-selector ,在触发该selector时才显示提示框
html布尔值false将HTML代码作为提示框的提示信息，如果是false，jQuery将使用text方法将HTML代码转换为文本作为提示框信息。
trigger字符串hoverfocus如何处罚提示框，可选值：click / hover / focus / manual。如果传入多个触发器，需要使用空格隔开，比如 hover focus
delaynumber / object0延迟多久才显示或关闭提示框，单位毫秒，不适用于manual触发器。如果传入是数字，则说明show / hide都延迟这个毫秒数。如果传入的是对象的话，结构是{show:500,hide:100}
containerstring / falsefalse将提示框附加到特定的元素上，比如：container:‘body’
template字符串提示语的HTML模板，可以自定义。默认值：



viewportstring / object确保提升框元素的边缘内，如viewport:'#viewport' 或者 {selector:'#viewport', padding:0}
方法
$('#element').tooltip('show'); //显示元素
$('#element').tooltip('hide'); //隐藏元素
$('#element').tooltip('toggle'); //切换显示/隐藏元素
$('#element').tooltip('destroy');//隐藏并销毁元素
事件
事件类型描述
show.bs.tooltip在show方法调用时立即触发
shown.bs.tooltip在提示框完全显示给用户之后触发
hide.bs.tooltip在hide方法调用时立即触发
hidden.bs.tooltip在提示框完全隐藏之后触发
$('#element').on('show.bs.tooltip', function() {
    alert('调用 show 时触发！');
});

弹出框（Popover）

  • 弹出框（Popover）和提示工具（tooltip）相比，就多了一个 data-content 属性，我们可以使用 data-content 来定义弹出框中的内容。
结构和调用
	<button class="btn btn-danger" type="button" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件"> 点我 </button>

	//全部激活
	$('button').popover();
	//设定并激活某一个
	$(function(){
		$('[data-toggle="popover"]').popover({
            title:"我是弹出框的标题",
            content:"我是弹出框的内容",
            placement:"right"
        });

	});

注：**Bootstrap 框架中触发弹出框和提示工具一样，不能直接通过 HTML 的自定义 data 属性来触发，需要依赖于JavaScript脚本**
方法和事件
	$('#element').popover('show'); //显示元素
	$('#element').popover('hide'); //隐藏元素
	$('#element').popover('toggle'); //切换显示/隐藏元素
	$('#element').popover('destroy');//隐藏并销毁元素
事件名描述
show.bs.popover在调用show方法时触发
shown.bs.popover弹窗完全显示后触发
hide.bs.popoover在调用hide方法时触发
hidden.bs.popover弹窗完全隐藏后触发
弹出框和提示工具的异同
  • 同：弹出框中 HTML 自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。
  • 异：
    1. 提示工具（tooltip）的默认触发事件是 hover 和 focus，而弹出框（popover）是 click。
    2. 提示工具（tooltip）只有一个内容（title），而弹出框不仅可以设置标题（title）还可以设置内容(content)

警告框

  • 警告框插件是在警告框组件的基础上添加单击 X 号能关闭警告框的功能。
结构
<div class="alert " role="alert">
    <button class="close" type="button" >&times;</button>
    恭喜恭喜！
</div>
触发方式

  • 声明式：来触发警告框，需要在关闭按钮上设置自定义属性·data-dismiss="alert"。

  • javascript:

     $('.close').on('click', function() {
 	//关闭所有的警告框。
    $('.alert').alert('close');
    })     
  
  //关闭某一个警告框
$("#myclose").on("click",function(){
   $(this).alert("close");
});
事件
事件类型描述
close.bs.alert当close方法被调用后立即触发
closed.bs.alert当警告框被完全关闭后触发
淡入淡出

  • 我们还可以添加淡入淡出效果，添加 .fade 和 .in 类即可。如下：

    <div class="alert alert-warning fade in" role="alert">
    <button class="close" type="button" >&times;</button>
    恭喜恭喜！
</div>

按钮

单个切换/加载状态
  • 单个切换：使用data-toggle属性可以激活按钮的 行为状态，实现在激活和未激活之间进行状态切换。
    <button class="btn btn-primary" data-toggle="button" >单个切换</button>
  • 加载状态：通过javascript实现按钮加载态的改变，添加 data-loading-text="Loading..." 可以为按钮设置正在加载时的文本。默认值“loading…"
    <button id="myButton" type="button" data-loading-text="Loading..." class="btn btn-primary"> 加载 </button>

    $('#myButton').on('click', function() { 
    var btn = $(this).button('loading');
    setTimeout(function() {
        btn.button('reset');
    }, 1000);
});
  • Button 插件中的 button 方法中有三个参数：
    • toggle：切换按压状态
    • reset：重置按钮状态
    • string：使用该方法，重置按钮状态，并添加新的内容(比如 loading、complete)
单选/复选
  • 单选按钮：通过一组按钮来实现单选择操作。创建单选按钮组需向 btn-group 添加 data 属性data-toggle="buttons"来添加单选按钮组的切换。
    <div class="btn-group" data-toggle="buttons">
    <label for="" class="btn btn-default active">
        <input type="radio" name="sex" checked>男 </label>
    <label for="" class="btn btn-default ">
        <input type="radio" name="sex">女 </label>
</div>
  • 复选按钮：通过一组按钮来实现多选择操作。 创建复选按钮也是通过在按钮组上自定义data-toggle="buttons"来实现，唯一不同的是，需将type="radio"换成type="checkbox"，如下所示：
    <div class="btn-group" data-toggle="buttons">
    <label for="" class="btn btn-primary active">
        <input type="checkbox" name="fa" autocomplete="off" checked> 音乐 
    </label>
    <label for="" class="btn btn-primary">
        <input type="checkbox" name="fa" autocomplete="off" checked> 美术 
    </label>
    <label for="" class="btn btn-primary">
        <input type="checkbox" name="fa" autocomplete="off" checked> 体育 
    </label>
     ...
</div>

折叠（Collapse）

结构
  • 点击区添加 data-toggle="collapse" 和 data-target="内容区标识"；内容区添加.collapse 和 标识比如ID
    <button class="btn btn-primary" data-toggle="collapse" data-target="#content"> w3cschool</button>
<!-- 如果默认为展开在collapse 后添加 in -->
<div class="collapse" id="content">
    <div class="well">
    w3cschool主要为初学者技术的人员提供在线学习教程和日常技术资料查询服务。
    </div>
</div>
手风琴折叠

  • 每个标题对应一个内容，在 Bootstrap 框架中将这两个部分组合起来称为一个 panel 面板，将多个面板组合在一起，就是一个面板组 panel-group，也就是手风琴的结构。

  • data-parent：默认值为false，设置需指定父元素选择器；指定该区域只展示一个，选择一个展示其他自动隐藏。取值与手风琴面板容器的标识符相匹配。

  • data-toggle：如果前面加data-*，设置collapse表示实现折叠；如果JavaScript中的属性，默认为true，实现反装。

    <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">点击我进行展示，再点击我进行折叠，第一部分</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body"> 这里是第一部分。 </div>
        </div>
    </div>
    ......
</div>
方法和事件

  • collapse 方法还提供了三个参数：hide、show、toggle。

    $('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
$('button').on('click', function() {
    $('#collapseOne').collapse('toggle');
});

  • Collapse 插件中事件有四种：

    事件类型描述
    show.bs.collapse在show方法调用时立即触发
    shown.bs.collapse折叠区完全展示出来触发
    hide.bs.collapse在hide方法调用时触发
    hidden.bs.collapse折叠区完全隐藏时触发
    $('#collapseOne').on('show.bs.collapse', function() {
    alert('当 show 方法调用时触发');
});

轮播（Carouse）

  • 结构

    <!-- 轮播容器 .carousel声明，.slide使过渡平滑 -->
<div id="myCarousel" class="carousel slide">
	<!-- .carousel-indicators声明这是计数器 -->
    <ol class="carousel-indicators">
        <!-- 设置图片轮播的顺序 -->
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- .carousel-inner声明图片展示区 设置轮播图片 -->
    <div class="carousel-inner">
    	<!-- 每个.item包含一个图片 -->
        <div class="item active">
            <img src="https://7n.w3cschool.cn/attachments/knowledge/201904/86459.png" alt="第一张">
        </div>
        <div class="item">
            <img src="https://7n.w3cschool.cn/attachments/knowledge/201812/12495.png" alt="第二张">
        </div>
        <div class="item">
            <img src="https://7n.w3cschool.cn/attachments/knowledge/201901/42502.png" alt="第三张">
        </div>
    </div>
	<!-- .carousel-control声明控制器 .left向左 .right向右 -->
	<!-- data-side控制展示哪一个 prev上一个，next下一个 -->
    <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>
<script>
    $('#myCarousel').carousel({
        interval : 2000, //秒轮播时间间隔为2秒
        pause : 'hover', //设置暂停按钮的事件
        wrap : false,//只播一次
    });
</script>

    注：控制器的样式需要自己写，Bootstrap自带的样式很丑。

  • 触发轮播图的播放

  1. 声明式：声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。
    data-slide： 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
    data-slide-to：来向轮播底部创建一个原始滑动索引， data-slide-to="2"表示将把滑动块移动到一个特定的索引，索引从 0 开始计数。
    data-ride="carousel" ：属性用户标记轮播在页面加载时开始动画播放。
    data-interval：默认值5000，幻灯片的等待时间（毫秒）。如果为false幻灯片不会自动播放。
    data-pause：默认鼠标停留在幻灯片区域（hover）就暂停轮播，鼠标离开就开始轮播。
    data-warp：默认为true，是否支持循环。

  2. javascript触发式：直接使用键值对方法，并去掉 data-。

    $('#myCarousel').carousel({ 
    interval : 2000, //秒轮播时间间隔为2秒
    pause : 'hover', //设置暂停按钮的事件
    wrap : false,//只播一次
});

  • 方法和事件

    方法名称描述
    cycle循环各帧，默认从左到右
    pause暂定轮播
    number轮到到指定的图片，角标从“0”开始
    prev循环轮播到上一个图片
    next循环轮播到下一个图片
    $('button').on('click', function() { //点击后，自动播放
    $('#myCarousel').carousel('cycle'); //其他雷同
});
    事件名称描述
    slide.bs.carousel当调用slide方法时立即触发该事件
    slid.bscarousel当轮播完一个图片时调用该事件
    $('#myCarousel').on('slide.bs.carousel', function() {
    alert('当调用 slide 实例方式时立即触发');
});

$('#myCarousel').on('slid.bs.carousel', function() {
    alert('当轮播完成一个幻灯片触发');
});

附加导航（Affix）

  • 附加导航：粘贴在屏幕某处实现锚点功能。
  • 常见效果：顶部固定、侧边栏固定、底部固定。
声明式触发
<!-- 注意：在 body 要声明滚动监控。 -->
<body data-spy="scroll" data-target="#myScrollspy">
<!-- 固定区 -->
<div data-spy="affix" data-offset="90">affix元素</div>
<!-- 分开设置 data-offset 值 -->
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>

使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。data-offset-bottom一样。

ul .nav-pills { 
    width: 200px;
}
ul .nav-pills .affix {
    top: 40px;
}
/* 我们默认使用的是 top，当然也可以默认居底 bottom。这个定位方式是直接通过 CSS定位的。
设置成 bottom */
ul .nav-tabs .affix-bottom {
    bottom: 30px;
}
javascript触发
$('#myAffix').affix({
    offset : {
        top : 150 }
})
事件
事件名称描述
affix.bs.affix在定位结束之前立即触发
affixed.bs.affix在定位结束之后立即触发
affix-top.bs.affix在定位应用affixed-top效果之前触发
affixed-top.bs.affix在定位应用affixed-top效果之后触发
affix-bottom.bs.affix在定位应用affixed-bottom效果之前触发
affixed-bottom.bs.affix在定位应用affixed-bottom效果之后触发
$('#myAffix').on('affixed-top.bs.affix', function() {
    alert('触发！');
});
sKK07
关注
专栏目录
bootstrap练习题
PanHanJia的博客
09-10 2075
什么是BootStrap框架 Html、Css和BootStrap框架的关系是什么 下列代码布局合理吗？不合理的话，应该怎么改进 <div> 名字：<input type="text" name="username"> <br> 昵称：<input type="text" name="nickname"> <...
JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
最新发布
m0_60707538的博客
04-21 889
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
bootstrap练习
weixin_42199230的博客
09-10 573
1,什么是BootStrap框架 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前 端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推 出后颇受欢迎，一直是GitHub上的热...
bootstrap 网格系统学习
ab680125的博客
04-27 99
Bootstrap 官方文档中有关网格系统的描述： Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。 让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设...
Bootstrap学习笔记—关于网格系统
flywaterfree的博客
04-05 1383
Bootstrap学习—关于网格系统1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。举例：<div class="container"> <div class="row"></div> </div>2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。举例：<div class="conta
软UI设计系统——开源Bootstrap5设计系统.zip
03-29
软UI设计系统是一种基于Bootstrap5框架的开源设计系统，它为开发者提供了丰富的界面元素和组件，以便快速构建响应式、美观且易于使用的Web应用程序。Bootstrap5是世界上最流行和广泛使用的前端开发框架之一，其更新...
web前端开发第一阶段——bootstrap响应式布局
qq_43151638的博客
10-30 316
ps: 记熟class样式，可提高速度 其中js使用的jquery库 开发环境：程序员使用时 有空格有注释，有警告，有提示的代码 生产环境：用户直接使用时 压缩，没有警告，没有注释 bootstrap 容器：标签大小 固定容器：container 大屏1170、中屏970、小屏750、超小屏100% 流体容器：container-fluid 100% 栅格系统：通过一系列row和column...
Bootstrap框架——栅格系统
ln201009的博客
12-28 3766
1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为Bootstrap框架。 2、打开桌面新建的文件夹，在js里面放入bootstrap所需要的css和js。 3、然后继续打开vs文件，去新建的html文件里边，用外部样式，引入bootstrap的css样式表。 4、再在body标签里边，引入bootstrap的js文件，我们先引入这些的原因是因为为引入bootstrap的插件做好准备工作，不然到后面出现问题很麻烦。接下来我们就
Vue 合同模板_Vue+BootStrapV4，构建响应式、移动优先项目——BootstrapVue
weixin_39789327的博客
10-27 665
介绍BootStrap是世界上最受欢迎的构建响应式移动优先网站的框架，Vue是当前最流行的前端框架之一，BootstrapVue则是将两者相结合，使用BootstrapVue，可以使用Vue.js和前端CSS库--Bootstrap v4在Web上构建响应式，移动优先项目。BootstrapVue具有超过40个插件和超过75个自定义组件，为Vue.js提供了最全面的Bootstrap v4组件和网...
Bootstrap基础练习28个样例（含代码）
04-30
自学的BootStrap,里面有28个基础样例（Css + jquery），Index.html目录起，适合开发时，忘记了，拿过来就用
Bootstrap小练习
qq_36365638的博客
08-20 495
Bootstrap 101 Template                                                                                                                              
BootStrap的简单练习
好好学习，天天向上
04-18 223
BootStrap的简单练习
bootstrap小练习
qq_54998648的博客
05-25 333
bootstrap提供的许多功能需要去慢慢了解，在项目中实战即可。这里将进行一个简单的表单制作。 用户登录表单 1.使用bootstrap进行响应式布局； 2.使用选项卡(tab)进行不同功能区的切换； 3.使用form-horizontal和form-group类进行表单布局； 4.使用form-control类美化表单控件； 5.使用btn btn-success等类美化按钮； 6.使用glyphicon设立图标； <!doctype html> <.
练习使用bootstrap
m0_58766017的博客
03-09 373
使用bootstrap编写导航条和网页（2020年3月9日作业） <!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-scal
Bootstrap基础练习（一）
doc_wei
10-22 3621
在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下： .text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d).text-i
Bootstrap实战练习---进入前端开发项目组实习1(swiper+card+JS)
Season CSDN博客
07-29 413
Bootstrap实战练习—进入前端开发项目组实习1(swiper+card+JS) 原链接网址 原网址效果 我的网址效果 我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>进入前端开发项目组实习https://www.eduwork.cn/categroy/web.html#</title> <!-..
Bootstrap实战练习---前端开发利器jQuery入门到精通【导航栏】
Season CSDN博客
08-12 408
Bootstrap实战练习—前端开发利器jQuery入门到精通【导航栏】 弹出框的效果图 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端开发利器jQuery入门到精通https://www.lmonkey.com/course/YRdG7dDz</title> <!--移动设备优先--> &
Bootstrap小练习------插件系列
Super_pan 的专栏
09-26 1315
模态框： 演示模态框 演示模态框 × 模态框标题 文本框内容 关闭 提交更改
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sKK07

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值