如何用栅格系统实现导航栏（图标栅格系统怎么画）
本文目录一览：
Bootstrap怎么用
主要是查bootstrap的文档，用到什么查什么就好了。 不用可以的去学。具体来说如下：
怎么去使用一个开源的框架或者一段现成的源码?
首先你确定要保证你所需要的引用你都有, 还有你要保证运行的最小点. 就是需要3个外部文件, A, B, C, 你就要找到这3个文件, 如果是你找到的一段代码, 你要确保他能够运行, 如果都没有办法运行, 放弃吧. 另找下一个. 一般情况下, 一个框架都会给你一个最基本的例子, 这个例子中使用了框架需要的外部文件和一些简单的说明, bootstrap也给出了一个简单的例子. 就是最基本的一个例子. 该例子说了一个很重要的, 也是很好的一个文件引用的方式, 就是css. 全部放在上面, 然后把js. 都放在页面的最下面, 这样能够更好的加载页面渲染. 建议你使用最基本的页面去修改你需要的页面, 而且要做到按照自己的需求来写代码. 不要复制, 粘贴.
Bootstrap中内置了一套响应式的, 移动优先的流式栅格系统, 随着不同的设备, 不同的平台. 或者窗口大小(viewport), 根据他们的不同系统会自动的分成12份. 也就是说, 栅格系统是通过一系列的行和列来组成我们需要的页面, 然后把你需要的内容放在这些的布局中.在使用栅格系统的时候, 需要注意的是: 需要在使用.row(行的意思)的外层使用 .container 为的是, 在赋值时给出合适的排列(aligment)和内补(padding).
举个例子: 一行 其中包含3个内容 分别占屏幕的25%, 50%, 25%. 我们要在超小屏幕设备-手机上使用. 那么就要写成12的3, 6, 3. 具体代码看图片, 这里的效果图, 为了效果加上了一个well的class. 只是为了演示效果, 能够看清除.
为了有一个很好的学习东西, 让你看一下表格的创建. 就是这么的简单, 只需要在table上, 填写一个class为.table的样式即可生成一个很好很实用的表格. 其实, 这些都是别人提前建立好的页面显示效果, 就是不用自己再去写一些简单的css效果. 多练. 多使用它就属于你.
在给出一个只有简单的带有导航栏的页面. 该页面, 理解透了, 这个东西你就算学会了, 剩下的就是用什么查一下文档就拿来用了,
如何使用div+css 实现简单的导航栏
html
head/head
body
style type="text/css"
li{list-style-type:none;
}
a{text-decoration:none;
}
.lanmu{
width:980px;
height:120px;
border:1px #993399 solid;
margin:0 auto;
}
.lanmu ul {
width:900px;
height:60px;
margin:0 auto;
border:1px #9900CC solid;
margin-top:30px;}
.lanmu ul li {
width:210px;
height:30px;
float:left;
margin-top:10px;
border:1px solid;
text-align:center;
padding-top:10px}
/style
div class="4b98-ce5e-f050-7688 lanmu"
ul
lia href="#"栏目1/a/li
lia href="#"栏目2/a/li
lia href="#"栏目3/a/li
lia href="#"栏目4/a/li
/ul
/div
/body
/html
结合css就可以了
#换成你想要的链接 ，再把边框线去掉就可以了
请问如何设置bootstrap导航栏中的菜单项居中均匀分布？谢谢
这个应该很简单吧，用栅格就可以了。
整个导航栏的div看做一个整体，里面的菜单项的class加上col-xs-3之类的，比如4个菜单就是col-xs-3，6个就是col-xs-2，肯定就均匀分布并且文字居中了。
如何制作导航栏
1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title导航栏示例/title
/head
body
ul id="navigation"
li/li
lia href="#"首 页/a/li
lia href="#"我的博客/a/li
lia href="#"互动交流/a/li
lia href="#"开心一刻/a/li
lia href="#"悬 赏 令/a/li
li/li
/ul
/body
/html
2、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
3、然后将以下CSS代码加入到head/head之间：
style type="text/css"
body {text-align:center;}
#navigation
{ list-style-type:none; height:auto;}
#navigation li { width:154px; height:60px; text-align:center;
float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书";
background-image:url(images/noactive.jpg);}
a {width:154px; height:72px;}
a:link { text-decoration:none; color:#FFFF00;}
a:visited { text-decoration:none; color:#FFFF00; }
#navigation li:hover { color:#CC0000; text-decoration:underline;
background-image:url(images/active.jpg);}
a:hover{ color:#CC0033;}
#left {background-image:url(images/left.jpg); width:22px;}
/style
4、接下来，对网页效果进行调整，将HTML菜单部分进行调整：
body
ul id="navigation"
li style="background-image:url(images/left.jpg);width:22px;"/li
lia href="#"首 页/a/li
lia href="#"我的博客/a/li
lia href="#"互动交流/a/li
lia href="#"开心一刻/a/li
lia href="#"悬 赏 令/a/li
li style="background-image:url(images/right.jpg);width:22px;"/li
/ul
/body
5、最终炫酷的导航栏就制作完成啦！
