做了3年的C++编程,因为突然的机会要做J2EE。并且是web 前端、后端、数据库全盘搞的那种!无奈呀,学了3个多月的html、js、jquery、servlet、jsp、spring mvc、jpql。现在处于一个社么阶段呢?就是:1. 别人搭建的框架,往里面加代码没问题。 2.自己搭框架,速度慢点也可以,当然是简单的那种。3,前端很坑!
最后我决定再花3个月时间在这些方面巩固一下。我决定特别难入手的就是web前端。 如果别人写好的,让我来改,还好说一些(简单的)。自己写起来,很坑很坑。我偶然见发现了bootstrap。我觉得这个不错,将来是一个方向。最重要的是,我可以用它快速的写出代码。所以我就闷着头,先学学再说。 要把自己学的过程中的一些经验和教训给写出来,留给自己看,也给别人共享一下。 当然初学者,如有错误,欢迎指正!
二话不说上代码!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my first bootstrap</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" media="screen" />
<link rel="shortcut icon" href="icon.jpg" />
</head>
<body>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">product</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<h1>hello test1</h1>
<h2>hello test2</h1>
<h3>hello test3</h1>
</div>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap/thirdpart/jquery.js"></script>
</body>
</html>
代码详述如下:
1. <meta name="viewport" content="width=device-width,initial-scale=1.0" /> html5标签屏幕自适应
2. <link rel="shortcut icon" href="icon.jpg" /> 网页上面的icon,我的chrome没出来,firefox出来了,还在进一步了解中
3. <div class="navbar navbar-inverse"> navbar是bootstrap 定义的导航条, navbar-inverse 是反色,导航条初始是灰白色的。使用navbar-inverse 之后就会变成黑色了
4. <div class="container"> 将下面的 div放入一个容器当中,这个容器就相当于html页面中,自己为了将内容显示到屏幕的固定区域,比如设置成900的宽度。 这个class就是这个作用
5. <ul class="nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">product</a></li>
</ul>
这个是bootstrap 导航条上的标题显示基本方式, 必须写成连接才会正常显示,我想bootstrap的css当中应噶有关于ul.nav li a的定义。
由于也处于学习阶段,就理解一点分享一点,如有错误请大家指正!
效果如下图: