基于Bootstrap的网页开发_bootstrap开发电影网页-优快云博客

本文链接：https://blog.youkuaiyun.com/cqupt_zl/article/details/51460202

本文介绍了Bootstrap的基本知识，它是Twitter的设计师开发的开源前端框架，旨在加速和简化网页开发。内容包括Bootstrap的特性、依赖jQuery、基本模板的使用以及导航条navbar的创建步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本知识总结

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架

Bootstrap=简洁强大的前端开发框架

让web开发更迅速更方便

官网：http://getbootstrap.com/

Bootstrap中的JS插件依赖于jQuery，因此jQuery要在Bootstrap之前引用

基本模板如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">在IE运行最新的渲染模式
    <meta name="viewport" content="width=device-width, initial-scale=1">初始化移动浏览显示
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap --> 载入Bootstrap的CSS样式
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>//IE版本低于IE9
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]--> 
  </head>
  <body>
    <h1>Hello, world!</h1>
加入jQuery和Bootstrap
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

其中自带的CSS样式可以直接拿来使用，Bootstrap包含很多可以复用的组件，包括图标，下拉菜单，导航，警告框，弹出框等更多功能

下载Bootstrap安装包，包括以下文件夹

css 样式表
fonts 字体，字体文件
js  脚本文件

网页制作过程

1、打开Dreamweaver，新建html文件，放在和Bootstrap同一目录下。

2、利用Bootstrap中Getting started中的Basic template，直接复制该模板在html文件中，修改js地址

3、在浏览器中运行，删除不需要的注释

4、导航条navbar的制作

<nav class="navbar navbar-default"> //表示这是一个导航条

 <div class="container-fluid">// 表示导航条是自适应浏览器大小的
 <div class="navbar-header">//导航条头部
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">   //代表当浏览器宽度小于某个值时，会显示这样一段图标，即当缩小浏览器页面的时候，导航条会被折叠
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
 <a class="navbar-brand" href="#">Brand</a> //其中brand表示商标logo
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
       <li><a href="#">Link</a></li>
 </ul> //表示中间的导航项目
（1）【导航条依赖JavaScript，响应式导航条依赖折叠（collapse）插件】
（2）【添加.navbar-fixed-top类可以让导航条固定在顶部，固定的导航条会遮住页面上的其他内容，除非给<body>元素设置了padding】，代码如下：
  <style>
	body{
		padding-top:70px;
	}
	</style>
这样可以让导航条固定在顶部，下拉的时候又不会遮住其他的内容
（3）【可以包含一个.container或.container-fluid容器，从而让导航条居中或自适应显示】
（4）【通过添加.navbar-inverse类可以改变导航条的外观，变成黑底显示】
添加一些对应的导航名称，如下：
 <a class="navbar-brand" href="#">现代浏览器博物馆</a>
    </div>
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
       <li class="active"><a href="#">综述</a></li>
       <li><a href="#">简述</a></li>
       <li><a href="#">特点</a></li>
        <li><a href="#">关于</a></li>
5、下拉菜单Dropdowns
 <li role="separator" class="divider"></li>//设置下拉菜单的分割线
增加下拉菜单内容
  <ul class="dropdown-menu" role="menu">
         <li><a href="#">chrome</a></li>
         <li><a href="#">firefox</a></li>
         <li><a href="#">opera</a></li>
         <li><a href="#">IE</a></li>
        </ul>