【读书笔记《Bootstrap 实战》】1.初识Bootstrap

作为Web前端开发框架,Bootstrap为多数业内的UI设计常见提供了用户自己、扩浏览器的化解方案。

 

1.下载Bootstrap

开辟官方网址 http://getbootstrap.com/
举行下载。

图片 1

 

 

2.准备项目模板文件夹

接下去,大家为第四个类型创造一个文书夹以及部分主干的文件。谓词我们还要选取HTML5样板文件
HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。

2.1 下载H5BP

访问网站链接地址:https://html5boilerplate.com/
,下载B5BP。

图片 2

解压后,修改文件夹名为Bootstrap_First,其目录结构如下:

图片 3

2.2 然后删除和立异下必备的金科玉律文件

删除下列至于H5BP相关的文书夹和文书:

□ 因为稍后要选用LESS成立自己的CSS文件,所以先删除css文件夹。

□ doc 文件夹及里面内容

2.3 精晓样板中的.htaccess文件

以此文件中的内容不自然全部都用,那取决于主机设置和站点要求。这些文件的一个主要用途是保障站点性能最优。

2.4 更新要求的典范文件

规范中的下列文件提供了品种的正经音讯,依据要求能够立异它们、直接行使它们或者就放这无论是。

□ humans.txt:那一个文件记载进献者,H5BP、Bootstrap的,还有其他进献者。

□ LICENSE.txt:在H5BP许可前边,加上你依据该许可构建的网站的认可相信息,在H5BP许可后,加上Bootstrap以及此外站点中用到的要紧的库的批准音讯。

2.5 更新站点桌面和触摸设备图标

毫不忘了用自己项目标图标替换 Boilerplate 默许的图标文件。

 

 

3.加入Bootstrap文件

3.1 字体

从Bootstrap的主文件夹中,把fonts文件夹复制粘贴到Bootstrap_First文件夹中。这几个文件夹里含有着Bootstrap附带的主要性的Glyphicon字体。

确保起见,再在fonts文件夹中放一个跨域友好的.htaccess文件:

<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

其指标是承保即便站点根目录下没有放H5BP的.htaccess文件,也不会出现字体问题。

 

3.2 JavaScript

接下去就是加入Bootstrap的JavaScript文件。H5BP的公文夹中曾经包涵了多少个JavaScript文件如下:

图片 4 

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。上面的截图彰显了Bootstrap随带的插件。每个插件一个文件:

图片 5

把这几个插件文件集中封存到新建的js/bootstrap
文件夹,便于优化网站性能,即可以按需选择插件、排除其他文件并裁减文件大小。

在支付时期,保持所有Bootstrap的插件都可用也是一个情势。那样,借使想添加个折叠、提醒或者传送带效应,都可以随手拈来。

H5BP接纳的点子是把装有插件代码复制到一个
plugins.js模板文件中。那是终止开发从此的特等做法,因为这么可以削减HTTP请求,加速站点速度。(换句话说,一个80K的公文,比加载4个20K的公文速度更快。)

开拓Bootstrap文件夹中包罗分发文件的dist文件夹。在这一个文件夹中的js文件夹里,包涵着
bootstrap.js 和 bootstrap.min.js,它们就是含有
Bootstrap所有插件代码的大文件。

图片 6

把bootstrap.min.js 的保有代码复制到plugins.js 里。

下一场把Bootstrap文件夹里的less文件夹也复制到项目文件夹中。

 

4.构造HTML模板

开拓项目中的 index.html
文件举办编辑。那个示例标记文件来自H5BP,显示了有的特级实践和指出方案。大家就以这些为底蕴,把它整合到Bootstrap的工作流中。

浏览一下全方位文件,其中有多少个有趣的地方,H5BP文档中都有详尽表明,近来的5.3.0本子的链接地址为:https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/extend.md
。上面也大致介绍下,按次序来:

□ HTML5 文档类型声明:

<!doctype html>

□ 接下去是多少个meta标签

  ■  用于指定字符集的:  

<meta charset="utf-8">

  ■  告诉IE使用新型版的渲染引擎

<meta http-equiv="x-ua-compatible" content="ie=edge">

  ■  预留给描述站点用的:

<meta name="description" content="">

  ■ 针对移动浏览器的视口标签

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

□ 接下去是八个样式表的链接

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">


再上边就是加载Modernizr脚本的script标签。那个本子回味IE8提供HTML5“垫片脚本”,以便它能分辨HTML5的分区元素:

<script src="js/vendor/modernizr-2.8.3.min.js"></script>

□ 接下去是IE条件注释,包含推荐用户把旧版本IE升级到新本子的音信:

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browse. ...
<![endif]-->

□ 紧接着是一段文本

□ 随后是托管在谷歌服务器上的jQuery链接,以及一个地面jQuery的后备链接:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>

□ 上面就是plugins.js
和main.js的链接,别分保存JavaScript插件代码和我们编辑的代码:

<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

□ 谷歌的Analytics 脚本:

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='https://www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>

 

对这一次的天职而言,大家必要对这几个模板中的元素举行如下操作:

(1) 设定大家站点的标题,针对旧版本浏览器用户更新现有的IE条件注释;

(2) 基于LESS文件编译Bootstrap的CSS,添加基本的页面内容;

(3)
整合Bootstrap的JavaScript插件,确保响应式的导航条(navbar)正常响应。

做完这几件事后,我们就可以初步规划自己的网站了。

 

5.设定站点标题 

<title>初识 Bootstrap</title>

5.1 调整过时的浏览器音信

模板中的音信针对老浏览器用户。

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">
upgrade your browser</a> to improve your experience.</p>
<![endif]-->

 其中带有的链接 http://browsehappy.com/
,该网站是一个推荐浏览器升级的站点。

5.2 设置主结构元素

上面开端准备页面内容,方今还唯有一个段落。大家得以稍微添加一些情节:

□ 包罗Logo的导航的页头区;

□ 包蕴页面内容的内容区;

□ 包含版权和交际媒体链接的页脚区。

增加那个内容,都会基于最新的HTML最佳实践来做,而且会设想ARIA(Accessible
Rich Internet
Applications,可访问富因特网应用)的role属性(即banner、navigation、main和contentinfo
那多少个角色)。HTML5后来又增多了 <main cole=”main></main>
元素,目标是特意为页面或分区中的主内容提供一个专用的元素。要打听越多音讯,可以参见链接:https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/

找到上边的代码:

<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

修改为:

<header role="banner">
<nav role="navigation">
</nav>
</header>

<main role="main">
<h1>Main Heading</h1>
<p>Content specific to this page goes here.</p>
</main>

<footer role="contentinfo">
<p><small>Copyright &copy; Luka Ye</small></p>
</footer>

那就是大家页面的为主结构和情节。

 

6.导航条

咱俩先把Bootstrap特有的元素设置好,那就是导航条。

作为源点,大家得以暂时就选取Bootstrap基本的导航条。为此,从Bootstrap文档中拿来它的导航条代码,然后做出如下调整:

□ 添加了 navbar-static-top
类,因为大家期待导航条可以稳定到窗口顶部,但可以随页面滚动而滚动。

□ 把项目名称连接到 index.html;

□ 把原本的父div标签改成了语义化的HTML5 nav 标签。

调动后,其header元素如下:

<header role="banner">
<nav role="navigation" class="navbar nav-static-top navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">初识 Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
</header>

保存结果,其导航条的展示效果如下:

图片 7

情节有了。现在,我们更加必要团结的样式表。先来形成并链接Bootstrap默认的样式表。

 

7.编译和链接默许的Bootstrap CSS

7.1 编译Bootstrap CSS

找到less/bootstrap.less
并打开它,那一个文件导入了less文件夹中所有此外文件。编译后,这几个文件会变动完整的bootstrap.css样式表。而那就是大家首先步要做的。

PS:LESS的文档地址为 http://lesscss.org/  

只要一切没有编译过LESS文件,必要下载和装置它的编译器。

□ Window 用户,下载和安装那一个编译器:

 ■ WinLess(免费桌面应用),地址为 http://winless.org

□ Mac 用户可以采纳下载:

 ■ Crunch 应用(免费),地址为 http://crunchapp.net/

 ■ CodeKit(收费),地址为 http://incident57.com/codekit/

下载了选取的LESS编译器之后,安装,打开。然后就足以遵从下边的步骤来做了。

(1) 在根目录创造css文件夹。

图片 8

(2) 使用下列的一种把主文件(css、fonts、img、js和
less文件夹的父文件夹)添加到编译器:

 ■ 把公文夹拖到编译器窗口中;

 ■ 在编译器窗口中找到 Add folder 按钮,点击选取主文件夹。

(3)
然后再编译器窗口中得以见到加载的LESS文件,找到less/bootstrap.lesss文件

(4) 右键单击less/bootstrap.less 文件,拔取 Select output
file,找到刚创建的css文件夹,此时出口文件名应当自行会成为bootstrap.css,单击“保存”。

(5) 采用输出路径和文件名,点击Compile。

图片 9

(6) css文件夹中会出现编译生成的 bootstrap.css文件。

(7)
编译成功后,唯一要专注的是其一文件名是不是与index.html中链接的公文名相同。

(8) 在 index.html 中,删除指向 css/normalize.css
的样式表链接,因为那几个样式表已经包涵在 Bootstrap中了。

(9) 复制一份 bootstrap.css,重命名为main.css。

图片 10

(10)
浏览器打开index.html文件,能够寓目起默许的领航样式如下,从排版和布局上独具增强,那申明CSS已经生效。

图片 11

7.2 落成响应式导航条

为了在 Bootstrap
响应式导航条基础上成功我们的导航条,还得再追加四个新因素,以及对应的类和data属性。相关的用法可以参照
Bootstrap的Components
文档,在Navbar选项卡下:http://getbootstrap.com/components/#navbar

先依据下列步骤添加额外的标志。

(1) 搜索到 <div
class=”navbar-header”>,在一个元素中添加一个navbar-toggle按钮,用于进行和接收响应式导航条。上边就是其一按钮的整整标记:

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">



</button>
<a class="navbar-brand" href="index.html">初识 Bootstrap</a>
</div>

简单易行解释下以上代码:

 ■ 按钮中的navbar-toggle 类用于选取CSS样式;

 ■ 前面的数据属性 data-toggle 和 data-target 是Bootstrap 的JavaScript
插件要用的,分部表示预期行为和预期目的(即 collapse 和类名为
navbar-collapse 的因素,这些因素前面会增进)

 ■ 类名为 icon-bar 的span 元素是CSS用来创设按钮中的三道杠按钮用的。

(2) 接下来把导航项包装在一个吸收的div中,即用带有适当
Bootstrap类的div把<ul class=”nav navbar-nav”>包装起来:

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

在前边两步中,大家把代码分分隔成两片段,而且都位于 <div
class=”container”>中。

好了,在其它一个现代浏览器(IE9
或Firefox、Chrome、Safari等的时尚版本)中,拖动窗口减弱到低于980像素。其出示效果如下:

图片 12

 

 

7.3 排除故障

假设一切顺遂,那么注解您曾经打响地把LESS编译成CSS,而且也成功地包罗了Bootstrap的JavaScript插件。若是不如愿,那就要细致检查下咯。

7.4 支持IE8

要援助IE8,必要一段JavaScript代码让浏览器能响应媒体询问。那段代码就是斯考特(Scott)(Scott)Jehl的 respond.js “腻子脚本”。

Bootstrap自身的文档推荐那样做以包容IE8。相关音讯方可参考那里:http://getbootstrap.com/getting-started/#browsers

为了针对IE8 应用那段脚本,要求针对IE8的规范注释:

<!--[if lt IE 9]>
...
<![endif]-->

除此以外,根据Andy Clarke的提议,为了不让并不要求那么些本子的Windows
移动装备加载该脚本,还相应解除IE移动版浏览器,具体参见他的在线代码块
320andup,地址是:https://github.com/malarkey/320andup/

克拉克(Clark)e指出的标准注释如下:

<!--[if (lt IE 9) & (!IEMobile)]>
...
<![endif]-->

有了标准注释,上边就是在站点模板文件中添加腻子脚本了,步骤如下:

(1) 打开 https://github.com/scottjehl/Respond ,下载源代码。

图片 13

(2) 解压缩,找到名为 respond.min.js 的压缩版。

(3) 把它复制到项目文件夹中的 js/vendor 目录下,与jQuery 和
Modernizr放到一起。

图片 14

(4) 然后,把下部几行加载 respond.js 文件代码添加到 index.html
中,包罗针对IE的规范注释,就加载 Modernizr的代码下边:

<!-- Modernizr -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->

(5) 好了,那样IE8 就足以支撑媒体询问响应视口大小变化了。

PS:要是您想测试添加腻子脚本的结果,但又从不IE8
浏览器,可以使用一个在线服务,叫Browsershots,地址是:http://browsershots.org/,那是免费的。还有一个收款的,叫BrowserStack,地址是:
https://www.browserstack.com/(试用免费)。

 

来源:《Bootstrap实战》

相关文章