化石原创文章,转载请注明来源并保留原文链接


做一个随浏览器大小始终居中的进度条,使用了下面的代码:

<div id="loadingContainer" style="position: absolute; width: 100%; height: 90%;" >
	<div class="row h-100 align-items-center justify-content-center">
		<div class="row">
			<div class="col">
				<p id="loadingProgress" style="color: red; font-size: 2rem;">0%</p>
			</div>
		</div>
	</div>
</div>

第3行开始的是进度条本身,第1行和第2行是关键。第1行的height百分比,可以用来调节在高度上的居中感觉。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


bootstrap-typeahead是个javascript库,作用是在输入的时候,弹出提示框,帮助快速完成用户需要的输入。最常用的场合是:在用户输入的时候,前端通过ajax访问服务器,服务器从用户当前输入的字符,从数据库中寻找到含有该字符的合适字符串数组,然后返回给前端的typeahead运行库,typeahead负责显示列表框,辅助用户输入。

在使用ajax获取合适的数据的过程中,现在typeahead需要结合另外一个javascript库:bloodhound.js。

实际准备工作:

1、github上得到bootstrap-typeahead.min.js

地址:https://github.com/iqbalfn/bootstrap-typeahead/tree/master/dist/js

2、通过npm得到bloodbound.min.js

命令:npm install bloodhound-js –save

通过上面的命令,可以在当前目录下载到bloodhound.js的工程,对应的min.js在node_modules目录的bloodhound-js目录的dist目录下

实际代码工作:

1、在需要的html中引入bloodhound.min.js和bootstrap-typeahead.min.js (JQuery库一般都是常用的,这里默认大家都先引入)

譬如:

<script src="plugin/bloodhound.min.js"></script>
<script src="plugin/bootstrap-typeahead.min.js"></script>

2、自己的javascript中,在某个初始化的地方,初始化typeahead的绑定工作:(a)绑定typeahead和bloodhound实例;(b)绑定typeahead和html中的某个输入元素

举例:

$(document).ready(function() {
// Instantiate the Bloodhound suggestion engine
    var authors = new Bloodhound({
        datumTokenizer: function(datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            wildcard: '%QUERY',
            url: 'http://127.0.0.1:8080/api/getjson',
            transform: function(response) {
                // Map the remote source JSON array to a JavaScript object array
                return $.map(response.data, function(data) {
                    return {
                        name: data
                    };
                });
            }
        }
    });
,
    // Instantiate the Typeahead UI
    $('#author-search').typeahead(null, {
        display: 'name',
        source: authors,
        limit: 1000, //如果这个不填,默认是搜索到的结果,也就是上面的transform.$.map返回结果的-1个
    });
});

上面例子中的第1行,说明了我们是在document准备好就开始做这个工作,这个也是常见的用法。

第23行,我们绑定了typeahead和html中一个id为author-search的input元素。这里同时也初始化了typeahead实例:(1)display的name和第15的name是一起运作的;(2)source指定了数据源从第3行的变量(方法)得到;(3)limit这个是个配置的值,如果不指定的话,那么如果ajax返回n个值,在typeahead中显示出来的,必定是n-1个。会看起来少一个值,这里注意。

第8行,说明了我们这个的数据从远程服务器得到,而不是本地。这里通过第10行配置一个可以访问的url,bloodhound会使用ajax(xmlHttpRequest)等手段访问该url(Get方式),该url必须返回json格式的数据。

第9行,wildcard是一个占位符,实际的作用是在url指定中,我们可以指定参数,比如“http://127.0.0.1:8080/api/getjson?id=%QUERY”,这里的%QUERY就是每次ajax访问(这个访问有typeahead根据内部策略发起)的时候,用户在input元素中已经输入的字符串。有这个字符串,我们的后台程序就知道用户现在输入了什么,就可以在给前端返回数据前根据这些输入的字符串做一次过滤。

第11行,transform方法回调是bloodhound用来在远程数据得到后做处理的地方。关键是参数response,这个参数如果放断点看到是null的时候,你就知道你的url返回的不是json格式。

如果正确的话,那么response就是远程返回的json数据。检查远程返回的数据是否json的话,最简单的就是使用Postman这个工具给对应的url发个Get请求,如果返回的数据在Postman中清晰的看到是json,那么如果第13行如果有断点,就能被击中。

第13行,在typeahead应用场景中,一般远程返回的json数据中,必定有一个栏位是数组形式(因为肯定是多个选择才会出列表)。这里是通过第一个参数定位response中哪个是列表,然后列表中的每个元素,哪个值是我们最后的typeahead需要的(第二个参数是每个列表的元素的句柄)。

以13和15行为里,这里我们返回的response json数据中,应该有这样的形式:

{“data”:[“string1”, “string2”]}

参数response.data就是[]的句柄,参数data第一次是string1、第二次是string2。

要就是bloodhound会循环数组中的每个元素(根据15行的规则,这里我们只是把string1、string2拷贝给每个name),得到最后喂给typeahead的数组。

这里要说的是,response的json格式,因为bloodhound的transform,完全就可以是任意格式。比如,我们上面的response,可以是

{“result”: 200, “description”: “OK”, “data”:[“string1”, “string2”]}

如果data数组里面的并不是单一的string,也是对象,比如

{“data”:[ {“name”:”joe”}, {“name”:”kylin”}]}

那么我们上面的transform代码就要改成:

transform: function(response) {
                return $.map(response.data, function(data) {
                    return {
                        name: data.name
                    };
                });
            }

因为这个时候,参数2其实都是json的一个对象格式。

第15行的name,这个名字完全是由24的display后面的字符决定的,如果24行改成了display: ‘value’,那么这里的name就需要变成value。


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


Bootstrap 4 Modal支持垂直居中,加上它的spinner,我们可以组合一个垂直居中的等待控件。代码如下:

		<!-- 全屏spinner构造 -->
		<div class="modal" id="waitingModalCenter" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered" role="document">
			  <div class="modal-content modal-sm" style="max-width: 0px; border: 0; left: 50%;">
				  <div class="spinner-border text-danger" role="status">
					<span class="sr-only">Loading...</span>
				  </div>
			  </div>
			</div>
		</div>

化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


Responsive Layout(响应式)是布局的设计方式,这种布局设计能让产品(我们这里显然是网页)能够适应不同显示尺寸的设备。也就是说:响应式布局能自动调整和适应任意尺寸的屏幕,无论目标是桌面系统、笔记本、平板还是手机。举个例子来说,一个网页,可能在大的屏幕是是4×3(4行,每行3列)的布局。同样这个网页,因为使用了响应式布局,到了小一点的屏幕上,就能自适应成2列的。也可以看下图所示:


化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


这两个词是针对容器style说的。对于Fixed Layout,就是关键词.container。而Fluid Layout,就是.container-fluid。

两者的区别在于,前者在内部会使用指定的style和显示的设备计算出相应的div能占的宽度,而后者是100%的占用当前的宽度。相对而言,前者是用计算出的像素值,而后者用的是百分比。所以有Fixed和Fluid的两个词的区别。

下面是两个案例,第一个展示Fixed Layout,第二个展示Fluid Layout。在可以运行的浏览器上跑一下,就容易看出差别:1、Nav Head上的字,在Fixed layout的时候,基本上是在中间开始显示。但是Fluid中,是靠左开始显示。2、中间的内容,Fixed Layout的时候,看的出是靠中开始显示。但是在Fluid的模式下,也是靠左开始显示的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Fixed Layout Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
    <div class="container">
        <a href="#" class="navbar-brand mr-3">Tutorial Republic</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Services</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Register</a>
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>    
</nav>
<div class="container">
    <div class="jumbotron">
        <h1>Learn to Create Websites</h1>
        <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
        <p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
            <p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
        <div class="col-md-4">
            <h2>CSS</h2>
            <p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
            <p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
        <div class="col-md-4">
            <h2>Bootstrap</h2>
            <p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
            <p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright © 2019 Tutorial Republic</p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="#" class="text-dark">Terms of Use</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Privacy Policy</a>
            </div>
        </div>
    </footer>
</div>
</body>
</html>                            
上面是第一个展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Fluid Layout Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
    <div class="container-fluid">
        <a href="#" class="navbar-brand mr-3">Tutorial Republic</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Services</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>
            <div class="navbar-nav ml-auto">
                <a href="#" class="nav-item nav-link">Register</a>
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>    
</nav>
<div class="container-fluid">
    <div class="jumbotron">
        <h1>Learn to Create Websites</h1>
        <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
        <p><a href="https://www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
            <p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
        <div class="col-md-4">
            <h2>CSS</h2>
            <p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
            <p><a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
        <div class="col-md-4">
            <h2>Bootstrap</h2>
            <p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
            <p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright © 2019 Tutorial Republic</p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="#" class="text-dark">Terms of Use</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Privacy Policy</a>
            </div>
        </div>
    </footer>
</div>
</body>
</html>                            
上面代码是第二个展示。

化石原创文章,转载请注明来源并保留原文链接