bootstrap 仿手机美团页面
2017-09-25 22:04:42 weixin_37710293 阅读数 2337
Bootstrap插件概览 站点引用 Bootstrap 插件的方式有两种: 单独引用:使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件,请先确保弄清这些插件之间的依赖关系。 编译(同时)引用:使用 bootstrap.js 或压缩版的 bootstrap.min.js。 (API:应用程序接口) data 属性: 通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。首选方式 关闭 data 属性 API 的方法,即解除以 data-api 为命名空间并绑定在文档上的事件。`(document).off(.dataapi)dataapi(document).off(‘.alert.data-api’)` 编程方式的 API 避免命名空间冲突:可以通过调用插件的 .noConflict 方法恢复其原始值。
var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 之前所赋的值
$.fn.bootstrapBtn = bootstrapButton// 为 $().bootstrapBtn 赋予 Bootstrap 功能
事件两种形式: 动词不定式:这会在事件开始时被触发。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。
$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() 
})
过去分词形式:这会在动作执行完毕之后被触发。例如 ex: shown。 一、过渡效果(Transition)插件 1、模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 切换模态框(Modal)插件的隐藏内容: 通过 data 属性: 在控制器元素(比如按钮或者链接)上设置属性 data-toggle=”modal”,同时设置 data-target=”#identifier” 或 href=”#identifier” 来指定要切换的特定的模态框(带有 id=”identifier”)。 通过 JavaScript: 使用这种技术,您可以通过简单的一行 JavaScript 来调用带有 id=”identifier” 的模态框:
$('#identifier').modal(options)
选项 backdrop boolean 或 string ‘static’ 默认值:true data-backdrop 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。 keyboard boolean 默认值:true data-keyboard 当按下 escape 键时关闭模态框,设置为 false 时则按键无效。 show boolean 默认值:true data-show 当初始化时显示模态框。 remote path 默认值:false data-remote 使用 jQuery .load 方法,为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href,则会加载其中的内容。 方法:与 modal() 一起使用的有用的方法。 Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。
$('#identifier').modal({
keyboard: false
})
Toggle: .modal(‘toggle’) 手动切换模态框。
$('#identifier').modal('toggle')
Show: .modal(‘show’) 手动打开模态框。
$('#identifier').modal('show')
Hide: .modal(‘hide’) 手动隐藏模态框。
$('#identifier').modal('hide')
事件 show.bs.modal 在调用 show 方法后触发。
$('#identifier').on('show.bs.modal', function () {
  // 执行一些动作...
})
shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。
$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})
hide.bs.modal 当调用 hide 实例方法时触发。
$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})
hidden.bs.modal 当模态框完全对用户隐藏时触发。
$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})
2、标签页(Tab)插件 启用标签页: 通过 data 属性:您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中。 添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap 胶囊式样式。
<ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
</ul>
通过 JavaScript:您可以使用 Javscript 来启用标签页 淡入淡出效果,请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类,以便淡入显示初始内容 方法 `.$().tab`:该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。 事件 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})
shown.bs.tab 该事件在标签页显示时触发,但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})
3、警告框(Alert)插件 启用警告框的可取消(dismissal)功能: 通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss=”alert”,就会自动为警告框添加关闭功能。
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
    &times;
</a>
通过 JavaScript:`$(“.alert”).alert()` 方法 .alert() 该方法让所有的警告框都带有关闭功能。
$('#identifier').alert();
Close Method .alert(‘close’) 关闭所有的警告框。
$('#identifier').alert('close');
如需在关闭时启用动画效果,请确保添加了 .fade 和 .in class。 事件 close.bs.alert 当调用 close 实例方法时立即触发该事件。
$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})
closed.bs.alert 当警告框被关闭时触发该事件(将等待 CSS 过渡效果完成)。
$('#myalert').bind('closed.bs.alert', function () {
    // 执行一些动作...
})
4、轮播(Carousel)插件 为了实现轮播,您只需要添加带有该标记的代码即可。不需要使用 data 属性,只需要简单的基于 class 的开发即可。 可选的标题 您可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可,它会自动对齐并格式化。 用法 通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。 使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to=”2” 将把滑块移动到一个特定的索引,索引从 0 开始计数。 data-ride=”carousel” 属性用于标记轮播在页面加载时就开始动画播放。 通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用,如下所示:
$('.carousel').carousel()
选项 有一些选项是通过 data 属性或 JavaScript 来传递的。 interval number 默认值:5000 data-interval 自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。 pause string 默认值:”hover” data-pause 鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。 wrap boolean 默认值:true data-wrap 轮播是否连续循环。 方法: .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目。
$('#identifier').carousel({
    interval: 2000
})
.carousel(‘cycle’) 从左到右循环轮播项目。
$('#identifier').carousel('cycle')
.carousel(‘pause’) 停止轮播循环项目。
$('#identifier').carousel('pause')
.carousel(number) 循环轮播到某个特定的帧(从 0 开始计数,与数组类似)。
$('#identifier').carousel(number)
.carousel(‘prev’) 循环轮播到上一个项目。
$('#identifier').carousel('prev')
.carousel(‘next’) 循环轮播到下一个项目。
$('#identifier').carousel('next')
事件: slide.bs.carousel 当调用 slide 实例方法时立即触发该事件。
$('#identifier').on('slide.bs.carousel', function () {
    // 执行一些动作...
})
slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件。
$('#identifier').on('slid.bs.carousel', function () {
    // 执行一些动作...
})
下拉菜单(Dropdown)插件 切换下拉菜单(Dropdown)插件的隐藏内容: 通过 data 属性: 向链接或按钮添加 data-toggle=”dropdown” 来切换下拉菜单 如果您需要保持链接完整(在浏览器不启用 JavaScript 时有用),请使用 data-target=”#” 属性代替 href=”#” 通过 JavaScript: 通过 JavaScript 调用下拉菜单切换,请使用下面的方法:
$('.dropdown-toggle').dropdown()
实例 在导航栏内、在标签页内 方法 下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。
$().dropdown('toggle')

滚动监听(Scrollspy)插件
基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。
您可以向顶部导航添加滚动监听行为:
通过 data 属性:向您想要监听的元素(通常是 body)添加 data-spy=”scroll”。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作,您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
    <ul class="nav nav-tabs">
        ...
    </ul>
</div>
...
</body>

通过 JavaScript:您可以通过 JavaScript 调用滚动监听,选取要监听的元素,然后调用 .scrollspy() 函数:

$('body').scrollspy({ target: '.navbar-example' })

选项:
offset number 默认值:10 data-offset 当计算滚动位置时,距离顶部的偏移像素。

方法:
.scrollspy(‘refresh’):当通过 JavaScript 调用 scrollspy 方法时,您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更(即,您添加或移除了某些元素)时非常有用。

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

事件
activate.bs.scrollspy 每当一个新项目被滚动监听激活时,触发该事件。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

更多实例:
创建水平滚动监听、垂直滚动监听

提示工具(Tooltip)插件:

用法:默认情况下是把提示工具(tooltip)放在它们的触发元素后面。
通过 data 属性:如需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle=”tooltip” 即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(tooltip)设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

通过 JavaScript:通过 JavaScript 触发提示工具(tooltip):

$('#identifier').tooltip(options)

注:提示工具不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的提示工具(tooltip):

$(function () { $("[data-toggle='tooltip']").tooltip(); });

选项
有一些选项是通过 Bootstrap 数据 API(Bootstrap Data API)添加或通过 JavaScript 调用的。
animation boolean 默认值:true data-animation 提示工具使用 CSS 渐变滤镜效果。
html boolean 默认值:false data-html 向提示工具插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
placement string|function 默认值:top data-placement 规定如何定位提示工具(即 top|bottom|left|right|auto)。
当指定为 auto 时,会动态调整提示工具。例如,如果 placement 是 “auto left”,提示工具将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selector string 默认值:false data-selector 如果提供了一个选择器,提示工具对象将被委派到指定的目标。
title string | function 默认值:” data-title 如果未指定 title 属性,则 title 选项是默认的 title 值。
trigger string 默认值:’hover focus’ data-trigger 定义如何触发提示工具: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
content string | function 默认值:” data-content 如果未指定 data-content 属性,则使用默认的 content 值。
delay number | object 默认值:0 data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
delay:{ show: 500, hide: 100 }
container string | false 默认值:false data-container 向指定元素追加提示工具。

方法:
Options: .tooltip(options) 向元素集合附加提示工具句柄。

$().tooltip(options)

Toggle: .tooltip(‘toggle’) 切换显示/隐藏元素的提示工具。

$('#element').tooltip('toggle')

Show: .tooltip(‘show’) 显示元素的提示工具。

$('#element').tooltip('show')

Hide: .tooltip(‘hide’) 隐藏元素的提示工具。

$('#element').tooltip('hide')

Destroy: .tooltip(‘destroy’) 隐藏并销毁元素的提示工具。

$('#element').tooltip('destroy')

事件:
show.bs.tooltip 当调用 show 实例方法时立即触发该事件。

$('#myTooltip').on('show.bs.tooltip', function () {
  // 执行一些动作...
})

shown.bs.tooltip 当提示工具对用户可见时触发该事件(将等待 CSS 过渡效果完成)。

$('#myTooltip').on('shown.bs.tooltip', function () {
  // 执行一些动作...
})

hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。

$('#myTooltip').on('hide.bs.tooltip', function () {
  // 执行一些动作...
})

hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // 执行一些动作...
})

弹出框(Popover)插件
用法:
通过 data 属性:如需添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle=”popover” 即可。锚的 title 即为弹出框(popover)的文本。默认情况下,插件把弹出框(popover)设置在顶部。

<a href="#" data-toggle="popover" title="Example popover">
    请悬停在我的上面
</a>

通过 JavaScript:通过 JavaScript 启用弹出框(popover):$('#identifier').popover(options)
注:弹出框(Popover)插件不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的弹出框(popover):

$(function () { $("[data-toggle='popover']").popover(); });

选项:
animation boolean 默认值:true data-animation 向弹出框应用 CSS 褪色过渡效果。
html boolean 默认值:false data-html 向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
placement string|function 默认值:top data-placement 规定如何定位弹出框(即 top|bottom|left|right|auto)。
当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 “auto left”,弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selector string 默认值:false data-selector 如果提供了一个选择器,弹出框对象将被委派到指定的目标。
title string | function 默认值:” data-title 如果未指定 title 属性,则 title 选项是默认的 title 值。
trigger string 默认值:’hover focus’ data-trigger 定义如何触发弹出框: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
delay number | object 默认值:0 data-delay 延迟显示和隐藏弹出框的毫秒数
delay:{ show: 500, hide: 100 }
container string | false 默认值:false data-container 向指定元素追加弹出框。

方法 :
Options: .popover(options) 向元素集合附加弹出框句柄。

$().popover(options)

Toggle: .popover(‘toggle’) 切换显示/隐藏元素的弹出框。

$('#element').popover('toggle')

Show: .popover(‘show’) 显示元素的弹出框。

$('#element').popover('show')

Hide: .popover(‘hide’) 隐藏元素的弹出框。

$('#element').popover('hide')

Destroy: .popover(‘destroy’) 隐藏并销毁元素的弹出框。

$('#element').popover('destroy')

事件:
show.bs.popover 当调用 show 实例方法时立即触发该事件。

$('#mypopover').on('show.bs.popover', function () {
  // 执行一些动作...
})

shown.bs.popover 当弹出框对用户可见时触发该事件(将等待 CSS 过渡效果完成)。

$('#mypopover').on('shown.bs.popover', function () {
  // 执行一些动作...
})

hide.bs.popover 当调用 hide 实例方法时立即触发该事件。

$('#mypopover').on('hide.bs.popover', function () {
  // 执行一些动作...
})

hidden.bs.popover 当工具提示对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。

$('#mypopover').on('hidden.bs.popover', function () {
  // 执行一些动作...
})

按钮(Button)插件
加载状态:如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loading-text=”Loading…” 作为其属性即可
单个切换:如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle=”button” 作为其属性即可
复选框:创建复选框组,通过向 btn-group 添加 data 属性 data-toggle=”buttons” 来添加复选框组的切换。
单选按钮(Radio):您可以创建单选按钮组,并通过向 btn-group 添加 data 属性 data-toggle=”buttons” 来添加单选按钮组的切换。
用法:通过 JavaScript 启用按钮(Button)插件,$('.btn').button()

方法:
button(‘toggle’) 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。

$().button('toggle')

.button(‘loading’) 当加载时,按钮是禁用的,且文本变为 button 元素的 data-loading-text 属性的值。

$().button('loading')

.button(‘reset’) 重置按钮状态,文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时,该方法非常有用。

$().button('reset')

.button(string) 该方法中的字符串是指由用户声明的任何字符串。使用该方法,重置按钮状态,并添加新的内容。

$().button(string)

折叠(Collapse)插件:
创建可折叠的分组或折叠面板
1、data-toggle=”collapse” 添加到您想要展开或折叠的组件的链接上。
2、href 或 data-target 属性添加到父组件,它的值是子组件的 id。
3、data-parent 属性把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接上。

创建不带 accordion 标记的简单的可折叠组件
用法:列出了折叠(Collapse)插件用于处理繁重的伸缩的 class:
.collapse 隐藏内容。 尝试一下
.collapse.in 显示内容。 尝试一下
.collapsing 当过渡效果开始时被添加,当过渡效果完成时被移除。

用法:
通过 data 属性:向元素添加 data-toggle=”collapse” 和 data-target,自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器,并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的,请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理,请添加 data 属性 data-parent=”#selector”。
通过 JavaScript:可通过 JavaScript 激活 collapse 方法,如下所示:

$('.collapse').collapse()

选项:
parent selector 默认值:false data-parent 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板(accordion)的行为类似 - 这依赖于 accordion-group 类。
toggle boolean 默认值:true data-toggle 切换调用可折叠元素。

方法:
Options: .collapse(options) 激活内容为可折叠元素。接受一个可选的 options 对象。

$('#identifier').collapse({
    toggle: false
})

Toggle: .collapse(‘toggle’) 切换显示/隐藏可折叠元素。

$('#identifier').collapse('toggle')

Show: .collapse(‘show’) 显示可折叠元素。

$('#identifier').collapse('show')

Hide: .collapse(‘hide’) 隐藏可折叠元素。

$('#identifier').collapse('hide')

事件
show.bs.collapse 在调用 show 方法后触发该事件。

$('#identifier').on('show.bs.collapse', function () {
    // 执行一些动作...
})

shown.bs.collapse 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。

$('#identifier').on('shown.bs.collapse', function () {
    // 执行一些动作...
})

hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。

$('#identifier').on('hide.bs.collapse', function () {
    // 执行一些动作...
})

hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。

$('#identifier').on('hidden.bs.collapse', function () {
    // 执行一些动作...
})

附加导航(Affix)插件

附加导航(Affix)插件允许某个

固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该
会锁定在某个位置,不会随着页面其他部分一起滚动。

用法:
通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy=”affix” 即可。请使用偏移来定义何时切换元素的锁定和移动。
通过 JavaScript:您可以通过 JavaScript 手动为某个元素添加附加导航(Affix)。

通过 CSS 定位:
在上面两种使用附加导航(Affix)插件的方式中,您都必须通过 CSS 定位内容。附加导航(Affix)插件在三种 class 之间切换,每种 class 都呈现了特定的状态: .affix、.affix-top 和 .affix-bottom。请按照下面的步骤,来为这三种状态设置您自己的 CSS(不依赖此插件)。
在开始时,插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。
当滚动经过添加了附加导航(Affix)的元素时,应触发实际的附加导航(Affix)。此时 .affix 会替代 .affix-top,同时设置 position: fixed;(由 Bootstrap 的 CSS 代码提供)。
如果定义了底部偏移,当滚动到达该位置时,应把 .affix 替换为 .affix-bottom。由于偏移是可选的,假如设置了该偏移,则要求同时设置适当的 CSS。在这种情况下,请在必要的时候添加 position: absolute;。

选项:
offset number | function | object 默认值:10 data-offset 当计算滚动位置时,距离顶部的偏移像素。如果设置了一个数字,则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移,则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移,请使用函数。

2017-01-14 13:40:44 Silent_Paladin 阅读数 1013

1 HTML

(1) 语法

  • 缩进使用两个空格代替 Tab

  • 嵌套元素缩进一次

  • 属性定义全部使用双引号,避免单引号

  • 不需要在自闭和元素的尾部添加斜杠(/),如 <input type="password">

  • 不能省略可选的结束标签,如 </li></body>

(2) HTML5 DOCTYPE

在每个 HTML 页面第一行添加标准模式(Standard Mode)声明,确保在每个浏览器中表现一致

<!DOCTYPE html>

(3) IE 兼容模式

IE 支持根据特定的 <meta> 标签确定绘制当前页面所应采用的 IE 版本,建议设置如下

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

(4) 字符编码

明确声明字符编码,确保浏览器能够快速定位页面内容的渲染方式,建议采用 UTF-8 编码

<head>
  <meta charset="UTF-8">
</head>

(5) 引入 CSS 文件

根据 HTML5 规范,引入 CSS 文件时不需要指定 type 属性,默认值是 text/css,如

<link rel="stylesheet" href="xxx.css">

(6) 引入 JavaScript 文件

根据 HTML5 规范,引入 JavaScript 文件时不需要指定 type 属性,默认值是 text/javascript,如

<script src="xxx.js"></script>

(7) 属性顺序

HTML 属性建议按照以下顺序依次排列

  • class

  • id, name

  • data-*

  • src, for, type, href

  • title, alt

  • aria-*, role

注意:

  • class 用于标识可复用组件,应该放在首位

  • id 用于标识某一具体组件,应该放在次位

(8) boolean 类型属性

根据 HTML5 规范,boolean 类型属性在声明时不需要赋值,如

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

(9) 尽量减少嵌套的标签数量

(10) 尽量避免通过 JavaScript 动态生成标签,这样做不利于查找、编辑且影响性能

2 CSS

(1) 语法

  • 缩进使用两个空格代替 Tab

  • 将单独的选择器单独放在一行

  • 在每个声明块的左花括号前添加一个空格

  • 声明块的右花括号单独成行

  • 每条声明语句的 : 后插入一个空格

  • 每条声明独占一行

  • 所有声明语句以分号结尾

  • 对于以逗号分隔的属性值,每个逗号后面插入一个空格 margin: 0 0 15px 0;

  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格),如 background-color: rgba(0,0,0,.5);

  • 对于属性值或颜色参数,省略小于 1 的小数前面的 0,如 background-color: rgba(0,0,0,.5);

  • 十六进制值应该全部小写,如使用 #fff 替代 #FFF

  • 尽量使用简写形式的十六进制值,如使用 #fff 替代 #ffffff

  • 为选择器中的属性添加双引号,如使用 input[type="text"] 替代 input[type=text]

  • 避免为 0 值指定单位,如使用 margin: 0; 替代 margin: 0px;

(2) 声明顺序

/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Misc */
opacity: 1;

(3) 避免使用 @import

<link> 标签相比,@import 指令慢很多

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

解决方案:

  • 使用多个 <link> 元素

  • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

  • 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

(4) class 命名

  • class 名称中只能出现小写字符和破折号(-_

  • class 名称应当尽可能短,并且意义明确

  • 避免过度简写

  • 基于最近的父 class 或基本(base) class 作为新 class 的前缀

(5) 选择器

  • 对于通用元素使用 class ,这样利于渲染性能的优化
  • 对于经常出现的组件,避免使用属性选择器
  • 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3

(6) 设置文件编码为 UTF-8

(7) 在文件结尾添加一个空白行

2017-12-25 17:44:31 qq_33272864 阅读数 1175

使用bootstrap时,先去bootstrap官网(http://www.bootcss.com/)下载最新版本bootstrap,然后根据下载页面下提示使用。

通常

必须存在
然后引用bootstrap.js、bootstrap.css、jquery.js三个文件
如:

<!-- bootstrap规定使用前置设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- js样式 -->
<link href="boot/css/bootstrap.css" rel="stylesheet" type="text/css" />
<!-- css样式 -->
<script type="text/javascript" src="boot/js/jquery.js"></script>
<script type="text/javascript" src="boot/js/bootstrap.js"></script>

使用bootstrap时可以使用界面生成器(layoutit)自动生成基本的html页面

也可在bootstrap官网查询全局 CSS 样式

2019-02-12 17:47:03 weixin_41461967 阅读数 1355

一、什么是bootstrap?

bootstrap是一个前端开发时使用的框架。前端开发主要写HTML5、css3、JavaScript。而bootstrap框架主要为我们提供两个最重要的文件:bootstrap.min.css和bootstrap.min.js。为什么没有.min.html呢?不知道,或许有一天会有吧~

在bootstrap4.x版本中,bootstrap.min.js需要依赖两个文件:jquery-3.3.1.slim.min.js和popper.min.js。jquery不用多说了,但是popper.min.js这个框架没怎么听说过,对制作和美化下拉框、文字提示、弹出框等非常有用。

二、怎么使用bootstrap框架?

上面说了,bootstrap重要的是两个文件,bootstrap.min.css和bootstrap.min.js。使用bootstrap框架有两个方法,一是在官网下载bootstrap,解压缩后找到bootstrap.min.css和bootstrap.min.js复制粘贴到您正在开发的项目下,具体放在工程里面的哪一级哪个目录下自己决定,然后在需要用到该框架的.html文件里用<link>标签引入bootstrap.min.css,用<script>标签引入bootstrap.min.js。在引入bootstrap.min.js文件之前必须引入jquery-3.3.1.slim.min.js和popper.min.js(这两个文件需要自行去各自官网下载然后复制粘贴到正在开发的项目的任意位置)。下面贴出一份模板供大家参考:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--你自己写的样式文件,尽量不要放在bootstrap.min.css之前-->
    <link href="css/your-style.css" rel="stylesheet"> 

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!--官方建议这三个<script>标签写在body结束标签之前,三个标签顺序不能搞乱-->
    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

二是不需要下载任何文件,使用BootstrapCDN快速地将 Bootstrap 应用到你的项目中。模板如下:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

所有文件会通过http请求自动下载并引入到自己的项目中。

三、一些重要的设置

1. HTML5 doctype

Bootstrap 要求设置 HTML5 doctype,也就是.html文件需要使用HTML5的声明。如果没有这个设置,你会看到一些奇怪的、不完整的样式,但是只要添加了这个设置就不会出现任何错误了。

<!doctype html>
<html lang="en">
  ...
</html>

lang属性可以不用添加。

2. 响应式meta标签

Bootstrap 本着 移动设备优先 的策略开发的,按照这一策略,我们优先为移动设备优化代码,然后根据每个组件的情况并利用 CSS 媒体查询(CSS media queries)技术为组件设置合适的样式。为了确保在所有设备上能够正确渲染并支持触控缩放,务必将设置 viewport 属性的 meta 标签添加到 <head> 中。如下所示。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

3. 盒模型

bootstrap框架内部已经将全局的 box-sizing 值从默认的 content-box 修改为 border-box。这就确保了 padding 不会影响元素最终的宽度计算,但是这可能会导致第三方组件出现问题,例如 Google 地图和 Google 定制搜索。

所以有的时候需要手动设置回默认值去。怎么设置呢?看下面代码:

.selector-for-some-widget {
  box-sizing: content-box;
}

关于box-sizing属性的值,我们可以参考文章:css的两种盒模型

4. Reboot

为了改善跨浏览器的渲染,我们使用 Reboot 修正跨浏览器和设备之间的不一致性,同时对常用的 HTML 元素设置统一的效果。


bootstrap4.2.1官方文档:https://getbootstrap.com/docs/4.2/getting-started/introduction/

bootstrap4.x通用的中文文档:https://v4.bootcss.com/docs/4.0/getting-started/introduction/

2017-04-15 23:47:02 u014326004 阅读数 3752

bootstrap table是一个非常好用,且功能很全的表格插件

在使用bootstrap table之前,需要将bootstrap-table.js 和bootstrap-table.css引入到工程中,两个文件的现在地址为:http://bootstrap-table.wenzhixin.net.cn/

我的工程目录如下图所示:


我的测试文件是test2.html,文件中引用table的语法为,属性具体含义去以下网址参考(http://bootstrap-table.wenzhixin.net.cn/documentation/):


(1)想调用bootstrap table的已存在的函数和系统事件需要自己在页面中按照官网方式调用,对于系统事件调用而言有两种方式:


我的工程例子如下图所示,调用了两个系统事件:


(2)调用其自身的函数有一种方式,$('#table').bootstrapTable('method', parameter);

我的例子下图所示:


至于函数中的参数去网站上查,就是上面一个网址

效果如下图(第一图是点击一行之后,背景变绿色,第二个图是点击增加按钮后,会增加一行)


bootstrap的部署

阅读数 645

bootstrap4中文文档

阅读数 1002

bootstrapPrintThis打印插件

博文 来自: qq_34117825
没有更多推荐了,返回首页