基于Bootstrap的网页开发

最新推荐文章于 2021-11-01 19:20:30 发布

小鹿_小幸运

最新推荐文章于 2021-11-01 19:20:30 发布

阅读量582

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/cqupt_zl/article/details/51460202

版权

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

摘要由CSDN通过智能技术生成

基本知识总结

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的制作

最低0.47元/天解锁文章

小鹿_小幸运

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于Bootstrap的网页开发

基本知识总结 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架 Bootstrap=简洁强大的前端开发框架让web开发更迅速更方便官网：http://getbootstrap.com/Bootstrap中的JS插件依赖于jQuery，
复制链接

扫一扫

专栏目录