bootstrap学习笔记

已于 2022-04-16 17:44:23 修改
阅读量319 收藏
点赞数
分类专栏： 11 文章标签： bootstrap html
于 2022-04-16 17:43:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lj1641719803hh/article/details/124217297
版权

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 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="./css/index.css"/>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[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]-->
  </head>
  <body>
    
    <nav class="navbar navbar-inverse">
  <div class="container">
    <!-- 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="#"><img src="img/logo.png"></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="#">首页 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">解决方案</a></li>
        <li><a href="#">成功案例</a></li>
        
      </ul>
      <form class="navbar-form navbar-right">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="搜索">
           <span class="input-group-btn"><button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button></span>
        </div>
       
      </form>
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="jumbotron">
  <div class="container">
    <div class="row">
     <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
       <h2>公司简介</h2>
     <p >GEMINITECH有限公司， 我们作为创新型科技企业，拥有一个充满朝气，高素质、年轻化、专业化的开发团队， 为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务， 集策划，设计，开发，营销服务于一体的新型互联网企业.</p>
     </div>
     <div class="col-lg-5 col-md-5 hidden-sm hidden-xs"><img src="img/person.png" class="img-responsive"></div>
</div>
  </div>
</div>
	<div class="container-fluid bg-gray">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-lg-offset-2">
					<h2 class="common-title text-center">解决方案</h2>
					<p class="common-detail">主要从事互联网品牌建设与网络营销，专业领域包括网站建设，微信开发，网络营销，电子商务服务外包相关类别，并积极开拓IT技术在各个行业应用的咨询服务。致力于为用户提 供适合的解决方案。</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 list-item">
					<h4>网站建设</h4>
					<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
				</div>
				<div class="col-md-4 list-item item2">
					<h4>网站建设</h4>
					<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
				</div>
				<div class="col-md-4 list-item item3">
					<h4>网站建设</h4>
					<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
				</div>
				<div class="col-md-4 list-item item4">
					<h4>网站建设</h4>
					<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
				</div>
				<div class="col-md-4 list-item item5">
					<h4>网站建设</h4>
					<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
				</div>
				<div class="col-md-4 list-item item6">
					<h4>网站建设</h4>
					<p>品牌展示网站、官方门户网站、营销网站建设、电商平台开发</p>
				</div>
				</div>
			</div>
	   </div>
   <div class="container-fluid">
	   <div class="container">
		   <div class="row">
			   	<div class="col-md-8 col-lg-offset-2">
					<h2 class="common-title text-center">成功案例</h2> 
					<p class="common-detail">以HTML5技术为基础，实现移动终端自动兼容与浏览，延伸品牌和用户之间的触点设计开发符合移动端的H5页面，
					全面兼容手机、PAD等移动设备，拓宽品牌传播渠道，结合移动互联网的特点，将个性化、社会化、场景化融入项目。</p>
				</div>
			
					<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic01.jpg"></div>
					<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic02.jpg"></div>
					<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic03.jpg"></div>
					 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic04.jpg"></div>
				     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic05.jpg"></div>
				     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic06.jpg"></div>
					 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic07.jpg"></div>
					 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><img src="img/pic08.jpg"></div>
				</div>
			</div>
		</div>
		
		
   <div class="container-fluid bg-primary common">
      <div class="container">
       <div class="row">
		   <h2 class="text-center">合作伙伴</h2>
		   <div class="col-lg-8 col-lg-offset-2 text-center ">我们有众多的合作伙伴。</div>
         <div class="col-lg-2 common-item"><a href="" class="logo1"></a></div>
         <div class="col-lg-2 common-item"><a href="" class="logo2"></a></div>
         <div class="col-lg-2 common-item"><a href="" class="logo3"></a></div>
         <div class="col-lg-2 common-item"><a href="" class="logo4"></a></div>
         <div class="col-lg-2 common-item"><a href="" class="logo5"></a></div>
       </div>
      </div>
   </div>
<div  class="container-fluid gray-bg">
   <div class="container">
     <div class="row links-list">
      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
        <dt>公司</dt>
          <dd><a href="#">关于我们</a></dd>
          <dd><a href="#">公司招聘</a></dd>
          <dd><a href="">公司团队</a></dd>
          <dd><a href="">版权</a></dd>
          <dd><a href="">使用条款</a></dd>
          <dd><a href="">隐私政策</a></dd>
          <dd><a href="">联系我们</a></dd>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
        <dt>公司</dt>
          <dd><a href="#">关于我们</a></dd>
          <dd><a href="#">公司招聘</a></dd>
          <dd><a href="">公司团队</a></dd>
          <dd><a href="">版权</a></dd>
          <dd><a href="">使用条款</a></dd>
          <dd><a href="">隐私政策</a></dd>
          <dd><a href="">联系我们</a></dd>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
        <dt>公司</dt>
           <dd><a href="#">关于我们</a></dd>
          <dd><a href="#">公司招聘</a></dd>
          <dd><a href="">公司团队</a></dd>
          <dd><a href="">版权</a></dd>
          <dd><a href="">使用条款</a></dd>
          <dd><a href="">隐私政策</a></dd>
          <dd><a href="">联系我们</a></dd>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6">
        <dt>公司</dt>
           <dd><a href="#">关于我们</a></dd>
          <dd><a href="#">公司招聘</a></dd>
          <dd><a href="">公司团队</a></dd>
          <dd><a href="">版权</a></dd>
          <dd><a href="">使用条款</a></dd>
          <dd><a href="">隐私政策</a></dd>
          <dd><a href="">联系我们</a></dd>
      </div>
    </div>
   </div>
</div>
<div class="container-fluid dark-bg">
   <div class="container">
     <div class="row footer">
       <div class="col-lg-6 col-md-6 col-sm-6 text-left">
         &copy; 2017 Comlogo.All Rights Reserved.
       </div>
       <div class="col-lg-6 col-md-6 col-sm-6 text-right">
         <a href="">HOME</a> 
         <a href="">ABOUT US</a> 
         <a href="">FAP</a>
         <a href=""> CONTACT US</a>
       </div>
     </div>
   </div>
</div>





  <!-- 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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

T7xxx！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap学习笔记
qq_51861704的博客
05-17 413
1：背景 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如W.
专题5：Bootstrap学习笔记
日月 的专栏
01-17 2461
一、布局： 1.12列栅格系统，支持列偏移             ...         ...     2.划定内容区域                      ...              3.支持流式布局
Bootstrap学习笔记（一）
Mr_欢先生 博客
04-12 564
一.什么是Bootstrap？ Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。——《百度百科》 1.Bootstrap：下载地址2.准备工作1.响应式布局： <meta name="viewport" content="width=device-width,ini
BootStrap学习笔记
qq_37965402的博客
05-17 247
这里写目录标题1. BootStrap介绍及下载2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统2.2.1 列组合2.2.2 列偏移2.2.3 列排序2.2.4 列嵌套2.2.5 屏幕的自动调整 1. BootStrap介绍及下载 2. 布局容器和栅格网格系统 2.1 布局容器 container：固定宽度并支持响应式布局的容器：两边会有留白 <div class="container"> ... </div> container-fluid：类
Bootstrap【学习笔记】
最新发布
weixin_52487106的博客
01-18 338
学习笔记
Bootstrap
狗凡的博客
10-17 184
Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值