bootstrap学习之路1

最新推荐文章于 2024-04-23 21:43:06 发布

原创最新推荐文章于 2024-04-23 21:43:06 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #入门 #学习 #html5

bootstrap 专栏收录该内容

11 篇文章

订阅专栏

本文分享了一位从C++转向J2EE的开发者如何通过三个月的学习掌握Bootstrap，并实现快速前端开发的过程。文章包括实战代码及详细解析。

做了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的定义。

由于也处于学习阶段，就理解一点分享一点，如有错误请大家指正！

效果如下图：