图片 10

bootstrap环境搭建,导航栏鼠标悬停显示下拉菜单

作者:林子木

在jsp中加入一下代码:

何为Bootstrap? bootstrap有什么作用, 能给我带来什么?
你想开发现在最火的响应式网站, 你想写一个页面在不同的设备上查看,
并且兼容良好吗? 来吧. 看bootstrap的教程吧!
下面就让你领略一些bootstrap的风姿!

   
公司禁网,但是我的工作需要对外网,所以只能利用公司的公用电脑。使用自己的电脑远程操作他(其实可以弄代理的,但没有用这种方法)。所以一些文件都在公用机子上面,然而又由于本人比较懒,不想考来考去,所以采用将要访问的文件夹,设置为共享,然后访问用php访问。

.navbar .nav > li:hover .dropdown-menu {
display: block;
}

工具/原料

  • 下载bootstrap的最新插件. 现在最新的为bootstrap3. 

    方法/步骤


  1. 1

    何为Bootstrap? 简洁的、直观的、超牛的、以移动设备优先的前端开发框架,让web开发更迅速、简单。他是Twitter推出的
    html/css的前端框架, 现在的网页设计越来越多的平面化, 所以,
    也就出现了一些平台来做平面化的样式来供我们来使用.
    因为这款框架是一个开源的框架, 所以现在很多人都在使用该框架.
     下载下来的框架目录结构如图: 

    图片 1

  2. 2

    怎么去使用一个开源的框架或者一段现成的源码?
    首先你确定要保证你所需要的引用你都有, 还有你要保证运行的最小点.
    就是需要3个外部文件, A, B, C, 你就要找到这3个文件,
    如果是你找到的一段代码, 你要确保他能够运行, 如果都没有办法运行,
    放弃吧. 另找下一个. 一般情况下, 一个框架都会给你一个最基本的例子,
    这个例子中使用了框架需要的外部文件和一些简单的说明,
    bootstrap也给出了一个简单的例子.  如图就是最基本的一个例子.
    该例子说了一个很重要的, 也是很好的一个文件引用的方式, 就是css.
    全部放在上面, 然后把js. 都放在页面的最下面,
    这样能够更好的加载页面渲染.
    建议你使用最基本的页面去修改你需要的页面,
    而且要做到按照自己的需求来写代码. 不要复制, 粘贴. 

    图片 2

  3. 3

    Bootstrap中内置了一套响应式的, 移动优先的流式栅格系统,
    随着不同的设备, 不同的平台. 或者窗口大小(viewport),
    根据他们的不同系统会自动的分成12份. 也就是说,
    栅格系统是通过一系列的行和列来组成我们需要的页面,
    然后把你需要的内容放在这些的布局中.在使用栅格系统的时候,
    需要注意的是: 需要在使用.row(行的意思)的外层使用 .container 为的是,
    在赋值时给出合适的排列(aligment)和内补(padding).

    图片 3

  4. 4

    举个例子: 一行 其中包含3个内容 分别占屏幕的25%, 50%, 25%.
    我们要在超小屏幕设备-手机上使用. 那么就要写成12的3, 6, 3.
    具体代码看图片, 这里的效果图, 为了效果加上了一个well的class.
    只是为了演示效果, 能够看清除.

    图片 4

    图片 5

  5. 5

    为了有一个很好的学习东西, 让你看一下表格的创建. 就是这么的简单,
    只需要在table上,
    填写一个class为.table的样式即可生成一个很好很实用的表格. 其实,
    这些都是别人提前建立好的页面显示效果,
    就是不用自己再去写一些简单的css效果. 多练. 多使用它就属于你. 

    图片 6

    图片 7

  6. 6

    在给出一个只有简单的带有导航栏的页面. 该页面, 理解透了,
    这个东西你就算学会了, 剩下的就是用什么查一下文档就拿来用了, 

    图片 8

    图片 9

    图片 10

  7. 7

    该教程告一段落, 还有更多的一大波在后面陆续而来. 有错误,
    请不要吝啬你的批评. 有批评才会有更多的进步. 

    END


(ps:关于网络配置在文章下面)

全部代码如下所示:

    简单测试代码如下:

<%@ page language=”java” contentType=”text/html; charset=utf-8″
pageEncoding=”utf-8″%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“;
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
<title>创新实验学院</title>
<link rel=’stylesheet’ id=’bootstrap-css’ type=’text/css’
rel=”stylesheet” />
<link rel=’stylesheet’ id=’fontawesome-css’ type=’text/css’
media=’all’ />
<link rel=’stylesheet’ id=’flexslider-css’ type=’text/css’
media=’all’ />
<link rel=’stylesheet’ id=’zan-css’ type=’text/css’ rel=”stylesheet”
/>
<link rel=’stylesheet’ id=’custom-css’ type=’text/css’ media=’all’
/>
<script
src=”;
<script type=”text/javascript” charset=”utf-8″ language=”javascript”
src=”./js/bootstrap.min.js”></script>
<style type=”text/css”>
.fontsize
{
font-size:13px;
color:#fff;
}

<meta http-equiv="Content-Type"content="text/html;charset=GBK"> <?php  $filename = "//192.168.1.31/pic_gather/figure/1.png";  $size = filesize($filename);  echo $size;   ?>

.navbar-nav>li>a{
padding-top:5px;
padding-bottom:5px;
padding-left: 10px;
padding-right: 10px;

上述代码实现的是,读取公用电脑下共享的pic_gather/figure路径下的1.png文件的大小。

}

注意了,这里的为了跟好的兼容Linux斜杆只能用“/”否则访问不成功。(ps:有些同学习惯性的写\\192.168.1.31\pic_gather,但是注意了php\代表转意符号,所以正确的应该这样写\\\\192.168.1.31\\pic_gather)。

.navbar .nav > li:hover .dropdown-menu {
display: block;
}

     访问本地资源,代码如下:

.navbar.navbar-inverse{
min-height:40px;
maigin-bottom:10px;
}

发表评论