About modals

A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.

Download file

Static example

Below is a statically rendered modal.

Live demo

Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.

Launch demo modal

Using bootstrap-modal

Call the modal via javascript:

$('#myModal').modal(options)

Options

Name type default description
backdrop boolean true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
show boolean true Shows the modal when initialized.

Markup

You can activate modals on your page easily without having to write a single line of javascript. Just set data-toggle="modal" on a controller element with a data-target="#foo" or href="#foo" which corresponds to a modal element id, and when clicked, it will launch your modal.

Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="https://dX.timqun.cn/" class="btn" data-dismiss="modal">Close</a>
    <a href="https://Bv57.timqun.cn/" class="btn btn-primary">Save changes</a>
  </div>
</div>
Heads up! If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action) and include bootstrap-transition.js.

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Manually toggles a modal.

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

$('#myModal').modal('hide')

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide instance method has been called.
hidden This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
$('#myModal').on('hidden', function () {
  // do something…
})


This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.

Download file

Example tabs

Click the tabs below to toggle between hidden panes, even via dropdown menus.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Using bootstrap-tab.js

Enable tabbable tabs via javascript (each tab needs to be activated individually):

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

You can activate individual tabs in several ways:

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Markup

You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the bootstrap tab styling.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

Methods

$().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>
<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

Events

Event Description
show This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

About Tooltips

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.

Download file

Example use of Tooltips

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Using bootstrap-tooltip.js

Trigger the tooltip via javascript:

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

Options

Name type default description
animation boolean true apply a css fade transition to the tooltip
placement string|function 'top' how to position the tooltip - top | bottom | left | right
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function '' default title value if `title` tag isn't present
trigger string 'hover' how tooltip is triggered - hover | focus | manual
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Heads up! Options for individual tooltips can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

<a href="https://zykt.timqun.cn/" rel="tooltip" title="first tooltip">hover over me</a>

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element's tooltip.

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

.tooltip('hide')

Hides an element's tooltip.

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

.tooltip('toggle')

Toggles an element's tooltip.

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

About popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

* Requires Tooltip to be included

Download file

Example hover popover

Hover over the button to trigger the popover.


Using bootstrap-popover.js

Enable popovers via javascript:

$('#example').popover(options)

Options

Name type default description
animation boolean true apply a css fade transition to the tooltip
placement string|function 'right' how to position the popover - top | bottom | left | right
selector string false if a selector is provided, tooltip objects will be delegated to the specified targets
trigger string 'hover' how tooltip is triggered - hover | focus | manual
title string | function '' default title value if `title` attribute isn't present
content string | function '' default content value if `data-content` attribute isn't present
delay number | object 0

delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Heads up! Options for individual popovers can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

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

.popover('hide')

Hides an elements popover.

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

.popover('toggle')

Toggles an elements popover.

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

About alerts

The alert plugin is a tiny class for adding close functionality to alerts.

Download

Example alerts

The alerts plugin works on regular alert messages, and block messages.

Holy guacamole! Best check yo self, you're not looking too good.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this


Using bootstrap-alert.js

Enable dismissal of an alert via javascript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="https://zykt.timqun.cn/">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

Event Description
close This event fires immediately when the close instance method is called.
closed This event is fired when the alert has been closed (will wait for css transitions to complete).
$('#my-alert').bind('closed', function () {
  // do something…
})

About

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Download file

Example uses

Use the buttons plugin for states and toggles.

Stateful
Single toggle
Checkbox
Radio

Using bootstrap-button.js

Enable buttons via javascript:

$('.nav-tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

<!-- Add data-toggle="button" to activate toggling on a single button -->
<button class="btn" data-toggle="button">Single Toggle</button>
<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>
<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

Heads up! You can enable auto toggling of a button by using the data-toggle attribute.
<button class="btn" data-toggle="button" >…</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

<button class="btn" data-loading-text="loading stuff..." >...</button>
Heads up! Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

About

Get base styles and flexible support for collapsible components like accordions and navigation.

Download file

* Requires the Transitions plugin to be included.

Example accordion

Using the collapse plugin, we built a simple accordion style widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Using bootstrap-collapse.js

Enable via javascript:

$(".collapse").collapse()

Options

Name type default description
parent selector false If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
toggle boolean true Toggles the collapsible element on invocation

Markup

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>
<div id="demo" class="collapse in"> … </div>
Heads up! To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Methods

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object.

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

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide method has been called.
hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
$('#myCollapsible').on('hidden', function () {
  // do something…
})


About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

Download file

Example

Start typing in the field below to show the typeahead results.


Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

Name type default description
source array [ ] The data source to query against.
items number 8 The max number of items to display in the dropdown.
matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter function exact match,
case sensitive,
case insensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Markup

Add data attributes to register an element with typeahead functionality.

<input type="text" data-provide="typeahead">

Methods

.typeahead(options)

Initializes an input with a typeahead.

2013年以来国家颁布的信息网络安全政策文件网络安全电信诈骗政策罗湖网站建设 信科网络企业网站建设cms武汉建网站公司数字营销与网络营销网络安全日志跟踪诊断湛江有哪些网站建设公司科技营销顾问有限公司怎么样浦东企业网站建设个人信息安全 国标我眼中的营销王珂,一个普通的社畜,末世来临之际意外获得超能力,从此在末世混的风生水起,称霸一方。东汉末年,汉室崩塌。 刘闲意外穿越到这乱世,开始一段传奇人生。 利用遥遥领先这个时代的知识,收名将,戏红颜,混的风生水起。 同时训练出一支傲视当世的铁血精锐。 刘姓为王,大浪淘沙。 待一切尘埃落定之后,一个完全不同的大汉帝国重新出现在了大地的东方。嘘,欢迎来到恐怖游戏,游戏现在开始了.....蓝星, 赤乌系唯一已知文明,在宇宙中被视为资源最为丰富的星球之一。即便大多数文明会因为赤乌系外围的危险放弃掠夺,但依然有少数文明不远万里费尽心机前来侵略。曾经来到过蓝星的神给蓝星留下了基因武器,而这些基因的继承者将在这个世纪,展示出真正的实力......秦凡为救老婆,不得已暴露自身能看到宝物气息的能力,不断捡漏,只要是宝物,在秦凡的眼中都无所遁形,因此引起各方势力的注意,破真伪,看人心,鉴宝捡漏,玩转人生……修炼世界,没有正邪善恶,只有弱肉强食! 楚天,从乡野走出,机缘巧合之下,踏上了一条霸世称尊之路!那一年,横推八百无对手,轩辕重出武圣人但是无敌! 那一年,飞天魔女龙云凤还没出现! 那一年,细脖大头鬼的鼻子还在! 那一年,九尾妖狐陆素珍已经变坏! 那一年,玉面小达摩还没,浪起来! 我叶无心历千劫万险; 纵使魂飞魄散,我灵识依在; 战百世轮回,纵使六道无常,我依然永生; 洒我热血,一往无前,穿越了宇宙洪荒; 修我战枪,枪尖在燃烧……何人云端起舞; 让我望穿天涯,柔肠百折,心中风雪潇潇; 曲终人散,一枪刺破云霄,古今同一笑; 天地任逍遥,后世来者,莫与我比高。你相信这个世界上是没有鬼的,都市传说也总是有迹可循,八尺大人是人撑着木偶,灵异公车只是高仿车伪装,猫脸老太用面具拐卖儿童。不过当儿童用伞顶着的帽子被家长收回,在街上的“野公交”被交警罚下,人贩子被判刑7年,谁又能解释这之后的状况呢?是神?是鬼?还是人?它仅仅是一支平平无奇的笔,但它被一次又一次的换上崭新的墨囊,重焕新的生命,它看似平淡无奇,但它却被成百上千的人用它那拙劣粗糙的笔尖去抒发那令人多愁善感的百变情绪。
2014年信息安全事故 天津企业网站建设 西安企业网站 湛江有哪些网站建设公司 罗湖网站建设 信科网络 廊坊做网站 南京网站建设哪家专业 北京数据营销培训机构 郑州微信网站 聚美营销岗 孩子不爱读书的家庭教育咨询【www.richdady.cn】 亲子关系的案例分享咨询【www.richdady.cn】 婴灵的超度流程【www.richdady.cn】 构建和谐亲子关系的方法【www.richdady.cn】 暗恋的自我提升咨询【www.richdady.cn】 内心恐惧胆怯咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 阴间生活的前世缘分咨询【企鹅383550880】√转ihbwel 事业不顺的职场突破技巧有哪些?威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 前世今生的故事如何改变命运?咨询【www.richdady.cn】√转ihbwel 为什么过世的前世因果威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 公司破产的后续规划威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 性压抑的自我提升咨询【σσЗ8З55О88О√转ihbwel 婴灵的安抚有哪些实用技巧?咨询威:⒊⒏⒊⒌⒌O⒏⒏O√转ihbwel 外灵干扰的心理调适咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 外灵干扰对日常生活的影响咨询【微:qq383550880 】√转ihbwel 外灵干扰的真实案例分析咨询【Q⒊⒏⒊⒌⒌O⒏⒏O】√转ihbwel 家庭关系的矛盾化解【σσЗ8З55О88О√转ihbwel 如何应对冤亲债主的干扰咨询【微:qq383550880 】√转ihbwel 缺心眼的原因分析【σσЗ8З55О88О√转ihbwel 事业不顺的职场建议有哪些?【www.richdady.cn】√转ihbwel 利于优化的网站 国内信息安全法律法规 深圳南山网站建设 信息安全服务资质标准 网络安全的案例题 电子商务营销方案 营销的术语 广告网络营销推广师 网络信息安全建设方案 企业公司网站 北京 郑州微信网站 信息安全(网络犯罪侦查 富阳市网站 中软信息安全奖励等级 新手可以自己建网站吗 信息安全产品测评 摄影网站制作 重庆企业网站建站 海口做网站网络信息安全部门 网络营销的个性化特点 国内信息安全证书,-1 网站上线 排版的网站 许可营销 企业网站建设cms 网站建设公司广告 网站建设vs网络推广 优品上海品牌营销管理 网络营销渠道大全 信息安全企业排名,-1 党政机关网络安全解决方案指引 浙江网络安全 上海网站建站 排版的网站 光效网站 知名信息安全企业 网站上传文件存储方式 自助构建网站 湛江有哪些网站建设公司 全案网络营销 利于优化的网站 武大网络信息安全学院 营销的术语 2017网络安全大会 网络营销战略特点是什么 大石桥网站 中大信息安全专业 重庆品牌营销服务好 江门网站优化 2014 国家信息安全 山东网站建设推广 信息安全作文中文网络安全知名企业 网络营销能力秀收获 淄博网站优化首选公司 信息安全 论文 数据库 淄博网站制作 做网站公 饥饿营销具体意思 厦门模版网站 php网站开发流程 信息安全一级资质 个人怎么制作网站 网络信息安全建设方案 营销的术语 网络安全管理系统品牌 山东省网络安全竞赛 青岛优化营销 郑州微信网站 广告网络营销推广师 网络安全技术与解决方案(修订版) 信息安全漏洞态势报告 网络营销能力秀收获 泉州网站建设 模拟仿真网络安全 佛山网站建设公司 企业公司网站 北京 信息安全课堂 网站架设 网站样板 搜索引擎营销怎么样 郑州微信网站 关系营销优点 小米网络营销定价策略 电商网站规划 苏州有哪些网站制作公司 天津企业网站建设 潍坊营销合作 营销话术 个人怎么制作网站 网站掉排名 政府类网站建设 廊坊做网站 食品公司网络营销方案 武汉公司网站制作 全国专业信息安全服务资质咨询中心,-1 网络营销与管理 医疗网站设计 信息安全企业排名,-1 福永做网站 网络安全集中监控 信息安全工作依据的国际标准 珠海建网站 网络安全对抗赛 苏州有哪些网站制作公司 网络营销书提纲 网络营销推广方案 专业网站制作 重庆企业网站建站 网络营销微观环境的是 搜索营销外包 个人信息安全 国标 sap信息安全搭建 网络安全集中监控 工厂营销推广 营销设备 广州 深圳 外贸网站建设 信息安全本土咨询公司,-1 中国顺德手机网站设计 哈尔滨做网站通信网络安全服务能力评定管理办法 国内信息安全证书,-1 武汉公司网站制作 信息安全本土咨询公司,-1 网络营销评价的途径 长沙网站开发 优衣库电子邮件营销 sem整合营销公司 营销 聚美营销岗 专业网站制作 正规的网站建设 信息安全一级资质 网络安全技术与解决方案(修订版) 信息安全 人员 计划 在网站上显示地图 青岛优化营销 php网站开发流程