成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - （4）源碼分析之腳本部分

piglei / 1774人閱讀

摘要：修復(fù)后得到合法的后在由布局引擎建立相應(yīng)的對(duì)象。在標(biāo)簽放置于標(biāo)簽之后時(shí)，源碼被所有瀏覽器泛指上常見(jiàn)的修復(fù)為正常形式，即。上一篇之模板的學(xué)習(xí)之路源碼分析之部分下一篇之模板的學(xué)習(xí)之路主題布局配置

上篇我們將 body 標(biāo)簽主體部分進(jìn)行了簡(jiǎn)單總覽，下面看看最后的腳本部門(mén)。

頁(yè)面結(jié)尾部分（Javascripts 腳本文件）

我們來(lái)看看代碼最后的代碼，摘取如下：

我們發(fā)現(xiàn)，所有腳本都在 之前，而且，源碼結(jié)尾也沒(méi)有 標(biāo)簽，這主要是因?yàn)橐韵乱恍┰颍?/p>

為什么放在最后

HTML 文件的加載都是從上往下執(zhí)行的，我們一般習(xí)慣將一些對(duì)顯示效果影響不大的腳本文件放到頁(yè)面的最后進(jìn)行加載。這樣可以減少頁(yè)面的加載時(shí)間。

為什么放在 之前

只所以腳本放在 之前，而不是之后，主要是因?yàn)椋夯谝?guī)則 %html.content "HEAD|BODY"，HTML 標(biāo)簽的子元素只能是 HEAD BODY，如果在 后再出現(xiàn) 。

為什么沒(méi)有 標(biāo)簽

這個(gè)我也忘了哈，好像為了被別的文件包含時(shí)，避免出現(xiàn)把文件閉合了這種情況。一下子找不到這方面的說(shuō)明了，如果哪位大俠知道，麻煩告知。
當(dāng)然，html5 是支持不閉合標(biāo)簽的。
這兒貌似有一點(diǎn)點(diǎn)說(shuō)明：http://blog.teamtreehouse.com...

Metronic 所用到的插件和資源

Metronic 用了幾十個(gè)插件和擴(kuò)展資源，這才使得這個(gè)模板顯得尤為強(qiáng)大。具體這些插件的描述我就不一一列述了，大家可以逐一點(diǎn)下下面表格的鏈接了解了解。

Name Description URL
jQuery Core Javascript library http://www.jquery.com
Twitter Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development http://getbootstrap.com
Select2 Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results http://ivaynberg.github.io/se...
Bootstrap Confirmation Socicon Social Icons. http://mistic100.github.io/Bo...
Socicon Bootstrap plugin for on-place confirm boxes using Popover. http://www.socicon.com/
Bootstrap Tagsinput Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. https://github.com/timschlech...
Flow Chart Bootstrap plugin for on-place confirm boxes using Popover. http://adrai.github.io/flowch...
Autosize A small, stand-alone script to automatically adjust textarea height. http://www.jacklmoore.com/aut...
Bootstrap Summernote Super Simple WYSIWYG Editor for Bootstrap 3. Summernote is a javascript program that helps you to create WYSIWYG Editor on web. http://hackerwins.github.io/s...
Bootstrap Hover Dropdown Plugin A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience. https://github.com/CWSpear/bo...
Twitter Typeahead A fast and fully-featured autocomplete library. http://twitter.github.io/type...
amCharts Charting library & maps. Where all data goes visual. http://www.amcharts.com/
iCheck SUPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO. http://fronteed.com/iCheck/
Bootstrap Select A custom select for @twitter Bootstrap using button dropdown. http://silviomoreto.github.io...
jQuery Notific8 jQuery Notific8 is a notification plug-in that was inspired by the notification style introduced in Windows 8. http://willsteinmetz.net/jque...
jQuery jsTree A tree view plugin for jQuery. http://www.jstree.com/
Bootstrap Maxlength This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. http://mimo84.github.com/boot...
Bootstrap Session Timeout After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL. https://github.com/travishorn...
jQuery Idle Timeout This script allows you to detect when a user becomes idle (detection provided by Paul Irish"s idletimer plugin) and notify the user his/her session is about to expire. Similar to the technique seen on Mint.com. Polling requests are automatically sent to the server at a configurable interval, maintaining the users session while s/he is using your application for long periods of time. http://www.erichynds.com/exam...
Bootstrap TouchSpin A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys. http://www.virtuosoft.eu/code...
Bootstrap Date Paginator A jQuery plugin which takes Twitter Bootstrap"s already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application. http://www.jonathandanielmile...
Bootbox.js Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. http://bootboxjs.com/
Bootstrap Markdown Markdown editing for Bootstrap. http://toopay.github.com/boot...
Bootstrap FuelUX Input Spinner Bootstrap FuelUX Input Spinner For App. http://exacttarget.github.io/...
Bootstrap Context Menu Context menu plugin for Twitter"s Bootstrap framework https://github.com/sydcanem/b...
jQuery noUiSlider noUiSlider is a super tiny jQuery plugin that allows you to create range sliders. It fully supports touch, and it is way(!) less bloated than the jQueryUI library. http://refreshless.com/nouisl...
jQuery IonRange Slider Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS. http://ionden.com/a/plugins/i...
Bootstrap Toastr Notifications Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. http://codeseven.github.io/to...
Bootstrap Switch Use Radio Buttons as switches. http://www.larentis.eu/switch/
jQuery jCrop Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. http://github.com/tapmodo/Jcrop
Bootstrap X-editable In-place editing with Twitter Bootstrap. http://vitalets.github.io/x-e...
Bootstrap Extended Modals Responsive, Stackable, AJAX and more. http://jschr.github.com/boots...
jQuery Multi Select This plugin is a drop-in replacement for the standard select element with multiple attribute activated. http://loudev.com/
jQuery Sparklines This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. http://omnipotent.net/jquery....
jQuery Input Mask jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers. http://github.com/RobinHerbot...
jQuery Easy Pie Chart Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element http://rendro.github.io/easy-...
jQuery Input IP Address Control During user input field, this plugin controls the format of IPv4 or IPv6 addresses. https://code.google.com/p/jqu...
jQuery UI Sortable jQuery UI Sortable http://jqueryui.com/sortable/
Pace - Page Progress Bar n automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress. For more info check the plugin documentation. http://github.hubspot.com/pace
jQuery BlockUI The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser http://jquery.malsup.com/block/
jQuery Cookie A simple, lightweight jQuery plugin for reading, writing and deleting cookies. https://github.com/carhartl/j...
jQuery Pulsate jQuery Pulsate provides animated pulsating effect that"s useful for focussing attention to a certain part of your webpage in a subtle way. http://kilianvalkhof.com/jque...
Respond A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more) https://github.com/scottjehl/...
Excanvas Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages http://excanvas.sourceforge.net/
jQuery Backstretch A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. http://srobbin.com/jquery-plu...
jQuery Countdown A jQuery plugin that sets a div or span to show a countdown to a given time. http://keith-wood.name/countd...
jQuery Bootpad for Bootstrap Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone. http://botmonster.com/jquery-...
Colorpicker for Bootstrap Add color picker to field or to any other element http://www.eyecon.ro/bootstra...
Datepicker for Bootstrap Add datepicker picker to field or to any other element https://github.com/eternicode...
Bootstrap Datetimepicker This project is a fork of bootstrap-datetimepicker project which doesn"t include Time part. Some others parts has been improved as for example the load process which now accepts the ISO-8601 format. http://www.malot.fr/bootstrap...
Date Range Picker for Bootstrap This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates https://github.com/dangrossma...
Bootstrap Timepicker Easily select a time for a text input using your mouse or keyboards arrow keys. http://jdewit.github.com/boot...
Clockface Timepicker Clockface is a simple timepicker for Twitter Bootstrap http://vitalets.github.com/cl...
Bootstrap Growl Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications. https://github.com/ifightcrim...
Bootstrap Tabdrop Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit. http://www.eyecon.ro/bootstra...
Bootstrap Select Splitter Transforms SELECT containing one or more OPTGROUP in two chained SELECT. https://github.com/xavierfauc...
jQuery MiniColors A tiny color picker built on jQuery https://github.com/claviska/j...
jQuery Tags Input Magically convert a simple text input into a cool tag list with this jQuery plugin https://github.com/xoxco/jQue...
Bootstrap WYSIWYG5 Simple WYSIWYG Editor for Bootstrap http://jhollingworth.github.c...
CKEditor CKEditor is a ready-for-use HTML text editor designed to simplify web content creation http://ckeditor.com/
DataTables DataTables for Twitter Bootstrap http://www.datatables.net/
Bootstrap File Input The file upload plugin allows you to create a visually appealing file or image upload widgets http://jasny.github.io/bootst...
FancyBox FancyBox is a tool for displaying images, html content and multi-media http://fancybox.net/
Flot Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. http://www.flotcharts.org/
gmaps.js gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code http://hpneo.github.com/gmaps/
FullCalendar FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar http://arshaw.com/fullcalendar/
jQuery slimScroll slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar http://rocha.la/jQuery-slimSc...
JQVMAP JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML. http://jqvmap.com/
jQuery File Upload File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery http://blueimp.github.com/jQu...
DropzoneJS DropzoneJS is an open source library that provides drag"n"drop file uploads with image previews. http://www.dropzonejs.com/
jQuery UI Touch Punch jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. http://touchpunch.furf.com/
Bootstrap Form Wizard This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. https://github.com/VinceG/twi...
Nestable Drag & drop hierarchical list with mouse and touch compatibility. https://github.com/dbushell/N...
jQuery Validation Plugin The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy http://bassistance.de/jquery-...
FontAwesome The iconic font designed for use with Twitter Bootstrap http://fortawesome.github.com...
Simple Line Icons Simple Line Icons is 162 simple stroke icons that are great for mobile applications, websites, user interfaces, etc. All icons were converted from the same beautiful simple line icon sets released previously on GraphicBurger. http://graphicburger.com/simp...
Open Sans Metornic uses Open Sans web font from google fonts: http://fonts.googleapis.com/c... http://www.google.com/webfonts

上一篇：Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - （3）源碼分析之 body 部分
下一篇：Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - （5）主題&布局配置

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80178.html

相關(guān)文章

  • Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - （3）源碼分析之 body 部分

    摘要：的組成結(jié)構(gòu)部分包含了，其中部分又包含了幾個(gè)部分。代碼如下圖內(nèi)容展示截圖代碼截圖快捷欄展示截圖代碼截圖頁(yè)面底部展示截圖代碼截圖上一篇之模板的學(xué)習(xí)之路源碼分析之部分下一篇之模板的學(xué)習(xí)之路源碼分析之腳本部分 body 的組成結(jié)構(gòu) body 部分包含了 HEADER、CONTAINER、FOOTER，其中 CONTAINER 部分又包含了 SIDEBAR、CONTENT、QUICK SIDEB...

    afishhhhh 評(píng)論0 收藏0

  • Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - （1）總覽

    摘要：寫(xiě)在前面的模板非常多，上有著各種各樣的免費(fèi)及付費(fèi)模板。概述是一個(gè)基于設(shè)計(jì)的自適應(yīng)多用途的管理后臺(tái)模板。下一篇之模板的學(xué)習(xí)之路源碼分析之部分 寫(xiě)在前面 bootstrap 的模板非常多，Envato 上有著各種各樣的免費(fèi)及付費(fèi)模板。Metronic 是我最喜歡的模板之一（看一眼就喜歡上的那種），當(dāng)前售價(jià) $28 ，覺(jué)得贊的，不妨支持一下作者。覺(jué)得貴的，想必不用我說(shuō)，你也會(huì)找到途徑。:b ...

    stackfing 評(píng)論0 收藏0

  • Bootstrap 之 Metronic 模板的學(xué)習(xí)之路 - （6）自定義和擴(kuò)展

    摘要：你可以用此模板作為你應(yīng)用程序的起點(diǎn)。上一篇之模板的學(xué)習(xí)之路主題布局配置下一篇之模板的學(xué)習(xí)之路前端自動(dòng)化工具 前面我們將 Metronic 的結(jié)構(gòu)和源碼大致瀏覽了一遍，Metronic 整個(gè)文件包有三百多兆，在實(shí)際項(xiàng)目中，我們肯定用不到所有文件，這時(shí)，我們需要做一些自定義。 自定義和擴(kuò)展 CSS 部分 要重載 Metronic 主題的 CSS 樣式，我們可以定制 ../assets/la...

    MoAir 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<