精华内容
下载资源
问答
  • 【web框架】Bootstrap框架使用
    2022-03-11 20:44:58

    一、Bootstrap简介

    Bootstrap来自推特,基于HTML、CSS和JavaScript,简洁灵活,使得web开发更加便捷。

    官网:
    Bootstrap中文网
    官网

    下载链接:
    当前版本: v3.4.1

    解压后文件夹中有以下三个文件👇
    在这里插入图片描述

    二、Bootstrap使用

    1.创建文件夹

    • 点击上文下载链接,下载bootstrap并解压;
    • 在项目中新建一个名为bootstrap的文件夹;
    • 将已经解压好的三个文件复制到我们创建的bootstrap文件夹中。

    在这里插入图片描述

    2.创建html骨架

    • 使用以下给出的这份超级简单的 HTML 模版,或者修改这些实例。
    • 可以对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴。
    • 拷贝并粘贴下面给出的 HTML 代码,这就是一个最简单的 Bootstrap 页面了。
    <!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-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
          <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>你好,世界!</h1>
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
      </body>
    </html>
    

    3.引入相关样式

    • 在head标签内使用link引入,即👇
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    
    • href="bootstrap/css/***** 可按需自选

    4.书写内容

    • 直接复制定义好的样式 :点击跳转组件
      例如:若要使用(首选项)这个蓝色按钮,就复制对应代码👇
    <button type="button" class="btn btn-primary">(首选项)Primary</button>
    

    在这里插入图片描述

    • 若想修改预定义好的样式,可以加一个类名,利用我们自己写的样式覆盖原先的样式。

    具体操作如下图👇在这里插入图片描述效果图下👇在这里插入图片描述

    更多相关内容
  • bootstrap框架

    2018-07-11 11:54:18
    Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...
  • Bootstrap框架

    千次阅读 2021-12-20 09:50:17
    Bootstrap框架 1.响应式开发 (1)响应式开发原理 响应式开发就是通过媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕(手机) <= 768xp 小屏...

    Bootstrap框架


    1.响应式开发

    (1)响应式开发原理

    响应式开发就是通过媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。

    设备划分尺寸区间
    超小屏幕(手机)<= 768xp
    小屏设备(平板)768px ~ 992px
    中等屏幕(左面显示器)992px ~ 1200px
    宽屏设备(大桌面显示器)>= 1200px
    (2)响应式布局容器

    响应式需要一个父级容器作为布局容器,来配合子集元素来实现变化效果。

    在不同屏幕下,通过媒体查询来改变这个布局容器的大小,最后改变其中的子元素的排列方式和大小,实现不同的页面布局和样式变化。

    响应式尺寸划分:

    屏幕类型设置宽度
    超小屏幕(手机,小于768px)设置宽度为100%
    小屏幕(平板,大于等于768px)设置宽度为750px
    中等屏幕(桌面显示器,大于等于992px)宽度设置为970px
    大屏幕(大桌面显示器,大于等于1200px)宽度设置为1170px

    2.Bootstrap文件框架

    Bootstarp来自Twitter是目前最受欢迎的前端框架,基于html、css和javaScript其更为灵活,使得Web开发更加快捷。

    Bootstrap使用手册:https://getbootstrap.com/

    步骤
    step1:创建文件夹结构
    step2:创建html骨架结构
    step3:引入相关样式文件
    step4:书写页面内容

    在这里插入图片描述

    3.Bootstarp布局容器:

    注意:Bootstrp需要为页面内容和栅格系统包裹一个.containner容器,Bootstrap预先定义好了这个类。

    (1)container类:
    1. 响应式布局的容器(固定宽度)
    2. 大屏(>=1200px)宽度定为1170px
    3. 中屏(>=992px)宽度定为970px
    4. 小屏(>=768px)宽度定为750px
    5. 超小屏幕(100%)
    (2)container-fluid类:
    • 流式布局容器(百分百宽度)
    • 占据全部视口(viewport)的容器
    • 适合于单独做移动端开发

    4.Bootstrap栅格系统

    gridsystems网格系统,是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局

    (1)栅格系统使用:

    网格系统是通过一系列的行(row)与列(column)的组合来创建页面布局的,页面内容将被放在这些创建好的布局中。

    超小屏幕(手机<768px)小屏设备(平板>=768px)中等屏幕(>=992px)宽屏设备(>=1200px)
    .conntainer最大宽度自动100%750px970px1170px
    类前缀.col-xs-.col-sm-.col-md-.col-lg-
    列(column)总数12121212

    注意:

    1. 行(row)必须放到container布局容器里面
    2. 要实现列的平均划分需要给列添加类前缀
    3. 每一列默认有左右15像素的padding值
    4. 可以同时为一列指定多个设备类名,以便划分不同的份数。
    <!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-scale=1">
        <!--[if lt IE 9]>
          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    	<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    	<title>Bootstrap</title>
    	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		[class^="col"] {
    			border: 1px solid #ccc;
    		}
    		.container .row:nth-child(1) {
    			background-color: pink; col-sm-6
    		}
    	</style>
      </head>
      <body>
    	  <div class="container">
    		  <div class="row">
    			  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
    			  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
    			  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
    			  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    		  </div>
    		  <!-- 如果孩子的份数相加等于12,则占满整个contanner -->
    		  <div class="row">
    			  <div class="col-lg-6">1</div>
    			  <div class="col-lg-2">2</div>
    			  <div class="col-lg-2">3</div>
    			  <div class="col-lg-2">4</div>
    		  </div>
    		  <!-- 如果孩子的份数相加小于12,则占不满整个contanner -->
    		  <!-- 如果孩子的份数相加大于12,则多余的份数会另起一行 -->
    	  </div>
      </body>
    </html>
    
    (2)栅格系统列嵌套:
    <!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-scale=1">
    		<!--[if lt IE 9]>
    			<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    			<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    		<![endif]-->
    		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    		<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
    		<title>列嵌套</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			[class^="col"] {
    				border: 1px solid #ccc;
    			}
    
    			.row>div {
    				height: 50px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="row">
    				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    					<!-- 注意:列嵌套最好添加一个row行,这样可以取消父元素的padding值(而且高度自动修改) -->
    					<div class="row">
    						<div class="col-md-6">a</div>
    						<div class="col-md-6">b</div>
    					</div>
    				</div>
    				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
    				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
    				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    (3)栅格系统列偏移:

    使用.col-md-offset-*类可以将列向右侧偏移,这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)。

    在这里插入图片描述

    <!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-scale=1">
    		<!--[if lt IE 9]>
          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    		<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
    		<title>列嵌套</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			[class^="col"] {
    				border: 1px solid #ccc;
    			}
    
    			.row div {
    				height: 50px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="row">
    				<div class="col-md-3">左侧</div>
    				<div class="col-md-3 col-md-offset-6">右侧</div>
    			</div>
    			<div class="row">
    				<div class="col-md-8 col-md-offset-2">中间盒子</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    注意:本质上为盒子做的偏移是在盒子的左侧添加上一个margin值

    (4)栅格系统列排序:

    通过使用.col-md-push-*.col-md-pull-*类就可以很容易的改变列(column)的顺序。

    在这里插入图片描述

    <!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-scale=1">
    		<!--[if lt IE 9]>
          <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->
    		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    		<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css" />
    		<title>列排序</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    
    			[class^="col"] {
    				border: 1px solid #ccc;
    			}
    
    			.row div {
    				height: 50px;
    				background-color: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container">
    			<div class="row">
    				<div class="col-md-4">左侧</div>
    				<div class="col-md-8">右侧</div>
    			</div>
    			<div class="row">
    				<div class="col-md-4 col-md-push-8">左侧</div>
    				<div class="col-md-8 col-md-pull-4">右侧</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    (5)栅格系统响应式工具:

    为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示 or 隐藏页面内容

    类名超小屏小屏中屏大屏
    .hidden-xs隐藏可见可见可见
    .hidden-sm可见隐藏可见可见
    .hidden-md可见可见隐藏可见
    .hidden-ld可见可见可见隐藏

    与之相反的是visible-xsvisible-smvisible-mdvisible-lg

    注意:具体的Bootstrap其他(按钮、表单、表格)请参考bootstrap文档。

    展开全文
  • bootstrap框架下带搜索功能的下拉树插件,在bootstrao-select和bootstrap-treeview的基础上实现(带演示模板可以直接使用)
  • 主要介绍了基于Bootstrap框架实现图片切换的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了Django添加bootstrap框架时无法加载静态文件的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • bootstrap制作的一个简单的登陆界面样式,js初学者
  • 这是我对平时bootstrap使用练习的一个集合,欢迎下载,使用的时候一定要注意更改页面底部标签-_-
  • bootstrap框架使用中遇到的问题和解决方法。希望能够帮到更多人
  • 如何使用bootstrap?这篇文章就是告诉大家如何使用bootstrap框架,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于Python的博客使用tornado和bootstrap框架开发(螺壳网)
  • 这是我对平时bootstrap使用练习的一个集合,欢迎下载,使用的时候一定要注意更改页面底部标签-_-
  • ssm框架,包含登录,页面展示,数据添加等,前台使用bootstrap框架
  • 资源包含bootstrap的CSS样式与JS组件的下载文件,同时包括Bootstrap框架的相关使用资源索引。 资源包还包含了jQuery的JS文件,满足你各种需要。
  • 主要介绍了springboot整合jquery和bootstrap框架过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • bootstrap框架开发源码

    2018-09-04 13:21:57
    bootstrap框架开发源码,完整框架体系,明确的开发注解,适合初学者快速入门
  • bootstrap框架实例大全

    2018-10-16 18:11:15
    包含bootstrap完整的组件参考实例,让你的网页开发更快速!
  • 前端Bootstrap框架

    2018-08-20 10:42:41
    前端Bootstrap框架,非常好用,快来下载试用吧,版本3.3.7
  • 主要介绍了BootStrap框架中的data-[ ]自定义属性理解(推荐),非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 。。。。。。。H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台
  • 绿色Bootstrap框架企业模板是一款专业的企业网站HTML5响应式模板。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。
  • NFine快速开发框架 C#源码完全开源版 基于ASP.NET MVC+EF6+Bootstrap框架
  • Bootstrap框架使用Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。1 下载Bootstrap2 在项目中导入上面解压...前往bootstrap框架的官方文档处下载bootstrap官网 点进去后

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

    1 下载Bootstrap

    前往bootstrap框架的官方文档处下载bootstrap官网
    在这里插入图片描述

    点进去后选择【用于生产环境的 Bootstrap】
    在这里插入图片描述

    下载后解压:
    在这里插入图片描述
    解压后出现三个文件夹:
    在这里插入图片描述

    2 在项目中导入上面解压的三个文件夹【复制到项目中】

    在这里插入图片描述

    3 创建HTML文件,引入资源文件

    在bootstrap官网找到基本模板复制粘贴进行修改创建HTML文件
    在这里插入图片描述
    在这里插入图片描述
    这里还需要引入一个jQuery.min.js文件,js文件依赖于它,在jQuery官网再次下载jQuery官网 这里使用3.2.1版本
    在这里插入图片描述
    解压后再次将他导入到js文件下
    在这里插入图片描述

    在这里插入图片描述

    至此,基本模板创建完成,后续文件在此模板上进行增加,总结来说,主要引入了三个文件,css,bootstrap.js,jquery.js文件。
    在这里插入图片描述

    模板代码给出:

    <!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-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <!--  引入CSS文件-->
        <link rel="stylesheet" href="/css/bootstrap.min.css"
              integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--    &lt;!&ndash;[if lt IE 9]>-->
    <!--    <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
    <!--    <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <!--    <![endif]&ndash;&gt;-->
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="js/jquery-3.2.1.min.js"
                integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
                crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
                crossorigin="anonymous"></script>
    </head>
    <body>
    <h1>你好,世界!</h1>
    </body>
    </html>
    

    4 Bootstrap框架使用

    Bootstrap使用借助官方文档:Bootstrap官方使用文档
    这里演示一个框架里面的组件:导航条
    在这里插入图片描述
    使用框架源码:

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <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>
          <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><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    

    完整源码:

    <!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-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <!--  引入CSS文件-->
        <link rel="stylesheet" href="css/bootstrap.min.css"
              integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
        <!--    &lt;!&ndash;[if lt IE 9]>-->
        <!--    <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
        <!--    <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
        <!--    <![endif]&ndash;&gt;-->
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="js/jquery-3.2.1.min.js"
                integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
                crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
                crossorigin="anonymous"></script>
    </head>
    <body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
    
            <!-- Collect the nav links, forms, and other content for toggling -->
            <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>
                <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><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    </body>
    </html>
    

    效果演示:
    在这里插入图片描述

    展开全文
  • bootstrap 常用实例以及插件实现 可以下载后直接copy使用
  • Bootstrap框架;前端开发是创建Web页面或app等前端界面的过程。 前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。 熟悉掌握HTML、服务器端脚本语言、CSS...
  • bootstrap框架压缩包

    2018-06-15 16:09:38
    bootstrap是基于HTML,CSS,JAVASCRIPT开发的前端开发框架,简洁灵活,使得Web开发更加快捷
  • BootStrap框架公共六个部分:(css组件和js插件是其表现形式,其余的是基础支撑平台) 表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅格系统 基础布局组件 jQuery 响应式设计 1.1 CSS12栅格系统 12栅格系统是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 122,099
精华内容 48,839
关键字:

bootstrap框架

友情链接: 2.zip