[Bootstrap]从入门到实战_首页开发（二）

其他 2018-10-31 17:42:27 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/express_yourself/article/details/54617030

$首页

  • 首先做任何页面之前，我们都要先把结构规划好，这样脑子里有清晰的思路，工作起来才有效率。

index

  • 首页的效果图前面有展示，它包括如下这几个区域：

导航条 轮播图 客户案例列表 产品截图列表 底部网站信息

首页结构

$首页-1. 首页 HTML 骨架与素材准备

assets目录里面

  • 图片素材（分别是轮播图、客户案例、产品截图，各 3 张）
  • style.css 文件，用于保存自定义样式。

然后在 Template 目录里

  • index.html

注意我们在页面里引入了样式表文件 ../assets/style.css

$首页-2.引入 Bootstrap 框架相关文件

Bootstrap说白了就是一个样式表文件（bootstrap.min.css）和一个javascript
文件（bootstrap.min.js），在页面里把它们引入进来后，就可以直接使用里面的 CSS 规则和各种组件了。

1-远程 CDN 引入方式（本例采用本方法引入）

编辑 index.html，把几个Bootstrap框架包含的文件添加进来，这里推荐使用 CDN 源 上的远程文件，可以节约本地的带宽。
另外，由于 Bootstrap还依赖jQuery库，所以也要一并把这个 jquery.min.js 文件引入。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

注意这几个文件的前后顺序，如果不对，会导致页面无法正常运行。

  1. 先引入 bootstrap.min.css （Bootstrap的样式表文件）
  2. 然后引入自己写的 css 文件（style.css）
  3. 然后引入 jQuery（javascript 库）
  4. 最后引入 bootstrap.min.js 程序文件

2、本地文件引入方式

如果在没有联网的环境，或者用上面的方式引入文件后浏览器报错，可以把Bootstrap的所有文件下载到本地后再引用到页面中。打开下面这个地址，把压缩包下载后解压，全部放到 assets 目录的 bootstrap里面。
下载Bootstrap包含的文件到本地：
http://v3.bootcss.com/getting-started/#download

引入结构
然后修改index.html里的引入文件代码，使用本地引用文件的方式来使用Bootstrap。

<link rel="stylesheet"href="../assets/bootstrap/css/bootstrap.min.css">
<link href="../assets/style.css" rel="stylesheet">
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>

使用bootstrap提供的给出的 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">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  </body>
</html>

$首页1-1.使用导航条组件

我们可以直接使用Bootstrap的导航条组件

<!--导航-->
<nav class="navbar navbar-default">
   <div class="container">
       <ul class="nav navbar-nav">
           <li class="active"><a href="">首页</a></li>
           <li><a href="">关于</a></li>
           <li><a href="">登录</a></li>
       </ul>
   </div>
</nav>
  1. 添加一个 nav 标签，并设置 class 为 navbar navbar-default，role 为 navigation。
  2. 然后在里面添加一个类名为 container的 div ，用来容纳导航条里的其他元素（链接、按钮等）。
  3. 添加一些导航链接<li>，然后把第一个 <li&gt 的 class指定为active，表示激活状态。
  4. 刷新页面，一个漂亮的导航条就诞生了！我们只是写了一些 HTML 代码，没有写一句 CSS 代码，非常省时省力。

导航条位于页面最顶部，提供整个网站所有页面的链接，最终效果如下：
nav
导航条还漏了一个“网站标题”，把下面这段<div class=”navbar-header”>添加到<ul class=”nav navbar-nav”>的前面就可以了

 <!--导航-->
    <nav class="navbar navbar-default">
       <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <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>
           <ul class="nav navbar-nav">
               <li class="active"><a href="">首页</a></li>
               <li><a href="">关于</a></li>
               <li><a href="">登录</a></li>
           </ul>
       </div>
    </nav>

标题

$首页1-2.使用轮播图组件

为了实现一个轮播图效果（也有人叫“幻灯片”），以前我们可能会自己写代码，或者去找 jQuery 的插件。其实 Bootstrap 已经自带了一个轮播组件——Carousel 在nav 导航条下面引入下面代码，同时在Carousel 组件外面加一个类名为container 的父级

<div class="container">
      <!--轮播图-->
      <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="../assets/slide1.jpg" alt="...">
                 <div class="carousel-caption">
                     <h1>轮播1的标题</h1>
                     <p>这里是轮播图1的说明</p>
                 </div>
             </div>
             <div class="item">
                 <img src="../assets/slide2.jpg" alt="...">
                 <div class="carousel-caption">
                     <h1>轮播2的标题</h1>
                     <p>这里是轮播图2的说明</p>
                 </div>
             </div>
             <div class="item">
                 <img src="../assets/slide3.jpg" alt="...">
                 <div class="carousel-caption">
                     <h1>轮播3的标题</h1>
                     <p>这里是轮播图3的说明</p>
                 </div>
             </div>
         </div>
         <!-- Controls -->
         <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
             <span class="glyphicon glyphicon-chevron-left"></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"></span>
             <span class="sr-only">Next</span>
         </a>
      </div>
    </div>

轮播图组件分三部分

  1. <ol class="carousel-indicators">是“指示器”，就是下方的那三个白色小点，标记当前播放到哪张图片了。

  2. <div class="carousel-inner" role="listbox">里面是主体内容区域，包括几张图片和对应说明，分别用 <div class="item">包裹起来

  3. 最后的两个<a class="left carousel-control">元素是手动操作图片左右切换的按钮。

效果如下：
banner

$首页1-3.使用自定义样式来完善 Bootstrap 默认样式

刷新页面，几张图片开始自动播放。但是我们会发现一个问题——如果三张图片大小不一致，这个轮播区域会忽大忽小地变化。
banner

这种情况就是 Bootstrap 力不能及的范围了，因为它不知道我们将会使用什么样的素材，因此要自己写一些自定义样式的 CSS 代码来处理这些特殊的情况。

  • 打开自定义样式表文件 assets/style.css，在里面添加如下的代码，把图片高度固定设置为 500px，并且设置最小宽度为 100% ，撑满页面。
.carousel-inner > .item > img {
  min-width: 100%;
  height: 500px;
}

好了，现在轮播图的图片滚动很正常了。
正常轮播

$首页2. 客户案例列表

在这个区域中，有三个宽度均等的横向排列的小块，每个小块是由一个圆形图片和一些说明文字组成。最终效果如下:
case

首页2-1. 栅格布局

  • Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。
  • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
  • Bootstrap的栅格系统规定了每个页面的宽度被平均划分为 12 等份，不管整个页面的宽度是 1000像素，还是500像素，都会自动计算每一份（1/12）的宽度是多少。
  • 通过给栅格布局内部的元素指定 class 为 col-md-份数，来告诉它的宽度占据这12份里面的几份。
  • 例如下面的代码中，有3 个 div 的 class为 col-md-4（先不管中间那个 -md-是什么，关注这个数字就好），算一算4 + 4 + 4 是不是正好等于 12？
    在 <!--轮播图--> 代码后面加入下面代码：
<div class="container">
    <div class="row">
        <div class="col-md-4">bb</div>
        <div class="col-md-4">cc</div>
        <div class="col-md-4">ee</div>
    </div>
</div>

此时效果如下：
list

  • 刷新页面，然后用 Chrome 浏览器的开发工具看看效果，发现整个页面的宽度正好被平均分成了 3 份(12/4 =3)。栅格系统自动帮我们计算了这 3 份的宽度。
  • 举一反三，如果要把页面平均分为 6 份，那每一份的class 就应该指定 col-md-2(12/6 = 2)；如果是 4 份，class 就是 col-md-3（12/4 = 3）
  • 完整的栅格布局的说明在这里，http://v3.bootcss.com/css/#grid一定要动手实践！
<!--案例-->
    <div class="case container">
       <div class="row">
           <div class="col-md-4">
               <img class="img-circle" src="../assets/case_1.jpg" alt="" />
               <h2>案例1</h2>
               <p>非常不错的产品，我很喜欢11</p>
           </div>
           <div class="col-md-4">
               <img class="img-circle" src="../assets/case_2.jpg" alt="" />
               <h2>案例2</h2>
               <p>非常不错的产品，我很喜欢22</p>
           </div>
           <div class="col-md-4">
               <img class="img-circle" src="../assets/case_3.jpg" alt="" />
               <h2>案例3</h2>
               <p>非常不错的产品，我很喜欢33</p>
           </div>
       </div>
    </div>

首页2-2. 圆形图片样式

  • 虽然自己写一个 CSS 规则 border-radius: 50%也可以实现圆形图片，但是如果能够少写一行代码，为什么不偷个懒呢（不要重复造轮子），Bootstrap提供了一个圆形图片的 CSS 类—— img-circle（从名称就能看出来它的作用是什么）。
  • 好了，知道栅格布局方式，和圆形图片样式，可以把“案例列表”的 HTML 代码改造一下了。

另外，和轮播图一样，为了防止图片大小不一致导致的页面错乱，还要在 style.css里添加一些自定义的样式，固定图片大小，然后把每个元素的内部设置为居中对齐

.case {
  text-align: center;
  margin-top: 20px;
}
.case img {
  height: 200px;
}

Bootstrap还提供了“圆角图片”、带边框线的“缩略图样式”等图片样式，也可以直接使用，在这里查看文档http://v3.bootcss.com/css/#images

$首页3. 产品截图列表

(用栅格布局将页面拆分成左右宽度不一样的两栏)

其实Bootstrap的栅格布局同样可以实现这种“宽度不一致的分割”。最终效果：
这里写图片描述
- 开始修改“产品截图”区域的代码，从上到下共有三行，每行的一栏是图片，占有 5 份宽度（col-md-5）；另一栏是说明文字，占据剩下的 7
份宽度（col-md-7）。

<!--产品功能截图-->
    <div class="container screenshot">
        <div class="row item">
            <div class="col-md-5"><img src="../assets/screenshot_1.jpg" alt="" class="img-responsive"></div>
            <div class="col-md-7">
                <h2>截图1</h2>
                <p>截图说明1，截图说明1，截图说明1，截图说明1，截图说明1，</p>
            </div>
        </div>
        <div class="row item">
            <div class="col-md-7">
                <h2>截图2</h2>
                <p>截图说明2，截图说明2，截图说明2，截图说明2，截图说明2，</p>
            </div>
            <div class="col-md-5"><img src="../assets/screenshot_2.jpg" alt="" class="img-responsive"></div>
        </div>
        <div class="row item">
            <div class="col-md-5"><img src="../assets/screenshot_3.jpg" alt="" class="img-responsive"></div>
            <div class="col-md-7">
                <h2>截图3</h2>
                <p>截图说明3，截图说明3，截图说明3，截图说明3，截图说明3，</p>
            </div>
        </div>
    </div>
  • 同样，再添加一点自定义的 CSS 代码，在每一行之间显示一条分割线，并且预留一些空白。
.screenshot .item {
  border-top: 1px solid #CCC;
  padding-bottom: 30px;
  padding-top: 20px;
}

$首页4. 产品截图列表

这部分没什么特别的内容，使用 HTML5 的新增标签<footer></footer>，使之更“语义化”。

 <!--底部-->
<div class="container">
   <footer>
       微信公众号管家版权所有 2016
       <a href="">四光年科技</a>
   </footer>
</div>

猜你喜欢

转载自blog.csdn.net/express_yourself/article/details/54617030
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022