Bootstrap实例1

一、响应式单页

1、头部引入

（1）bootstrap基本模板

（2）网站信息：meta-description、meta-keywords、meta-author

（3）加载到主页：apple-touch-icon和icon等

（4）bootstrap.min.css、preloader.css(自定义动画)、index.css、responsive.css(响应式样式)、animate.css

（5）字体图标：simple-line-icons.css

（6）谷歌字体：<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Antic|Raleway:300">

2、底部引入

jquery.min.js、bootstrap.min.js、jquery.ninescroll.min.js（自定义滚动条）、

jquery.jribbble.ugly.js（获取镜头）、drifolio.js（响应式运动组合模板）、wow.min.js

时间： 2024-10-12 13:56:59

Bootstrap实例1的相关文章

Bootstrap 实例 - 模态框（Modal）插件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框(Modal)插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.m

bootstrap实例效果

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

Bootstrap实例(实习第二天)

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

好久没有发过自己的代码的状态了,今天编写代码感觉有力不从心了.不过慢慢的找回了感觉,正好朋友问了我一个问题,就是如何实现模态框.其实就是引用bootstrap插件来实现. Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件).页面中的模态框一般分为注册模态框.变更模态框.删除(信息提示)模态框三种基本模态框.

bootstrap 仿实例

bootstrap实现一个网页,还有待改善(初版) 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Ghost</title> 6 <style> 7 html,body{ 8 color:#505050; 9 line-height:1.75; 10 background

Bootstrap 标签的变体实例样式

Bootstrap 标签样式,代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签的变体</title> <style type="text/css"> .label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:bold;line-height:1;color:#f

Bootstrap两端对齐的导航实例

Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 两端对齐的导航元素</title> <style> .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .nav:before, .nav:after { display: table;content:

Bootstrap中样式Jumbotron，row, table的实例应用

之前只是大概预览了下Bootstrap中涉及到的相关元素,插件等的使用.接下来将通过实例演练加强对Bootstrap的了解.实例来自http://www.runoob.com/有兴趣的可以上去学习跟w3cschool上的差不多. 为了加深理解,决定先在本地用google浏览器测试后,再写到这里.加深印象. 第一:首先是基本的网页标签的定义.采用的是html5的写法如下: <!DOCTYPE html> <html> <head> <title>Bootstr

Bootstrap导航栏实例讲解

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 1.默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 ro