Bootstrap学习与实践

最新推荐文章于 2022-04-16 19:04:23 发布

--- ZYZ ---

最新推荐文章于 2022-04-16 19:04:23 发布

阅读量361

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_35076330/article/details/98302977

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

因为最近实习涉及前端方面东西还是比较多的，故对相关知识进行下简单的总结，并用bootstrap这个比较流行的框架设计了一个简单的网站，主要页面包括主页、相册、归档、文章等页面，以便对其有更深的理解。
资源地址：https://github.com/zyz-1998/project/tree/master/bootstrap_test
个人博客：https://zyz-1998.github.io

部分页面截图
个人网页

一. HTML5与CSS3

1.1 html5

Html5作为一种标记语言，对于我们进行网页内容结构的划分有着极其重要的帮助，通过最近的实际应用我对它最大的体会就是能够快速架构出一个网站的基本逻辑结构与内容，这一点在html5中推出的一系列语义标签中体现的尤为突出，有着良好结构与命名规范的页面在我们进行构建样式和定义网页行为时理解起来更加容易。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="">
    <meta http-equiv="" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>
   <body>                  #与main的区别，body定义为表示文档内容
    <div id="container">
        <header>
            <nav></nav>     #导航栏，html5规范中不允许将其嵌入address标签中使用
        </header>
        <main></main>       #每个页面中只能用一次，用以标记页面主要内容
        <aside></aside>     #侧边栏，具有独立性用以对页面进行补充
        <footer></footer>
    </div>
   </body>
</html>

除上述内容，还有许多标签，对于这些标签理解其意义与区别十分重要，尤其在兼容性这方面，例如如下区别：

<div id="header">   <header>
<div id="footer">   <footer>

前后两者在实际应用中并无太大差别，后者是html5中的新规范，对于我们进行更加清晰的网页布局有着很多帮助，但是也存在着旧浏览器不识别的情况。
补充
figure标签规定独立的流内容（图像、图表、照片、代码等等），其内容应与主内容有关，但如果被删除，不应对文档流产生影响。
article标签定义独立内容
section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

更多HTML的知识建议访问W3c School浏览文档，便于有更清晰的认识

1.2 css3

ccs构建了网页的样式，缤纷多彩的网页就是通过其实现的，就好像盖房子html搭建了整个网页的结构，接下来房子的装饰就交给了css，css3通过模块化，就像装修一样，将网页的装饰分成盒模型、选择器、文本效果、布局等方式，让我们更容易理解和上手。列举几个最近用到的样式

background-image: linear-gradient(90deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%) !important;
#构建一条线性渐变的背景，由浏览器处理渲染，不像加载图片，加载时间会受到图片大小影响

1.3 居中的几种方法：

第一，水平居中：(1)margin:0 auto; (2)通过flex来实现
第二，垂直居中：(1)通过盒模型调节margin来实现，(2)通过调节父元素padding;(3)当自己高度和父容器高度未知时, 通过绝对定位：

parentElement{ position:relative; } 
childElement{ position: absolute; top: 50%; transform: translateY(-50%); }

(4)父容器只有一个元素且父元素高度已知时，通过相对定位

parent{ height:xxx; } 
.child{ position: relative; top: 50%; transform: translateY(-50%); }

(5)还可以用Flex布局：

parentElement{ display:flex; display:-webkit-flex; align-items:center; }

第三，水平垂直居中：通过tansform：translate(-50%,-50%)来实现。

position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);

html内容超出了div或p的宽度如何换行让内容自动换行

word-wrap：break-word；
overflow：hidden

对于css需要充分理解各属性的区别和应用场景。

二. JQuery

JQuery是一个JScript函数库，BootStrap是一个基于html、css、JScript的前端框架，移动设备优先原则的响应式设计。并有着众多的UI编辑工具

2.1 JQuery

JQuery重点——AJAX异步，能够在不重载整个页面的情况下，加载数据。
load()方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

get()方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

2.2 Jquery显示页面进度

在应用中实现了一个简单的显示页面进度功能，实际效果可下载本文顶部资源链接查看
主要公式：当前页面的高度 = 获取当前窗口顶部至页面顶部的高度 + 当前窗口高度
$(document).height() = $(window).scrollTop() + $(window).height()

$(document).scroll(function(){
      var d_h = $(document).height();           #获取当前页面的高度
      var c_h = $(window).height();             #获取当前窗口高度
      var c_t_h = $(window).scrollTop();        #获取当前窗口顶部至页面顶部的高度
      var schedule = c_t_h / (d_h-c_h-0.5);
      var str=Number(schedule*100).toFixed();   #将小数转换为百分数
            str+="%";
      $("#p_sch").text(str);
      });

三. Bootstrap

在实际应用中比较喜欢其样式风格、及网格布局，对于他的UI编辑器工具简单体会下，感觉比较不错，可以通过快速搭建好网站，然后再进行进一步地完善，这里因为我在练习中并没有实际应用，所以不再赘述，bootstrap为我们提供了许多基本组件，诸如下拉菜单、按钮组、导航栏、分页、表单组、进度条等，对于我们应用十分方便。列举部分实际应用的代码
轮播，这里我用作头部背景，在相册页面实现，主页头部背景采用background-img的方式实现，通过设置header的padding-bottom百分比的形式与最小高度可以不影响网页的响应式设计，但图片比例有问题时可能会出现拉伸现象。

3.1 轮播

<div id="myCarousel" class="carousel slide" style="width:100%;">
                  <!-- 轮播（Carousel）指标 -->
                  <ol class="carousel-indicators">
                     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                     <li data-target="#myCarousel" data-slide-to="1"></li>
                     <li data-target="#myCarousel" data-slide-to="2"></li>
                  </ol>   
                  <!-- 轮播（Carousel）项目 -->
                  <div class="carousel-inner">
                     <div class="item active">
                        <a href="#"><img src="images/15.jpg" alt="First slide"></a>
                     </div>
                     <div class="item">
                        <a href="#"><img src="images/16.jpg" alt="Second slide">
                        <div class="carousel-caption sr-only">标题</div>
                        </a>
                     </div>
                     <div class="item">
                        <a href="#"><img src="images/17.jpg" alt="Third slide"></a>
                     </div>
                  </div>
                  <!-- 轮播（Carousel）导航 -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                      <span class="sr-only">Previous</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                      <span class="sr-only">Next</span>
                  </a>
            </div>

3.2 导航栏

<nav class="navbar navbar-default" style="position:fixed;top: 0;left: 0;width: 100%;opacity:0.8;">
            <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">
                  <!-- sr-only Bootstrap的辅助类；代表元素只在屏幕阅读器中显示：sc (screen-reader)  -->
                  <span class="sr-only">Toggle navigation</span>
                  <!-- icon-bar 屏幕宽度小于一定程度时，导航栏变为可折叠形式 -->
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="Home.html">ZYZ</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="#">Test<span class="sr-only">(current)</span></a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                  <li><a href="Home.html">Home</a></li>
                  <li class="active"><a href="Archievs.html">Archievs</a></li>
                  <li><a href="Album.html">Album</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <!-- role是html5中的新标签，增加语义性 -->
                      <li role="separator" class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
            </nav>

3.3 分页

第一种：在归档页面有实现
<div class="col-xs-12 col-sm-12 col-md-12 page11">
            <ul class="pagination pagination-lg">
              <li class="disabled"><a href="#">&laquo;</a></li>
              <li ><a href="#" style="background-color:#D5D5D5;color:#f79533">1</a></li>
              <li ><a href="#" style="color:#ef4e7b">2</a></li>
              <li ><a href="#" style="color:#5073b8">3</a></li>
              <li ><a href="#" style="color:#1098ad">4</a></li> 
              <li ><a href="#" style="color:#07b39b">5</a></li>
              <li ><a href="#">&raquo;</a></li>
            </ul>
</div>

第二种：在page页面有实现
<div class="col-xs-12 col-sm-12 col-md-12 page11">
              <ul class="pager">
                <li class="previous"><a href="#">&larr; Previous</a></li>
                <li class="next"><a href="#">Next &rarr;</a></li>
              </ul>
           </div>

--- ZYZ ---

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习与实践

因为最近实习涉及前端方面东西还是比较多的，故对相关知识进行下简单的总结，并用bootstrap这个比较流行的框架设计了一个简单的网站，主要页面包括主页、相册、归档、文章等页面，以便对其有更深的理解。资源地址：https://github.com/zyz-1998/project/tree/master/bootstrap_test个人博客：https://zyz-1998.github.io...
复制链接

扫一扫

专栏目录