精华内容
下载资源
问答
  • bootstrap 教程,带笔记

    2016-03-22 15:44:35
    tutorials point 原版bootstrap教程,带有笔记
  • bootstrap教程.zip

    2019-05-18 22:12:11
    bootstrap教程,非常好的教程课件,很 详细,通俗易懂。
  • bootstrap教程

    2016-03-02 22:56:04
    bootstrap框架的教程,对bootstrap框架进行了全面的介绍,很全。
  • BootStrap教程

    2016-04-15 14:30:48
  • bootstrap教程,里面有丰富的CSS样式,可以快速开发网站
  • bootstrap视频教程

    2017-05-16 18:13:07
    该套bootstrap视频教程是从网上扒下来的 非当前的最新版本教程,但是对于新手还是挺不错的。视频时间很短,每节只有几分钟。
  • Bootstrap Studio教程.pdf

    2020-05-15 16:05:18
    Bootstrap Studio是一款功能非常强大的网页设计软件,该软件最大的作用就是帮助用户设计和原型化网站,能够快速的建立一个响应式的网站,内置了大量的功能组件,用户通过拖放即可使用,大大提高了编写网站的便捷性,...
  • BootStrap入门教程

    2018-07-27 17:01:22
    Boostrap是一个非常受欢迎的前端开发框架,该框架极大的... Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装,使开发人员可以轻松使用。 使用Bootstrap可以快速制作精美的响应式页面,并且兼容移动端。
  • 从零开始Bootstrap教程

    2021-01-15 10:13:53
    第一章 认识 Bootstrap 1.1 Bootstrap 简介 Bootstrap,来自 Twitter,是很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 1.1 创建第一个 Bootstrap 1.2 ...
    Bootstrap 简介
     Bootstrap是来自Twitter的,很受欢迎的前端框架。
     Bootstrap是基于HTML、CSS、JAVASCRIPT的,相当简洁灵活,能让开发变得更加快捷。
    
    第一个 Bootstrap
    准备工具
    Visual Studio Code(页面编写,需要安装插件)。
    HBuilder(如果你不想使用Visual Studio Code,推荐使用这个)
    下载地址
    https://code.visualstudio.com 
    https://www.dcloud.io/hbuilderx.html
    
    工具安装(以Visual Studio Code为例子)
    第一步
    复制上述的下载地址到浏览器,打开Visual Studio Code官网。
    
    如下图

    在这里插入图片描述

    第二步
    根据你的操作系统选择合适的安装包。
    

    在这里插入图片描述

    第三步
    双击打开下载的安装包。
    安装Visual Studio Code。
    一直点击下一步就行了。
    

    在这里插入图片描述
    在这里插入图片描述
    安装结束以后,我们需要安装Visual Studio Code的插件,然后才可以继续开始。

    Visual Studio Code插件安装
    第一步

    需要安装的插件汇总

    HTML Snippets(H5代码片段以及提示)
    HTML CSS Support(HTML标签上写CLASS会智能提示当前项目所支持的样式)
    jQuery Code Snippets(jQuery支持)
    Path Intellisense(自动路径补全)
    Bootstrap 3 Sinnpet (必装插件,Bootstrap要用)
    Atuo Rename Tag(修改html标签,自动帮你完成尾部闭合标签的同步修改)
    
    第二步
    双击打开安装好的Visual Studio Code。
    点击扩展如下图。
    应用商店搜索上述第一步的扩展进行安装。
    

    在这里插入图片描述

    扩展插件安装完成以后,下一步开始Bootstrap的下载与安装。
    
    展开全文
  • bootstrap教程源码.zip

    2021-10-30 21:55:23
    bootstrap教程源码
  • Bootstrap教程

    2018-11-21 20:52:44
    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 前端学习网址:... Bootstrap教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html 小记一下!...

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

    小记一下!

    展开全文
  • BootStrap视频教程

    2017-11-13 16:02:22
    一整套的BootStrap视频教程,引领你走上前端之路,还等什么,赶紧来下载吧!!
  • Bootstrap教程.zip

    2021-01-09 16:36:03
    Bootstrap教程.zip
  • 引导滚动条 Bootstrap教程项目 该存储库是Bootstrap Tutorail的一部分,我将使用此存储库作为以后的Bootstrap教程的实践项目。 在以下URL上查看文档项目: :
  • Bootstrap教程-StepByStep 该存储库包含Bootstrap Tutorial @ 起始文件和最终代码。 介绍 To create a perfect bootstrap responsive landing page for your app, business, portfolio or blog. “ Bootstrap是一个...
  • 是基于w3cshool菜鸟教程网站上的bootstrap制作而成,非常详细,是很好的学习bootstrap的资料
  • 1. Bootstrap Bootstrap: 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 * 框架:一个半...

    内容

    1. Bootstrap
    

    Bootstrap:

    1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
    	* 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
    	* 好处:
    		1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
    		2. 响应式布局。
    			* 同一套页面可以兼容不同分辨率的设备。
    
    
    2. 快速入门
    	1. 下载Bootstrap
    	2. 在项目中将这三个文件夹复制
    		css
    		fonts
    		js
    	3. 创建html页面,引入必要的资源文件(js/jquery-3.2.1.min.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 HelloWorld</title>
    		
    		    <!-- Bootstrap -->
    		    <link href="css/bootstrap.min.css" rel="stylesheet">
    		
    		
    		    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    		    <script src="js/jquery-3.2.1.min.js"></script>
    		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    		    <script src="js/bootstrap.min.js"></script>
    		</head>
    		<body>
    		<h1>你好,世界!</h1>
    		
    		</body>
    		</html>
    

    响应式布局

    * 同一套页面可以兼容不同分辨率的设备。
    * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
    * 步骤:
    	1. 定义容器。相当于之前的table、
    		* 容器分类:
    			1. container:两边留白
    			2. container-fluid:每一种设备都是100%宽度
    	2. 定义行。相当于之前的tr   样式:row
    	3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
    		* 设备代号:
    			1. xs:超小屏幕 手机 (<768px):col-xs-12
    			2. sm:小屏幕 平板 (≥768px)
    			3. md:中等屏幕 桌面显示器 (≥992px)
    			4. lg:大屏幕 大桌面显示器 (≥1200px)
    
    	* 注意:
    		1. 一行中如果格子数目超过12,则超出部分自动换行。
    		2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
    		3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。
    

    CSS样式和JS插件

    1. 全局CSS样式:
    	* 按钮:class="btn btn-default"
    	* 图片:
    		*  class="img-responsive":图片在任意尺寸都占100%
    		*  图片形状
    			*  <img src="..." alt="..." class="img-rounded">:方形
    			*  <img src="..." alt="..." class="img-circle"> : 圆形
    			*  <img src="..." alt="..." class="img-thumbnail"> :相框
    	* 表格
    		* table
    		* table-bordered
    		* table-hover
    	* 表单
    		* 给表单项添加:class="form-control" 
    2. 组件:
    	* 导航条
    	* 分页条
    3. 插件:
    	* 轮播图
    
    <!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>轮播图案例</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
    
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
        <script src="js/jquery-3.2.1.min.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/banner_1.jpg" alt="...">
            </div>
            <div class="item">
                <img src="img/banner_2.jpg" alt="...">
            </div>
            <div class="item">
                <img src="img/banner_3.jpg" alt="...">
            </div>
    
        </div>
    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    
    </body>
    </html>
    

    响应式旅游网页案例

    	<!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 HelloWorld</title>
    	
    	    <!-- Bootstrap -->
    	    <link href="css/bootstrap.min.css" rel="stylesheet">
    	
    	
    	    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    	    <script src="js/jquery-3.2.1.min.js"></script>
    	    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    	    <script src="js/bootstrap.min.js"></script>
    	    <style>
    	        .paddtop{
    	            padding-top: 10px;
    	        }
    	        .search-btn{
    	            float: left;
    	            border:1px solid #ffc900;
    	            width: 90px;
    	            height: 35px;
    	            background-color:#ffc900 ;
    	            text-align: center;
    	            line-height: 35px;
    	            margin-top: 15px;
    	        }
    	
    	        .search-input{
    	            float: left;
    	            border:2px solid #ffc900;
    	            width: 400px;
    	            height: 35px;
    	            padding-left: 5px;
    	            margin-top: 15px;
    	        }
    	        .jx{
    	            border-bottom: 2px solid #ffc900;
    	            padding: 5px;
    	        }
    	        .company{
    	            height: 40px;
    	            background-color: #ffc900;
    	            text-align: center;
    	            line-height:40px ;
    	            font-size: 8px;
    	        }
    	    </style>
    	</head>
    	<body>
    	
    	   <!-- 1.页眉部分-->
    	   <header class="container-fluid">
    	       <div class="row">
    	           <img src="img/top_banner.jpg" class="img-responsive">
    	       </div>
    	       <div class="row paddtop">
    	           <div class="col-md-3">
    	               <img src="img/logo.jpg" class="img-responsive">
    	           </div>
    	           <div class="col-md-5">
    	               <input class="search-input" placeholder="请输入线路名称">
    	               <a class="search-btn" href="#">搜索</a>
    	           </div>
    	           <div class="col-md-4">
    	               <img src="img/hotel_tel.png" class="img-responsive">
    	           </div>
    	
    	       </div>
    	       <!--导航栏-->
    	       <div class="row">
    	           <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="#">首页</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><a href="#">Link</a></li>
    	                           <li><a href="#">Link</a></li>
    	                           <li><a href="#">Link</a></li>
    	                           <li><a href="#">Link</a></li>
    	
    	                       </ul>
    	                   </div><!-- /.navbar-collapse -->
    	               </div><!-- /.container-fluid -->
    	           </nav>
    	
    	       </div>
    	
    	       <!--轮播图-->
    	       <div class="row">
    	           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    	               <!-- Indicators -->
    	               <ol class="carousel-indicators">
    	                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    	                   <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    	                   <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    	               </ol>
    	
    	               <!-- Wrapper for slides -->
    	               <div class="carousel-inner" role="listbox">
    	                   <div class="item active">
    	                       <img src="img/banner_1.jpg" alt="...">
    	                   </div>
    	                   <div class="item">
    	                       <img src="img/banner_2.jpg" alt="...">
    	                   </div>
    	                   <div class="item">
    	                       <img src="img/banner_3.jpg" alt="...">
    	                   </div>
    	
    	               </div>
    	
    	               <!-- Controls -->
    	               <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    	                   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    	                   <span class="sr-only">Previous</span>
    	               </a>
    	               <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    	                   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    	                   <span class="sr-only">Next</span>
    	               </a>
    	           </div>
    	
    	
    	
    	       </div>
    	
    	   </header>
    	   <!-- 2.主体部分-->
    	   <div class="container">
    	        <div class="row jx">
    	            <img src="img/icon_5.jpg">
    	            <span>黑马精选</span>
    	        </div>
    	
    	       <div class="row paddtop">
    	           <div class="col-md-3">
    	                <div class="thumbnail">
    	                    <img src="img/jiangxuan_3.jpg" alt="">
    	                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                    <font color="red">&yen; 699</font>
    	                </div>
    	           </div>
    	           <div class="col-md-3">
    	               <div class="thumbnail">
    	                   <img src="img/jiangxuan_3.jpg" alt="">
    	                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                   <font color="red">&yen; 699</font>
    	               </div>
    	
    	           </div>
    	           <div class="col-md-3">
    	
    	               <div class="thumbnail">
    	                   <img src="img/jiangxuan_3.jpg" alt="">
    	                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                   <font color="red">&yen; 699</font>
    	               </div>
    	           </div>
    	           <div class="col-md-3">
    	
    	               <div class="thumbnail">
    	                   <img src="img/jiangxuan_3.jpg" alt="">
    	                   <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                   <font color="red">&yen; 699</font>
    	               </div>
    	           </div>
    	
    	
    	       </div>
    	       <div class="row jx">
    	           <img src="img/icon_6.jpg">
    	           <span>国内游</span>
    	       </div>
    	       <div class="row paddtop">
    	           <div class="col-md-4">
    	               <img src="img/guonei_1.jpg">
    	           </div>
    	           <div class="col-md-8">
    	               <div class="row">
    	                   <div class="col-md-4">
    	                       <div class="thumbnail">
    	                           <img src="img/jiangxuan_3.jpg" alt="">
    	                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                           <font color="red">&yen; 699</font>
    	                       </div>
    	                   </div>
    	                   <div class="col-md-4">
    	                       <div class="thumbnail">
    	                           <img src="img/jiangxuan_3.jpg" alt="">
    	                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                           <font color="red">&yen; 699</font>
    	                       </div>
    	
    	                   </div>
    	                   <div class="col-md-4">
    	
    	                       <div class="thumbnail">
    	                           <img src="img/jiangxuan_3.jpg" alt="">
    	                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                           <font color="red">&yen; 699</font>
    	                       </div>
    	                   </div>
    	
    	               </div>
    	               <div class="row">
    	                   <div class="col-md-4">
    	                       <div class="thumbnail">
    	                           <img src="img/jiangxuan_3.jpg" alt="">
    	                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                           <font color="red">&yen; 699</font>
    	                       </div>
    	                   </div>
    	                   <div class="col-md-4">
    	                       <div class="thumbnail">
    	                           <img src="img/jiangxuan_3.jpg" alt="">
    	                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                           <font color="red">&yen; 699</font>
    	                       </div>
    	
    	                   </div>
    	                   <div class="col-md-4">
    	
    	                       <div class="thumbnail">
    	                           <img src="img/jiangxuan_3.jpg" alt="">
    	                           <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
    	                           <font color="red">&yen; 699</font>
    	                       </div>
    	                   </div>
    	
    	
    	               </div>
    	
    	           </div>
    	
    	       </div>
    	   </div>
    	   <!-- 3.页脚部分-->
    	   <footer class="container-fluid">
    	       <div class="row">
    	           <img src="img/footer_service.png" class="img-responsive">
    	       </div>
    	       <div class="row company">
    	           江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP16007882
    	       </div>
    	
    	   </footer>
    	
    	
    	</body>
    	</html>
    

    PC端效果图
    在这里插入图片描述
    手机端效果
    在这里插入图片描述

    总的来说,Bootstrap简单易学,很多代码都在官网上有,大家可以查阅其官网:https://v3.bootcss.com/
    需要jquery-3.2.1.min.js的朋友可以私信我哦!
    不关注不点赞的都是白嫖哦!!!😕

    展开全文
  • 主要为大家详细介绍了spring mvc配置bootstrap,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Tutorialspoint Bootstrap 教程.epub
  • 启动引导 一个简单的 bootstrap 演示
  • 本文主要来学习一下JavaScript插件–弹出框。 案例 为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息。 先来看几个简单的静态案例效果图 效果比较简单主要就是静态的弹出的小窗体,...
  • B站bootstrap教程爱代码的全栈念小安视频源码,无需积分,免费下载
  • 本文主要来学习一下JavaScript插件–滚动监听。 1、案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面,看看左侧导航的变化。...link href="css/bootstrap.min.css" r
  • Bootstrap教程.CHM

    2014-05-08 08:12:00
    自己制作的Bootstrap教程.CHM

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,342
精华内容 14,936
关键字:

bootstrap教程