威尼斯人线上娱乐

bootstrap学习总括1,学习笔记

29 6月 , 2019  

  学习网站:  CodeForDream

目的

估测计算玩了Django也好长日子了,从起首对模板的不解,但以后也得以将bootstrap嵌入到Django中了,记录下全方位经过,对于本身是一遍总括,希望也能对起首使用Django和bootstrap的情人有局地扶植。

世家好,小编是IT修真院金斯敦分院第6期的学员周燎,一枚正直、纯洁、善良的前端程序猿今天给大家大快朵颐一下,修真院官方网站CSS(专门的工作)职务8,深度思虑中的知识点——bootstrap有怎么样常用组件

什么是Bootstrap?

  bootstrap就是三个前端框架,有脸书集团开拓

最大的优点:

  开源  :

  响应式设计:Bootstrap 的响应式 CSS
能够自适应于台式机、平板电脑和手提式有线电话机。越来越多关于响应式设计的开始和结果详见
Bootstrap 响应式设计。

读书网址

  极客高校,汇智网,慕课网,bootstrap普通话文书档案。

开班必要知道:

  bootstrap的js是依据于jQuery的,所以在引进bootstrap.js时必须先引进jQuery.js;

       慕课也可能有上学bootstrap的摄像:    慕课网

bootstrap的优越性

对此四头后台汪,不,
运转狗来说,原生态的前端写出来太难了(光布局作者就脑瓜疼得不得了)。Bootstrap便是极度让您站在一代天骄肩膀上的楼梯(可能说电梯比较合适O(∩_∩)O哈哈~)。
假如一下子用bootstrap太难,作者建议的门路是先看看基本的HTML+CSS,能够W3C(作者是认为官方好枯燥,像手册同样),能够去譬如codecademy仍然国内的bootstrap学习总括1,学习笔记。慕课网,能够一边读书,一边练习。(假诺二回看下来,不太掌握,很健康。Don’t
be frustrated,
多看四遍,只怕接纳的时候,再去看看领悟,这样也好不轻巧一种好方法。视同一律,你也记住药方子。)
纵然你有主题的HTML+CSS,bootstrap其实正是在标签中参与具体的class来贯彻样式。和原生态的HTML+CSS必要先在head标签的style写样式或然引进外界体制比较,bootstrap相当于已经写好了,直接用相应的class援用就能够了。

undefined_Tencent录像

HTML 模板

 

二个使用了 Bootstrap 的主旨的 HTML 模板如下所示:

<!-- HTML5的文档类型 -->
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link   rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

  在此处,能够见到包罗了 jquery.js、bootstrap.min.js 和bootstrap.min.css 文件,用于让三个正规的
HTML 文件变为使用了 Bootstrap 的模板。

为了让 Bootstrap
开垦的网站对运动道具友好,确认保障适当的绘图和触屏缩放,须要在网页的 head
之中增添 viewport meta 标签,如下所示:

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性调控设备的宽窄。要是你的网址将被含有差异显示器分辨率的配备浏览,那么将它设置为 device-width 能够确定保证它能科学展现在不相同器具上。

威尼斯人线上娱乐,initial-scale=1.0 确认保证网页加载时,以 1:1 的百分比显示,不会有别的的缩放。

在活动器具浏览器上,通过为 viewport
meta 标签增多 user-scalable=no 可以禁止使用其缩放(zooming)效能。

一般意况下,maximum-scale=1.0 与 user-scalable=no
一同行使。那样禁止使用缩放效率后,用户只可以滚动荧屏,就能够令你的网址看上去更像原生应用的以为到。

专注,这种措施并不引入全体网址采纳,依旧要看您自个儿的情景而定!

<meta name="viewport" content="width=device-width,
               nitial-scale=1.0,
              maximum-scale=1.0,
              user-scalable=no">

 


  Bootstrap
是前端开拓的一个框架,封装了多数的CSS样式,能够一向引入,减弱过多前端开辟者的时间,还能直接在bootstrap源码上面学习,若是想浓厚学习CSS,是个上学CSS的不错接纳。

bootstrap的使用

自己是在用Django开垦的进度中用bootstrap。

Bootstrap,来自 推特(TWTR.US),是日前最受招待的前端框架。

  在 html 页面里面使用 bootstrap 需求援用 bootstrap
文件,从前须要先引进 jquery 的文本,因为 bootstrap 是凭仗于
jquery库的。

1. bootstrap的引用

自家利用的bootstrap3,在Django中,引进静态文件非常的归纳:

  • Django的设置
    在settings中定义STATIC_URLSTATICFILES_DIRS。暗中认可Django会在各类app下的static/app查找静态文件,就算加额外的渠道寻找则在STATICFILES_DIEvoque中安装(笔者常用这一个,因为项目共用bootstrap),其它,Django还也有个STATIC_ROOT,是选取collectstatic命令搜罗静态文件的功能。
    Django官方文书档案

写好后,将下载的bootstrap的文本夹拷到花色(注意不是app下)的static路径下
注意:生产版本的bootstrap是从未jquery.min.js的(如若有响应效果,供给加那几个),所以要求和谐下载
引用的时候,能够像官方网站说的那样:

  href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  

  href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

依旧,使用静态导入(记得在起来加上{% load staticfiles %}。借使有extends语句,load放在extends下),然后导入:

  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

  <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/mycss.css' %}"

Bootstrap 是依靠 HTML、CSS、JAVASCLX570IPT 的,它简洁利落,使得 Web
开辟尤其便捷。

<link rel="stylesheet"  >  <script src="jquery.js"></script>     //需要在bootstrap.js文件之间引入  <script src="bootstrap.js"></script>  

2. 在templates中使用

举个例子说您须求贰个navbar,也正是导航条,去bootstrap中组件,找到导航条,复制代码就能够。然后修改成团结的样式就能够。

Bootstrap中含有了丰裕的Web组件,依照这么些组件,能够一点也不慢的搭建叁个了不起、效用完备的网址。

引进未来呢,使用的时候,在标签里面一贯增多class属性,就足以将bootstrap有的样式增多进去就能够了,比方:

3. 总结

对此素不相识前端的本身,花了不长日子来商讨。发掘通晓和看真是两码事,总感觉内容相当少,然则想看清,照旧需求写码来证实。
企望这篇能都初用到bootstrap的相恋的人有所帮忙。

二、知识分析

<a    role="button">Link</a>
<button  type="submit">Button</button>
<input  type="button" value="Input">
<input  type="submit" value="Submit">

怎么着是组件

展现的体裁正是:

组件:一般是指软件系统的一局地,承担了一定的职务,可以独立于任何种类举行支付和测量试验,
三个地道设计的零件应该能够在不一样的软件系统中被利用(可复用)。

 威尼斯人线上娱乐 1

举例说咱们得以写贰个官方网址的响应式导航栏组件,曾几何时官方网站扩大与扩展页面了,能够平素拉过来重复使用。

bootstrap里面还会有十分多任何的体制,能够在官方网站络查看样式,然后供给如何就直接助长就好了 boostrap样式 。

时下常用的bootstrap组件:

 

1.轮播图


2.下拉菜单

3.响应式导航栏

干什么要接纳bootstrap的下拉菜单

因为…………方便啊!!!!!
html的select下拉菜单不雅观,而且自定义样式很费力。
bootstrap的下拉菜单是用div+ul+li完结的,能够完全落到实处样式的自定义,而且使用多级下拉菜单的时候也很平价

三、常见难题

怎么行使这么些bootstrap组件?

采纳bootstrap是索要注意的主题素材

四、化解方案

下拉菜单

如需使用下拉菜单,首先要引进bootstrap文件,一般都以引进英特网外人提供的cdn,当然,自身可以引进自个儿定制好的bootstrap文件。
然后只必要在 class .dropdown 内丰裕下拉菜单就能够。

给下拉按键加多dropdown-toggle类和指向性用id,如id=”menu1″,data-toggle用来调控弹出框成分

给菜单列表增添dropdown-menu类和aria-labelledby=”menu1″用来表示指向哪个菜单

响应式导航条

创建二个默许的响应式导航条的步子如下:

1.向nav标签增加 class .navbar、.navbar-default。

2.向上边的因素增添 navbar-header,navbar-header

3.给navbar-header的button添加data-toggle=”collapse”
data-target=”#example-navbar-collapse”。

4.给下边包车型大巴div增多class=”collapse navbar-collapse”
id=”example-navbar-collapse”

1).navbar-toggle样式是决定3根斑马线的。

2).navbar-collapse 样式使导航链接能够在小显示屏状态下接受到三个菜系开关中

3).collapsed是为着响应折叠插件的

4).data-toggle=“collapse”注脚这几个button是二个折叠控件,其折叠的内容针对data-target=”#navbar”,即是id为navbar的内容

使用bootstrap的注意事项

bootstrap文件之中有过多私下认可设置,恐怕会在页面上起功用,这么些要小心一下。
还恐怕有正是.当我们引进bootstrap.js和jquery.js文件时我们要专注引进该公文的先后顺序,要先引进jquery.js在引进bootstrap.js根据那样的顺序来引进文件,
不然就能够报错。
因为bootstarp.js文件的付出是基于jquery开荒的,所以要先引入jquery.js才得以行使bootstrap。
而且引进互连网cdn的话要专注http和https的分别,有时候应用不对的话也会报错

五、编码实战

如上所述

六、拓展思量

什么样处理现成插件不能知足急需的难题

bootstrap可以依附需求定制,BootStrap提供了基于自个儿要求的机件及jquery插件进行定制,使用者也得以一贯修改Less源码。

万一不想完全上修修改改,也足以在组件上直接助长五个自定义的类,来掩盖bootstrap的默许属性。
须求专注的是bootstrap的体制权重相当高,有望需求大家利用!important来扩展权重.

七、参谋文献

参考一:入门 Hello
bootstrap

参考二:新手教程

八、越来越多切磋

何以不选取bootstrap制作响应式导航栏

使用jQury的foundation也能够急忙的兑现响应式的导航栏,当然还会有非常的多艺术大家可以多演练

鸣谢

叶紫阳︱熊凡


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图