bootstrap主体

最新推荐文章于 2023-01-24 15:49:53 发布
最新推荐文章于 2023-01-24 15:49:53 发布
阅读量199 收藏
点赞数 1
文章标签： bootstrap html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61090178/article/details/123729253
版权

导航栏固定在顶部

 <div class="container-fluid navbar-inverse navbar-fixed-top">
      <!-- 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="index.html">博客-首页</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><a href="index.html">博客首页 <span class="sr-only">(current)</span></a></li>
          <li class="active"><a href="document.html">博文列表</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下载中心 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">下载工具</a></li>
              <li><a href="#">代码页</a></li>
              <li><a href="#">软件之家</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">学习资料</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">哈哈哈哈哈</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" value="你想搜索的内容" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">登录</a></li>
		  <li><a href="#">注册</a></li>
          <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下载中心<span class="caret"></span></a></li>
        </ul>
      </div>
    </div>

导航栏

页脚固定在底部

<div class="container-fluid footer">
		  <div class="row">
		    <div class="col-md-12 ">
				Copyright ©copy;<a href="">SHINE博客 </a> | <a href=""> ICP备111号-2</a>
			</div>
		  </div>
	  </div>

页脚

主体

<div class="container-fluid">
		<div class="row">
			<div class="col-md-9 bg-info">
				<ul class="nav nav-tabs">
				  <li role="presentation" class="active"><a href="#">最新推荐</a></li>
				  <li role="presentation"><a href="#">本周热门</a></li>
				  <li role="presentation"><a href="#">本月热门</a></li>
				  <li role="presentation"><a href="#">资料之家</a></li>
				</ul>
				<div class="tab-content">
				    <div role="tabpanel" class="tab-pane active" id="home">
				      <div class="list-group">
				  <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 如何建立个人博客
				</h4>
				    <p class="list-group-item-text">想必很多人都想建立一个，属于自己的个人博客，把自己的一些学习的经验和经历，通过互联网的形式来分享给别人。通过分享与网友进行互动，让更多的人了解和认识你，并且树立自己在互联网上的个人品牌，其实这就是一种“自媒体”。那么我们怎么去建立自己的自媒体博客呢？我认为：首先得先明白建立一个博客的流程是什么？只有先了解这套流程，我们才能做出自己满意的个人博客。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				   <h4 class="list-group-item-heading"> 对网站域名的选择
				</h4>
				    <p class="list-group-item-text">
				
				域名：一般会选择比较正规点的域名商购买，比如：万网、西部数码...（一年也才几十块钱）。考虑到我们的域名是要续费的，如果说你买的域是那种不正规的域名商，哪天域名商倒闭了，那么我的域名就不能使用了。还有一点值得注意的是:域名的选择最好“见名知意”越短越好。一般会用自己的名字来命名。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 对网站空间的选择
				</h4>
				    <p class="list-group-item-text"空间：分为国内空间和国外空间。
				
				1、国内空间：需要备案网站才能上线，但是速度比国外空间要快一点，并且也稳定。
				
				2、国外空间：指（除大陆外的空间）则不需要备案，可以直接使用。
				
				一般我们对空间的选择有两点：第一、稳定性，第二、性价比。在这里我推荐大家可以去阿里云上去买服务器（因为现在对于新用户优惠大，价格便宜，服务稳定），想当年买个一年的服务器最便宜也要将近600块，现在都可以买二年了。
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 选择网站后台系统
				</h4>
				    <p class="list-group-item-text">我们不需要会PHP、JSP、ASP、.NET之类的动态语言来编写网站后台，同样也可以做出一个动态网站来。因为现在有很多开源免费的CMS系统（内容管理系统）可以简单点理解成：一个可以为网站提供发布文章、图片等等一些功能的工具。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				</div>
				    </div>
				    <div role="tabpanel" class="tab-pane" id="profile"><div class="list-group">
				  <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 策划和设计网站效果图
				</h4>
				    <p class="list-group-item-text">很多人可能会说：既然那些博客系统，都有现成的主题，那还需要自己亲自DIY设计博客的效果图吗？那是因为网上的主题鱼龙混杂的，毕竟每个人的审美观不一样，需求也不一样！所以说：想做一个自己喜欢风格的网站，还是需要自己亲自动手去设计。
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				   <h4 class="list-group-item-heading"> 选择网站后台系统
				</h4>
				    <p class="list-group-item-text">我们不需要会PHP、JSP、ASP、.NET之类的动态语言来编写网站后台，同样也可以做出一个动态网站来。因为现在有很多开源免费的CMS系统（内容管理系统）可以简单点理解成：一个可以为网站提供发布文章、图片等等一些功能的工具。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 制作前台页面
				</h4>
				    <p class="list-group-item-text">根据前面自己设计的效果图，然后把它制作成html的静态页面模板。方便和后台的结合，实现真正意义的动态网站。
				
				
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 制作动态网站
				</h4>
				    <p class="list-group-item-text">可能有些新手就会问了，网站还分静态网站和动态网站呀?为什么要实现动态网站呢？因为动态网站可以实现静态网站实现不了的功能，比如说：对网站文章的发布、图片的更新、留言等功能。
				
				可能有同学会疑惑，我写好网页静态页面，但是我还是不清楚这个网站怎么做呀！别急，你所写好的前端html网页，只是后端语言中的模板（用来渲染数据的页面）。
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				</div></div>
				    <div role="tabpanel" class="tab-pane" id="messages">
				      <div class="list-group">
				  <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 测试以及上线
				</h4>
				    <p class="list-group-item-text">在本地搭建服务器，网站上线前先测试网站有没有什么BUG。如没有什么问题，可以将本地网站解压打包，使用FTP工具上传到服务器空间。
				
				值得注意的是：先得把网站的数据库导入出来，然后在空间服务器还原。不然就会出错误哟！
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				   <h4 class="list-group-item-heading"> 手机网站开发的特点
				</h4>
				    <p class="list-group-item-text">B手机屏幕一般在240*320以上的称之为大屏幕手机。因为收的CPU频率低，不能像电脑一样快的浏览。做手机网站的时候像JS等要少用。手机上网速度慢，联通的3G网络还可以，但我都是喜欢支持中国移动我们国家自行研发的3G上网技术，浏览器众多，兼容性差。一不小心就显示不出来。
				
				了解了手机上功能点，我们可以确定手机网站制作原则。
				
				1.网站要简洁，功能能不要的就删了。
				
				2.图片要少用，尽量用汉字，在高昂的网络资费中，有的用户会把图片的显示禁止了。以减免流量。
				
				3.网站尽可能的小点，页面太长则不适用浏览，用户体验不好，太宽手机打开显示不全，或者显示不工整。
				
				4.现在的手机大屏的，小屏的都要，所以在设计的时候都要考虑到。
				
				5.由于手机网站屏幕小的特点，用户在浏览的时候要尽量快的让用户查到自己需要的信息，因为手机屏幕的小用户寻找起来比价吃力，长时间的寻找，会给你的网站被大大的减分的。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 写网站建设方案（也就是网站开发流程）
				</h4>
				    <p class="list-group-item-text">
				
				手机网站制作与WEB网站制作一样,需要从策划,草图,制作,等几方面来做手机网站.客户把手机网站制作需求单写好、首页样版设计风格确认、手机网站制作内容规划、业务流程根据wap网站的整体情况来规划.手机网站制作流程可从以下几点来做：
				
				1、分析建wap网站目的（建站要求），建立wap网站架构，时间允许的话编写具体的《wap网站建设方案》；
				
				2、根据架构（或者《网站建设方案》）完成初稿设计：
				
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> wap首页风格
				</h4>
				    <p class="list-group-item-text">
				
				这是网站的前台设计，属于美工的范畴；数据库的前台页面也要同时设计制作！
				
				3、审核确认前台设计后进行整体wap网站数据库的开发制作；
				
				4、前后台里链接；
				
				5、上传至空间，测试数据库！
				
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				</div>
				    </div>
				    <div role="tabpanel" class="tab-pane" id="settings">
				      <div class="list-group">
				  <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading">网站建设方案
				</h4>
				    <p class="list-group-item-text">在拿到客户的需求说明后，并不是直接开始制作，而是需要对项目进行总体设计，详细设计出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定：网站需要实现哪些功能；网站开发使用什么软件，在什么样的硬件环境；需要多少人，多少时间；需要遵循的规则和标准有哪些。同时需要写一份总体规划说明书，包括：网站的栏目和板块；网站的功能和相应的程序；网站的链接结构；如果有数据库，进行数据库的概念设计；网站的交互性和用户友好设计。
				
				在总体设计出来后，一般需要给客户一个网站建设方案。很多建站公司在接洽业务时就被客户要求提供方案
				
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				   <h4 class="list-group-item-heading"> SEO的核心到底是什么
				</h4>
				    <p class="list-group-item-text">  有句话我很喜欢：“很多人问SEO的核心到底是什么？我曾经用了很长的时间去思考这个问题，最后我发现SEO的核心依然是人。虽然表面上是和搜索引擎打交道，但其实我们是和搜索关键词的用户打交道。因此，我们只有学会分析用户的心理和需求，这才是SEO的根本所在。”
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 官方文档中文版
				</h4>
				    <p class="list-group-item-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
				
				下载 Bootstrap为所有开发者、所有应用场景而设计。
				Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 官方文档中文版
				</h4>
				    <p class="list-group-item-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
				
				下载 Bootstrap为所有开发者、所有应用场景而设计。
				Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				</div>
				    </div>
				  </div>
			</div>
			
			
			
			
			<div class="col-md-3 bg-warning">
				
				<div class="panel panel-default">
				  <div class="panel-heading">博客模板分类</div>
				  <ul class="list-group">
				 
				    <a class="list-group-item">个人博客<span class="badge ">14</span>
				    </a>
				    <a class="list-group-item">企业网站<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">门户咨询<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">商城网站<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">品牌设计<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">微信小程序<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">分销系统<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">微店小站<span class="badge">14</span>
				    </a>
				
				  
				</ul>
				</div>
			</div>
		</div>
	</div>

全部代码

<!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">
    <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://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>
  <nav class="navbar" >
    <div class="container-fluid navbar-inverse navbar-fixed-top">
      <!-- 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="index.html">博客-首页</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><a href="index.html">博客首页 <span class="sr-only">(current)</span></a></li>
          <li class="active"><a href="document.html">博文列表</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下载中心 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">下载工具</a></li>
              <li><a href="#">代码页</a></li>
              <li><a href="#">软件之家</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">学习资料</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">哈哈哈哈哈</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" value="你想搜索的内容" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">登录</a></li>
		  <li><a href="#">注册</a></li>
          <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下载中心<span class="caret"></span></a></li>
        </ul>
      </div>
    </div>
  </nav>
 <!-- 主体部分 -->
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-9 bg-info">
				<ul class="nav nav-tabs">
				  <li role="presentation" class="active"><a href="#">最新推荐</a></li>
				  <li role="presentation"><a href="#">本周热门</a></li>
				  <li role="presentation"><a href="#">本月热门</a></li>
				  <li role="presentation"><a href="#">资料之家</a></li>
				</ul>
				<div class="tab-content">
				    <div role="tabpanel" class="tab-pane active" id="home">
				      <div class="list-group">
				  <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 如何建立个人博客
				</h4>
				    <p class="list-group-item-text">想必很多人都想建立一个，属于自己的个人博客，把自己的一些学习的经验和经历，通过互联网的形式来分享给别人。通过分享与网友进行互动，让更多的人了解和认识你，并且树立自己在互联网上的个人品牌，其实这就是一种“自媒体”。那么我们怎么去建立自己的自媒体博客呢？我认为：首先得先明白建立一个博客的流程是什么？只有先了解这套流程，我们才能做出自己满意的个人博客。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				   <h4 class="list-group-item-heading"> 对网站域名的选择
				</h4>
				    <p class="list-group-item-text">
				
				域名：一般会选择比较正规点的域名商购买，比如：万网、西部数码...（一年也才几十块钱）。考虑到我们的域名是要续费的，如果说你买的域是那种不正规的域名商，哪天域名商倒闭了，那么我的域名就不能使用了。还有一点值得注意的是:域名的选择最好“见名知意”越短越好。一般会用自己的名字来命名。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 对网站空间的选择
				</h4>
				    <p class="list-group-item-text"空间：分为国内空间和国外空间。
				
				1、国内空间：需要备案网站才能上线，但是速度比国外空间要快一点，并且也稳定。
				
				2、国外空间：指（除大陆外的空间）则不需要备案，可以直接使用。
				
				一般我们对空间的选择有两点：第一、稳定性，第二、性价比。在这里我推荐大家可以去阿里云上去买服务器（因为现在对于新用户优惠大，价格便宜，服务稳定），想当年买个一年的服务器最便宜也要将近600块，现在都可以买二年了。
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 选择网站后台系统
				</h4>
				    <p class="list-group-item-text">我们不需要会PHP、JSP、ASP、.NET之类的动态语言来编写网站后台，同样也可以做出一个动态网站来。因为现在有很多开源免费的CMS系统（内容管理系统）可以简单点理解成：一个可以为网站提供发布文章、图片等等一些功能的工具。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				</div>
				    </div>
				    <div role="tabpanel" class="tab-pane" id="profile"><div class="list-group">
				  <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 策划和设计网站效果图
				</h4>
				    <p class="list-group-item-text">很多人可能会说：既然那些博客系统，都有现成的主题，那还需要自己亲自DIY设计博客的效果图吗？那是因为网上的主题鱼龙混杂的，毕竟每个人的审美观不一样，需求也不一样！所以说：想做一个自己喜欢风格的网站，还是需要自己亲自动手去设计。
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				   <h4 class="list-group-item-heading"> 选择网站后台系统
				</h4>
				    <p class="list-group-item-text">我们不需要会PHP、JSP、ASP、.NET之类的动态语言来编写网站后台，同样也可以做出一个动态网站来。因为现在有很多开源免费的CMS系统（内容管理系统）可以简单点理解成：一个可以为网站提供发布文章、图片等等一些功能的工具。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 制作前台页面
				</h4>
				    <p class="list-group-item-text">根据前面自己设计的效果图，然后把它制作成html的静态页面模板。方便和后台的结合，实现真正意义的动态网站。
				
				
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 制作动态网站
				</h4>
				    <p class="list-group-item-text">可能有些新手就会问了，网站还分静态网站和动态网站呀?为什么要实现动态网站呢？因为动态网站可以实现静态网站实现不了的功能，比如说：对网站文章的发布、图片的更新、留言等功能。
				
				可能有同学会疑惑，我写好网页静态页面，但是我还是不清楚这个网站怎么做呀！别急，你所写好的前端html网页，只是后端语言中的模板（用来渲染数据的页面）。
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				</div></div>
				    <div role="tabpanel" class="tab-pane" id="messages">
				      <div class="list-group">
				  <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 测试以及上线
				</h4>
				    <p class="list-group-item-text">在本地搭建服务器，网站上线前先测试网站有没有什么BUG。如没有什么问题，可以将本地网站解压打包，使用FTP工具上传到服务器空间。
				
				值得注意的是：先得把网站的数据库导入出来，然后在空间服务器还原。不然就会出错误哟！
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				   <h4 class="list-group-item-heading"> 手机网站开发的特点
				</h4>
				    <p class="list-group-item-text">B手机屏幕一般在240*320以上的称之为大屏幕手机。因为收的CPU频率低，不能像电脑一样快的浏览。做手机网站的时候像JS等要少用。手机上网速度慢，联通的3G网络还可以，但我都是喜欢支持中国移动我们国家自行研发的3G上网技术，浏览器众多，兼容性差。一不小心就显示不出来。
				
				了解了手机上功能点，我们可以确定手机网站制作原则。
				
				1.网站要简洁，功能能不要的就删了。
				
				2.图片要少用，尽量用汉字，在高昂的网络资费中，有的用户会把图片的显示禁止了。以减免流量。
				
				3.网站尽可能的小点，页面太长则不适用浏览，用户体验不好，太宽手机打开显示不全，或者显示不工整。
				
				4.现在的手机大屏的，小屏的都要，所以在设计的时候都要考虑到。
				
				5.由于手机网站屏幕小的特点，用户在浏览的时候要尽量快的让用户查到自己需要的信息，因为手机屏幕的小用户寻找起来比价吃力，长时间的寻找，会给你的网站被大大的减分的。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 写网站建设方案（也就是网站开发流程）
				</h4>
				    <p class="list-group-item-text">
				
				手机网站制作与WEB网站制作一样,需要从策划,草图,制作,等几方面来做手机网站.客户把手机网站制作需求单写好、首页样版设计风格确认、手机网站制作内容规划、业务流程根据wap网站的整体情况来规划.手机网站制作流程可从以下几点来做：
				
				1、分析建wap网站目的（建站要求），建立wap网站架构，时间允许的话编写具体的《wap网站建设方案》；
				
				2、根据架构（或者《网站建设方案》）完成初稿设计：
				
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> wap首页风格
				</h4>
				    <p class="list-group-item-text">
				
				这是网站的前台设计，属于美工的范畴；数据库的前台页面也要同时设计制作！
				
				3、审核确认前台设计后进行整体wap网站数据库的开发制作；
				
				4、前后台里链接；
				
				5、上传至空间，测试数据库！
				
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				</div>
				    </div>
				    <div role="tabpanel" class="tab-pane" id="settings">
				      <div class="list-group">
				  <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading">网站建设方案
				</h4>
				    <p class="list-group-item-text">在拿到客户的需求说明后，并不是直接开始制作，而是需要对项目进行总体设计，详细设计出一份网站建设方案给客户。总体设计是非常关键的一步。它主要确定：网站需要实现哪些功能；网站开发使用什么软件，在什么样的硬件环境；需要多少人，多少时间；需要遵循的规则和标准有哪些。同时需要写一份总体规划说明书，包括：网站的栏目和板块；网站的功能和相应的程序；网站的链接结构；如果有数据库，进行数据库的概念设计；网站的交互性和用户友好设计。
				
				在总体设计出来后，一般需要给客户一个网站建设方案。很多建站公司在接洽业务时就被客户要求提供方案
				
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				   <h4 class="list-group-item-heading"> SEO的核心到底是什么
				</h4>
				    <p class="list-group-item-text">  有句话我很喜欢：“很多人问SEO的核心到底是什么？我曾经用了很长的时间去思考这个问题，最后我发现SEO的核心依然是人。虽然表面上是和搜索引擎打交道，但其实我们是和搜索关键词的用户打交道。因此，我们只有学会分析用户的心理和需求，这才是SEO的根本所在。”
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 官方文档中文版
				</h4>
				    <p class="list-group-item-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
				
				下载 Bootstrap为所有开发者、所有应用场景而设计。
				Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				   <a href="#" class="list-group-item ">
				    <h4 class="list-group-item-heading"> 官方文档中文版
				</h4>
				    <p class="list-group-item-text">Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
				
				下载 Bootstrap为所有开发者、所有应用场景而设计。
				Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
				
				</p>
				    <div class="text-muted"> <small>SHINE</small><small>发布于&nbsp;2017年3月18 19时24分</small> <small>阅读&nbsp;1980</small></div>
				  </a>
				</div>
				    </div>
				  </div>
			</div>
			
			
			
			
			<div class="col-md-3 bg-warning">
				
				<div class="panel panel-default">
				  <div class="panel-heading">博客模板分类</div>
				  <ul class="list-group">
				 
				    <a class="list-group-item">个人博客<span class="badge ">14</span>
				    </a>
				    <a class="list-group-item">企业网站<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">门户咨询<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">商城网站<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">品牌设计<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">微信小程序<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">分销系统<span class="badge">14</span>
				    </a>
				    <a class="list-group-item">微店小站<span class="badge">14</span>
				    </a>
				
				  
				</ul>
				</div>
			</div>
		</div>
	</div>
	
	
<!-- 	  页脚 -->
	  <div class="container-fluid footer">
		  <div class="row">
		    <div class="col-md-12 ">
				Copyright ©copy;<a href="">SHINE博客 </a> | <a href=""> ICP备111号-2</a>
			</div>
		  </div>
	  </div>
  </div>


    
	
	
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./js/jquery.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

主页

bootstrap过程化考核
m0_61090178的博客
04-04 553
demo1 <!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
Bootstrap（3）
QiaoG_的博客
03-25 207
整体效果图 页眉部分 代码 <!doctype html> Bootstrap 101 Template <!-- Bootstrap --> <link rel="stylesheet" href="./css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossor
BootStrap使用笔记+案例
Brucye
01-20 3845
使用开发版本：bootstrap.css生产版本：bootstrap.min.css （去掉空字符，换行符减少大小，产品上线使用） Step1：打开BootStrap v3官网的组件Step2：打开导航条Step3：找到自己喜欢的导航条样式，复制代码Step4：粘贴在body中，更改自己所需内容 Step5：PyCharm小技巧：Reformat Code 规范缩进Step1：打开官网中的全局CSS样式Step
Django实战(一)-----用户登录与注册系统3（前端页面、登录视图）
weixin_30847939的博客
03-13 2793
基本框架搭建好了后，我们就要开始丰富页面内容了。最起码，得有一个用户登录的表单不是么？（注册的事情我们先放一边。） 一、 原生HTML页面 删除原来的login.html文件中的内容，写入下面的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
(学习笔记)Bootstrap-test3-用户管理
qq_56508310的博客
05-08 820
效果图（首页+管理） 首页 用户管理界面 代码部分 index.html <body> <nav class="navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header
【Bootstrap】013-组件：导航、导航条、路径导航
訾博（ZiBo）的博客
10-07 886
目录 一、导航 1、概述 2、标签页 代码演示： 运行结果： 3、胶囊式标签页 代码演示： 运行结果： 4、两端对齐的标签页 代码演示： 运行结果： 5、禁用的链接 代码演示： 运行结果： 6、添加下拉菜单 带下拉菜单的标签页： 二、导航条 1、默认样式的导航条 代码演示： 运行结果： 2、品牌图标 代码演示： 运行结果： 3、表单 代码演示： 运行结果： 备注： 4、按钮 代码演示： 运行结果： 备注： 5、文本 代码演示： 运行结果：
基于bootstrap的收费主体模板bracket
08-08
本文将深入探讨基于Bootstrap的收费主体模板"Bracket"。 "Bracket"是一款专为创建现代、响应式网站而设计的Bootstrap主题模板。它包含了丰富的组件、预设样式和布局选项，使得设计师和开发者能够快速构建出专业级别...
冰球体育竞技bootstrap模板
04-09
【标题】：“冰球体育竞技bootstrap模板”是一个专门为冰球竞技类网站设计的网页模板，它基于流行的前端框架Bootstrap构建，旨在提供一个专业且视觉吸引力强的网站布局，以展示冰球比赛、赛事信息、球员资料等内容。...
bootstrap响应式滑雪爱好者网站模板
04-02
Bootstrap响应式滑雪爱好者网站模板是基于流行的前端框架Bootstrap构建的一款专为滑雪爱好者设计的网站模板。Bootstrap是由Twitter开发并开源的HTML、CSS和JavaScript库，它提供了丰富的预先设计的组件和交互效果，...
bootstrap模板
最新发布
06-07
6. **实例分析**：通过实际示例展示如何搭建一个完整的Bootstrap网站，包括头部、主体内容和页脚的构建。 7. **最佳实践**：提供一些使用Bootstrap时的最佳实践和注意事项，以避免常见的设计和性能问题。 "项目说明...
bootstrap4_apidemo_DEMO_bootstrap_
10-03
6. **模态**：`.modal`类用于创建弹出式对话框，可以包含头部、主体和底部内容，支持关闭按钮和键盘导航。 7. **提示和工具提示**：`.tooltip`和`.popover`类提供动态显示信息的功能，适用于元素的额外说明。 8. *...
Django 创建项目笔记
weixin_34025051的博客
03-03 186
基本命令 mkdir mysite # 创建项目目录，常取名mysite cd mysite virtualenv env # env\Scripts\activate.bat # Win pip install django==2.1.3 python -m django --version # 查看django版本 where python django-admin startproject...
Bootstrap基础学习
weixin_52031422的博客
07-07 851
这是对Bootstrap基础的学习，其中将会通过实现小案例的形式结合对知识点进行掌握
下载bootstrap并应用（学习笔记4）
qyqyqyi的博客
01-24 1320
利用bootstrap装饰网站
bootstrap导航条的二级菜单下实现三级菜单
热门推荐
melody_sy博客
01-20 2万+
bootstrap在导航条中的二级菜单下实现三级菜单 modify by 20180506 add music 直接上代码 &amp;lt;!--html里的写法，直接搭好bootstrap导航条结构 这里就用美食来做例子吧--&amp;gt; &amp;lt;!--反色的导航条--&amp;gt; &amp;lt;nav class=&quot;navbar navbar-i
前端简单入门第二十五讲 使用BootStrap开发出一个网站的首页
李阿昀的博客
01-07 1919
我们之前写过一个商城的首页，并且又使用DIV+CSS完成了网站首页的优化，现在我们使用BootStrap来再次优化这个商城首页。 仅适用于PC端的网站首页 我们一步一步来使用BootStrap来优化商城首页，先仅只考虑适用于PC端的商城首页，完整的首页代码如下。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset...
Bootstrap Nav
Hello World ~
07-19 2085
Bootstrap中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。 在标签页上使用导航需要依赖JavaScript标签页插件 确保导航组件的可访问性 如果使用导航组件实现导航条功能，务必在的最外侧的逻辑父元素上添加 role="navigation"属性，或者用一个包裹整个导航组件。不要将role属性添加到上，因为这样可以被辅助设备（残疾人用的）上识别唯一个
3.博客系统| 设计系统首页（文章列表渲染）
weixin_30832143的博客
08-01 205
设置系统首页（文章列表渲染） 系统首页的导航区域| 主体布局| admin |首页文章列表的渲染 1.系统首页的导航区域 re_path('^$',views.index), #在首页不用index也可以显示出。在url里边设置了这个，可以直接访问127.0.0.1:8000,可不加index index.html bootstrap里边的导航组...
SpringBoot学习（六）使用Thymeleaf布局
weixin_33755554的博客
06-05 160
2019独角兽企业重金招聘Python工程师标准>>> ...
Bootstrap 3.0排版全解析：标题、主体到列表详解
- 页面主体通常由包裹，Bootstrap容器提供了一致的响应式布局，确保内容在不同设备上都能适配。 3. **强调**: - Bootstrap通过CSS样式为文本提供了强调功能，如加粗、斜体、删除线等，可以通过内联样式或特定类名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值