精华内容
下载资源
问答
  • 2019-05-04 10:16:52

    bootstrap可以说是没有布局和审美概念的后端狗的福利。使用它的栅格系统可以轻松的对网页进行布局,而且可以做到响应式的布局。看起来很酷,接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给大家,作为一个专栏管理。

    知识点

    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

    container: 用于固定宽度并支持响应式布局的容器

    page-header:  页头

    row: 通过“行(row)”在水平方向创建一组“列(column)”

    spanN:预定义栅格

     

    效果

     

     

    代码

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    
    </head>
    
    <body>
    <div class="container">
      <h1 class="page-header">响应式布局<small> 使用Bootstrap网格系统布局网页</small></h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. Maecenas facilisis tellus quis nisl facilisis eget mollis lectus feugiat. Etiam pharetra mattis ultrices. In ac mi metus, ac pharetra ipsum. Aenean imperdiet sem purus. Suspendisse quis odio eu neque varius posuere. Fusce tincidunt tincidunt arcu non viverra. Vivamus dui eros, rhoncus cursus porta quis, sollicitudin a ante. Aliquam porta euismod sollicitudin.</p>
      <div class="row">
        <div class="span4">
          <h2 class="page-header">区块一</h2>
          <p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
        </div>
        <div class="span4">
          <h2 class="page-header">区块二</h2>
          <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum,consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
        </div>
        <div class="span4">
          <h2 class="page-header">区块三</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
        </div>
      </div>
      <div class="row">
        <div class="span8">
          <h2 class="page-header">主内容</h2>
          <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum,consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget .,consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
        </div>
        <div class="span4">
          <h2 class="page-header">边栏</h2>
          <p>Lorem ipsum dolor sit amet, quam accumsan vestibulum,consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
        </div>
        
      </div>
    </div>
    <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> 
    <script src="../bootstrap/js/bootstrap.js"></script>
    </body>
    </html>
    

     

    更多相关内容
  • 这是我自己用Bootstrap仿写的一个星巴克网页,可供下载学习借鉴,如用作商业用途,产生纠纷本人概不负责。
  • 使用BootStrap完成的响应式网页布局,适合初学者学习参考使用
  • 20份经典bootstrap响应式网页源码。没事可以练练,不错的
  • bootstrap 响应式网页demo bootstrap 响应式网页demo源码 一共四个demo,可供参考
  • 本作品为基于bootstrap框架制作的响应式自适应网页,可自适应PC、移动端。网页题材为海贼王,整个成品共4个页面,包括:首页、图文介绍页面、视频页面、音乐播放器页面。 首页有轮播大图和图片列表板块,介绍页面为...

    bootstrap框架海贼王动漫网页制作

    作品介绍

    本作品为基于bootstrap框架制作的响应式自适应网页,可自适应PC、移动端。网页题材为海贼王,整个成品共4个页面,包括:首页、图文介绍页面、视频页面、音乐播放器页面。
    首页有轮播大图和图片列表板块,介绍页面为基础图文内容,视频页面使用H5标签插入视频,音乐页面为音乐播放器页面,点击可以在线播放音乐。

    作品预览

    海贼王网页
    介绍页面
    视频介绍页面
    音乐播放页面

    作品地址

    stu-works.com/html/dongman/355.html

    展开全文
  • bootstrap实现响应式登录页面
  • Bootstrap响应式个人简历网站模板.zip
  • jQuery Bootstrap响应式全屏背景图轮播单页网站模板,提供10种风格,演示只展示1种,请查查下载文件
  • bootstrap完成的响应式星巴克网站源码,本网站也是借鉴成品网站完成,仅供开发人员下载学习,如用作商业用途,本人概不负责。
  • bootstrap响应式扁平化网页后台管理系统模板。可以做二次开发使用。网页精美,各种bootstrap插件齐全。
  • CSS——响应式网页(Bootstrap)

    千次阅读 2022-04-10 16:46:18
    响应式网页就是在大屏里看是一种布局,在小一点的屏幕看又是另一种布局,在更小的屏幕看又换了一种布局。如图所示: 一、媒体查询 作用:根据条件的不同,设置不同的css样式。 1、写法1 min-width(从小到大...

    一套代码可以兼容不同的屏幕设备。响应式网页就是在大屏里看是一种布局,在小一点的屏幕看又是另一种布局,在更小的屏幕看又换了一种布局。如图所示:

    一、媒体查询

    作用:根据条件的不同,设置不同的css样式。

    1、写法1

    min-width(从小到大),max-width(从大到小)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 视口宽度小于等于768px, 网页背景色是粉色 */
            @media (max-width: 768px) {
                body {
                    background-color: pink;
                }
            }
    
            /* 视口宽度大于等于1200px, 网页背景色是skyblue */
            @media (min-width: 1200px) {
                body {
                    background-color: skyblue;
                }
            }
            
        </style>
    </head>
    <body>
        
    </body>
    </html>

    2、写法2

    外链式CSS引入

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 视口宽度 >= 992px,网页背景色为粉色 -->
        <!-- 视口宽度 >= 1200px,网页背景色为绿色 -->
        <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
        <link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
    </head>
    <body>
        
    </body>
    </html>

    3、隐藏 

    市面上,电商站做响应式页面是用了隐藏内容的。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                display: flex;
                width: 100%;
            }
    
            .left {
                width: 300px;
                min-height: 500px;
                background-color: pink;
            }
    
            .main {
                flex: 1;
                min-height: 500px;
                background-color: skyblue;
            }
    
            /* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
            @media (max-width: 768px) {
                .left {
                    display: none;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">left</div>
            <div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果</div>
        </div>
    </body>
    </html>

    二、Bootstrap

    bootstrap里面是封装好的代码,有做响应式页面的功能;里面有base.css

    UI框架概念:将常见效果进行统一封装后形成的一套代码, 例如:BootStrap。

    作用:基于框架开发,效率高,稳定性高。

    Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定 HTML 结构及JavaScript,快速编写功能完善的网页及常见交互效果。

    中文官网: https://www.bootcss.com/

    Bootstrap不仅封装了css,还有html,js。

    1、Bootstrap的使用

    先下载,再用。有dist的是框架,没有dist的是源码。

    使用步骤:先引入css样式表,然后调用类名。

    bootstrap.css和bootstrap.min.css是一样的,只是有min的那个代码压缩到了同一行。做项目,且不改里面的代码的时候,用min的那个,这样加载快,省流量。

    container:响应式布局版心类

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BootStrap使用方法</title>
        <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
        <style>
            div {
                height: 50px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="container">1</div>
    </body>
    </html>

     2、Bootstrap栅格系统

    栅格系统:把网页等分成12等份,每个内容占12份中的份数。

    栅格化是指将整个网页的宽度分成若干等份。

    BootStrap3默认将网页分成12等份

    BootStrap3将所有屏幕分为4类。下图中的 * 代表占的份数。768,992,1200这几个数要记下来,类前缀也要记下来。

     在下面的代码中,col-lg-这些类前缀代码里面是写了浮动的,这样就可以在一行了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>栅格系统</title>
        <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    
        <style>
            .container div {
                height: 50px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
        <div class="container">
            <div class="col-lg-3 col-md-6">1</div>
            <div class="col-lg-3 col-md-6">2</div>
            <div class="col-lg-3 col-md-6">3</div>
            <div class="col-lg-3 col-md-6">4</div>
        </div>
        
    </body>
    </html>

    Bootstrap框架的作用:布局响应式网页。里面的间距padding,margin这些都是写的15px,如果不想要这个间距,可以自己写css,也可以用.row类,.row类带有-15px的间距

    .container是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。左右有15px的padding

    .container-fluid也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%。,左右有15px的padding。

    1. container类自带间距15px;

    2. row类自带间距-15px

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>栅格系统-类</title>
        <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
        <style>
            div {
                height: 50px;
                background-color: pink;
                margin-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <!-- 版心样式:自带左右各15px的padding -->
        <div class="container">1</div>
    
        <!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
        <div class="container">
            <div class="row">2</div>
        </div>
    
        <!-- 宽度100%:自带左右各15px的padding -->
        <div class="container-fluid">3</div>
    </body>
    </html>

     3、全局样式

    可以在网站上去看全局样式、组件、插件。 

     全局css就是控制单独标签的样式的。

    组件:在网页中有导航、下拉菜单、有分页效果、有搜索功能等,这些区域的功能的css在组件里。

    Js插件:交互效果。

    在这些里面复制粘贴以后,改成自己想要的。

    定制:这个框架也不可能满足项目的所有要求,在定制页面输入自己的,重新生成一份框架。

    BootStrap预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点。、

    网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类。

    举例子:

    在全局样式中,单击表格:

     原本的代码和运行效果如图所示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>全局CSS样式-表格</title>
        
    </head>
    <body>
        <table>
            <tr>
                <th>数字1</th>
                <th>数字2</th>
                <th>数字3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    
        
    </body>
    </html>

    在框架中复制出类名,加上:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>全局CSS样式-表格</title>
        <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    </head>
    <body>
        <table class="table table-striped">
            <tr>
                <th>数字1</th>
                <th>数字2</th>
                <th>数字3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    
        
    </body>
    </html>

     

     table是基本样式的类名,后面的那些类名都是table-XX,table-XX都是在table类加上以后添加的。

    4、组件

    使用方法:先引入BootStrap样式,再复制结构,修改内容。

    引入字体图标:Glyphicons字体图标的使用步骤:

                                            HTML页面引入BootStrap样式文件 ;

                                            准备字体文件 (注意路径);

                                            空标签调用对应类名:glyphicon和图标类。(官网手册里面就已经有两个类名了)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>字体图标</title>
        <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    </head>
    <body>
        <i class="glyphicon glyphicon-user"></i>
    </body>
    </html>

    5、插件

    封装了html,css为一体,可以让网页有交互效果。

    插件的使用步骤:

                    1、引入BootStrap样式;

                    2、引入js文件:jQuery.js + BootStrap.min.js(引入的是两个js文件,且有先后顺序,jQuery必须在前面)

                    3、复制HTML结构, 并适当调整结构或内容。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./02-bootstrap基本使用/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class="dropdown">
            <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown trigger
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dLabel">
              <li>1</li>
              <li>1</li>
              <li>1</li>
            </ul>
          </div>
        
        <script src="./02-bootstrap基本使用/js/jquery.js"></script>
        <script src="./02-bootstrap基本使用/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

    展开全文
  • 基于bootstrap框架,实现网页响应式开发;banner轮播,tab选项卡切换
  • Bootstrap响应式食饮类网页制作

    千次阅读 多人点赞 2021-09-28 22:54:39
    一、BootStrap介绍 1、知识点概述 Bootstrap是由Twitter(著名的社交网站)推出的前端开源工具包,它基于 HTML、CSS、JavaScript 等前端技术,2011 年8月在 GitHub 上发布,一经推出颇受欢迎。在本书编著时Bootstrap...

    静态资源下载https://pan.baidu.com/s/1uifJAYTI8MB4ys0VFGvR0g 提取码:4ghi

    一、BootStrap介绍

    1、知识点概述
    Bootstrap是由Twitter(著名的社交网站)推出的前端开源工具包,它基于 HTML、CSS、JavaScript 等前端技术,2011 年8月在 GitHub 上发布,一经推出颇受欢迎。在本书编著时Bootstrap的最新版本是3.3.6。
    Bootstrap中预定义了一套CSS样式,和与样式对应的jQuery(jQuery是一个快速、小巧、功能丰富的JavaScript库)代码,应用时我们只需提供固定的HTML结构,添加Bootstrap中提供的class名称,就可以完成指定效果的实现。

    2、Bootstrap工具包

    内容介绍
    基本结构Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
    CSSBootstrap 自带全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的栅格系统。这将在 Bootstrap CSS 部分详细讲解。
    布局组件Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
    JavaScript 插件Bootstrap 包含了十几个自定义的 jQuery 插件。可以直接包含所有的插件,也可以逐个包含这些插件。
    定制开发人员可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到一套自定义的版本。

    先来看看整个网页最后效果是怎样的吧↓
    在这里插入图片描述

    二、前置条件

    1、下载网址:Bootstrap工具包(http://getbootstrap.com/)

    在这里插入图片描述
    2、下载开发工具:HBuilderX(https://www.dcloud.io/hbuilderx.html)

    3、将下载Bootstrap工具包解压,把里面的css和js的预定义文件放在HBuilderX创建的 lib 目录下
    在这里插入图片描述
    4、将所有图片素材放在 images 目录下在这里插入图片描述

    接下来我们就可以开始制作了

    三、实现代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>Bootstrap食饮类网页</title>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <!-- 此属性为文档兼容(compatible)模式声明,表示使用IE浏览器的最新渲染模式。-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 根据设置确定视口宽度,device-width表示采用设备宽度,初始缩放1.0,使用user-scalable=no可以禁用其缩放(zooming)功能。-->
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    	<link href="css/web.css" rel="stylesheet" type="text/css" media="all">
    	<!-- 引用css样式文件-->
            
    </head>
    
    <body>
    <!-- header -->
    <header>
    <div class="head-top"></div>
    <nav class="navbar navbar-default " role="navigation" style="width: 100%;text-align: center;">
            <div class="container-fluid">
                <div class="container">
        <!--这里可以定义品牌图标-->
            <div class="navbar-header" >
                <a href="#" class="navbar-brand" ><img src="images/logo.png"  alt=""></a>
    			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
    			    <span class="sr-only">汉堡按钮</span>
    			    <span class="icon-bar"></span>
    			    <span class="icon-bar"></span>
    			    <span class="icon-bar"></span>
    			</button>
            </div>
    		
        <div class="collapse navbar-collapse" id="navbar-collapse" >
            <ul class="nav navbar-nav" style="display: inline-block;float: none;">
                <li><a href="##">主页</a></li>
                <li><a href="##">餐厅</a></li>
                <li><a href="##">健康</a></li>
    			<li><a href="##">话题</a></li>
                <li><a href="##">联系我们</a></li>
    			<li><a href="#"><span class="two_color">0.00</span> <span class="glyphicon glyphicon-shopping-cart"
    			                                aria-hidden="true"></span></a></li>
            </ul>
    	</div>
    </nav>
    </header>
    <!-- header -->
    <!--搜索区域-->
    <div class="bg">
            <div class="container one1">
                <div class="reservation one">
                    <form class="form-horizontal" role="form" style=""> 
                        <div class="form-group" >
                            <div class="col-sm-10 ">
                                <input type="email" class="form-control two" id="inputEmail3" placeholder="请输入餐厅名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10 ">
                                <select id="country"  class="form-control two">
                                    <option value="null">请选择城市</option>
                                    <option value="bj">北京</option>
                                    <option value="sh">上海</option>
                                    <option value="sz">深圳</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset- col-sm-10 col-xs-offset-3 col-xs-offset-5">
                                <button type="submit" class="btn btn-danger col-sm-5 col-xs-8"> <span
                                        class="glyphicon glyphicon-search" aria-hidden="true"> </span> 搜索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
    </div>
    <!-- 搜索区域结束 -->
    <!-- 热卖商品 -->
    <div style="padding-top: 50px;padding-bottom: 50px;">
            <div class="container">
                <div class="row" >
                    <div class=" col-md-4 "  >
                        <h3 style="padding-bottom: 5px;border-bottom: 2px solid #ccc;">米西奈斯煎饼</h3>
    
                        <img src="images/4.jpg"  alt=""  style="width: 100%;height: 300px;" >
                        <h6 class="green"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>两种口味可供选择
                        </h6>
                        <div>
                            <button class="btn btn-block btn-danger">添加到购物车</button>
                        </div>
                        <div class="font-color3">一口价:¥45.00</div>
                    </div>
                    <div class=" col-md-4  ">
                        <h3 style="padding-bottom: 5px;border-bottom: 2px solid #ccc;">蒙特斯大虾</h3>
                        <img src="images/1.jpg" alt="" style="width: 100%;height: 300px;">
                        <h6 class="green"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>三种口味可供选择
                        </h6>
                        <div>
                            <button class="btn btn-block btn-danger">添加到购物车</button>
                        </div>
                        <div class="font-color3">一口价:¥55.00</div>
                    </div>
                    <div class=" col-md-4  ">
                        <h3 style="padding-bottom: 5px;border-bottom: 2px solid #ccc;">香酥鸡排</h3>
                        <img src="images/3.jpg" alt=""  style="width: 100%;height: 300px;">
                        <h6 class="green"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>两种口味可供选择
                        </h6>
                        <div>
                            <button class="btn btn-block btn-danger" type="">添加到购物车</button>
                        </div>
                        <div class="font-color3">一口价:¥65.00</div>
                    </div>
                </div>
            </div>
    </div>
    <!--热卖商品结束 -->
    <!--特色推荐-->
    <div class="container">
        <div class="choose">
            <div class="row">
                <div class="col-md-12">
                    <div class="navbar-header hidden-xs">
                        <a class="navbar-brand" href="#"><img src="images/title.jpg" /></a>
                    </div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-pills navbar-right " role="tablist" style="margin-right: 0px;">
                        <li role="presentation" class="active"><a href="#dishes"  role="tab" data-toggle="tab">菜品</a></li>
                        <li role="presentation"><a href="#drink"  role="tab" data-toggle="tab">饮品</a></li>
                        <li role="presentation"><a href="#staple"  role="tab" data-toggle="tab">主食</a></li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="tab-content">
                        <!--菜品-->
                        <div role="tabpanel" class="tab-pane active" id="dishes">
                            <div class=" col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small01.jpg"/>
                                <p>菜品</p>
                                <p>145.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small02.jpg"/>
                                <p>菜品</p>
                                <p>165.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small04.jpg"/>
                                <p>菜品</p>
                                <p>165.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small02.jpg"/>
                                <p>菜品</p>
                                <p>165.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small07.jpg"/>
                                <p>菜品</p>
                                <p>145.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small08.jpg"/>
                                <p>菜品</p>
                                <p>165.0</p>
                            </div>
                        </div>
    
                        <!--饮品-->
                        <div role="tabpanel" class="tab-pane" id="drink">
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small03.jpg"/>
                                <p>饮品</p>
                                <p>98.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small03.jpg"/>
                                <p>饮品</p>
                                <p>98.0</p>
                            </div>
                        </div>
                        <!--</div>-->
                        <!--主食-->
                        <div role="tabpanel" class="tab-pane" id="staple">
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small05.jpg"/>
                                <p>主食</p>
                                <p>56.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small06.jpg"/>
                                <p>主食</p>
                                <p>56.0</p>
                            </div>
                            <div class="product-item col-md-2 col-sm-4 col-xs-6">
                                <img src="products/small09.jpg"/>
                                <p>主食</p>
                                <p>56.0</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--特色推荐结束-->
    <!--轮播广告-->
    <div class="container hidden-xs" >
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- 轮播(Carousel)项目 -->
            <div class="carousel-inner ">
                <div class="item active">
                    <div class="pic">
                        <img src="images/1p.jpg"  alt="">
                        <img src="images/2p.jpg"  alt="">
                        <img src="images/3p.png"  alt="">
                        <img src="images/4p.jpg"  alt="">
                        <img src="images/5p.jpg"  alt="">
                        <img src="images/6p.jpg"  alt="">
                    </div>
                </div>
                <div class="item ">
                    <div class="pic">
                        <img src="images/2p.jpg"  alt="">
                        <img src="images/3p.png"  alt="">
                        <img src="images/4p.jpg"  alt="">
                        <img src="images/5p.jpg"  alt="">
                        <img src="images/6p.jpg"  alt="">
                        <img src="images/7p.jpg"  alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/3p.png"  alt="">
                        <img src="images/4p.jpg"  alt="">
                        <img src="images/5p.jpg"  alt="">
                        <img src="images/6p.jpg"  alt="">
                        <img src="images/7p.jpg"  alt="">
                        <img src="images/8p.jpg"  alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/4p.jpg"  alt="">
                        <img src="images/5p.jpg"  alt="">
                        <img src="images/6p.jpg"  alt="">
                        <img src="images/7p.jpg"  alt="">
                        <img src="images/8p.jpg"  alt="">
                        <img src="images/1p.jpg"  alt="">
                    </div>
                </div>
                <div class="item ">
                    <div class="pic">
                        <img src="images/5p.jpg"  alt="">
                        <img src="images/6p.jpg"  alt="">
                        <img src="images/7p.jpg"  alt="">
                        <img src="images/8p.jpg"  alt="">
                        <img src="images/1p.jpg"  alt="">
                        <img src="images/2p.jpg"  alt="">
                    </div>
                </div>
                <div class="item ">
                    <div class="pic">
                        <img src="images/6p.jpg"  alt="">
                        <img src="images/7p.jpg"  alt="">
                        <img src="images/8p.jpg"  alt="">
                        <img src="images/1p.jpg"  alt="">
                        <img src="images/2p.jpg"  alt="">
                        <img src="images/3p.png"  alt="">
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="images/7p.jpg"  alt="">
                        <img src="images/8p.jpg"  alt="">
                        <img src="images/1p.jpg"  alt="">
                        <img src="images/2p.jpg"  alt="">
                        <img src="images/3p.png"  alt="">
                        <img src="images/4p.jpg"  alt="">
                    </div>
                </div>
                <div class="item ">
                    <div class="pic">
                        <img src="images/8p.jpg"  alt="">
                        <img src="images/1p.jpg"  alt="">
                        <img src="images/2p.jpg"  alt="">
                        <img src="images/3p.png"  alt="">
                        <img src="images/4p.jpg"  alt="">
                        <img src="images/5p.jpg"  alt="">
                    </div>
                </div>
            </div>
            <!-- 轮播(Carousel)导航 -->
            <a class="carousel-control left  " href="#myCarousel" role="button " data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right " href="#myCarousel" role="button" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <!--轮播广告结束-->
    <!-- footer-->
    <footer class="footer">
        <div class="container">
            <div class="footer-left">
                <p>Copyrights © 2016 Bootstrap 响应式餐饮网站  | 版权所有 <a href="#"></a></p>
            </div>
            <div class="footer-right">
                <ul>
                    <li><a href="#"><i class="glyphicon glyphicon-phone-alt">&nbsp;联系我们</i></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-map-marker">&nbsp;公司地址</i></a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-question-sign">&nbsp;服务声明</i></a></li>
    
                </ul>
            </div>
        </div>
    </footer>
    
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- Bootstrap 的 JavaScript 插件需要引入 jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    </body>
    </html>
    

    css样式文件

    			.head-top{
    				background: #5fa022;
    				padding: 0.8em 0;
    			}
    			.navbar-default{
    			    padding: 1.5em 0;
    			    background-color: #f2f0f1;
    			    box-shadow: 12px -5px 39px -12px;
    			}
    			.navbar-default .navbar-nav>li a {
    			    top: 10px;
    			    padding: 0.5em 3em;
    			    text-decoration: none;
    			    font-weight: 600;
    			    font-size: 1.2em;
    			    color:#919191;
    			}
                .bg {
                    background: url(../images/banner.jpg);
                    background-size: 100%;
                    background-repeat: no-repeat;
        
                }
    			.navbar-brand{
    			    padding: 0 0;
    			}
    			.navbar-brand>img{
    			    height: auto;
    			    margin-right: 5px;
    			    margin-top: 5px;
    			    width: 250px;
    			}
    			.two_color {
    			     color: red !important;
    			
    			}
    			li:hover {
    			    background-color: #D96B66;
    			}
    			.form-control{
    			    color: #8e908d;
    			}
                .one1 {
                    display: flex;
                    justify-content: center
                }
                .one {
    				margin-bottom: 10%;
                    margin-top: 10%;
                    width: 50%;
                    padding: 60px 60px;
                    background-color: rgba(233, 233, 219, 0.7)
                }
                .two {
                    background-color: #ffffff;
                    opacity: 1;
                }
    			.green {
    			    color: green;
    			}
    			.font-color3 {
    			    color: red;
    			    font-size: 20px;
    			}
    			.btn-block {
    			    text-align: left;
    			}
    			.nav-pills>li>a{
    			    color:#8e908d ;
    			}
    			/*设置选项卡菜单鼠标悬停和获取焦点时背景色和字体颜色*/
    			.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    			    color: #fff;
    			    background-color: #5A9522;
    			}
    			.choose{
    			    border: 1px solid silver;
    			}
    			.tab-content{
    			    margin: 5px;
    			    text-align: center;
    			}
    			.pic{
    			    margin: 0 auto;
    			    width: 800px;
    			    padding: 20px;
    			}
    			.carousel {
    			    background: white;
    			}
    			/*媒体查询:当视口小于992px时缩小了轮播div的宽度,图片换行*/
    			@media (max-width:992px) {
    			    .pic{
    			        width: 415px;
    			    }
    			}
    			.footer p {
    			    color: #fff;
    			    font-size: 1em;
    			    line-height: 1.8em;
    			    vertical-align: middle;
    			    margin: 0.4em 0;
    			}
    			.footer p a{
    			    color: #fff;
    			    text-decoration:none;
    			}
    			.footer {
    			    padding: 1em 0;
    			    background-color:#D96B66;
    			}
    			.footer-right ul {
    			    padding: 0;
    			}
    			.footer-right li {
    			    display: inline-block;
    			    margin: 0 1em;
    			}
    			.footer-left {
    			    float: left;
    			}
    			.footer-right {
    			    float: right;
    			}
    			.glyphicon{
    			    font-size: 1.2em;
    			    color: #f2f0f1 ;
    			}
    

    本次分享到此结束了,有什么问题欢迎评论区留言,谢谢。

    展开全文
  • Bootstrap响应式个人简历网站模板,自适应分辨率,兼容PC端和移动端,全套模板,包括首页、Email me、照片等多个网站模板页面。Bootstrap响应式个人简历网站模板截图
  • bootstrap响应式网页

    千次阅读 2017-06-01 16:06:54
    什么是响应式网页? 一个页面,可以在各种不同的设备下浏览,都有不错的浏览体验。 相应式网页的三个特征: 1.流式布局 2.可伸缩的图片可字体 3.CSS3 Media Query 如何编写响应式网页: 如何测试响应式网页: 1....
  • bootStrap响应式网站.zip

    2020-07-02 02:37:23
    二十套精美的响应式网站,除了基本的HTML+CSS+JS以外,还用到了bootStrap,因为bootStrap天生就支持响应式。这些网站设计整体风格和个人博客网站类似,适合参考其响应式网页布局,同样适合同学们完成网页大作业。
  • 响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页,本篇就来讲解下如何使用Bootstrap构建符合标准规范的响应式网页。 2. 创建标准HTML5页面 首先创建一个标准的HTML5网页,代码如下: <!DOCTYPE...
  • bootstrap 响应式 旅游网站开发 QQ临时会话 百度地图api调用 首页 分页 登录 注册 仿携程网站 bootstrap 响应式 旅游网站开发 QQ临时会话 百度地图api调用 首页 分页 登录 注册 仿携程网站
  • bootstrap响应式自我介绍网站模板
  • 一款简洁实用基于HTML5 Bootstrap实现的响应式手机导航下拉菜单代码,Bootstrap自适应电脑手机端导航下拉菜单网页特效。
  • jQuery html5响应式布局制作垂直时间轴特效,bootstrap设计响应式网页垂直时间轴代码
  • 最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备。使用它编写响应式页面快捷、方便,而且屏蔽了浏览器差异。使用了 Bootstrap 后,再也无法...
  • Bootstrap编写的一个响应式网页

    千次阅读 2020-10-12 21:37:42
    Bootstrap响应式 CSS 能够自适应于台式机、平板电脑和手机。 学过css和html的特别容易上手 快速开发 Web 应用程序和网站的前端框架 下载完成后解压放在项目中即可,如下面项目目录 然后这便是代码(图片网上...
  • jQuery Bootstrap响应式商城网站模板,全套所有功能模块齐全。
  • 未来软件园为大家推荐一款可以快速进行响应式网站设计的Mac软件,Bootstrap Studio为大家提供了大量内置组件,使得大家只需要通过拖放方式就可以组装响应式网页,十分方便。Bootstrap Studio自身建立在极受欢迎的...
  • Bootstrap响应式网页设计视频教程,很短的课程,每一节都不长。免费分享给大家,有需要的小伙伴回复留邮箱。
  • 响应式布局——Bootstrap

    千次阅读 2022-04-05 16:57:54
    目标:使用BootStrap框架快速开发响应式网页 Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定HTML结构及Javascript,快速编写功能完善网页及常见交互效果 中文...
  • Bootstrap 响应式开发网页响应式布局 + 轮播图案例,非常详尽!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,685
精华内容 6,274
关键字:

bootstrap响应式网页