基于Bootstrap的网页开发

最新推荐文章于 2023-07-25 15:14:57 发布

CHH5431

最新推荐文章于 2023-07-25 15:14:57 发布

阅读量5.3k

点赞数 10

分类专栏：纯css 文章标签： Bootstrap

本文链接：https://blog.csdn.net/qq_41115965/article/details/83061733

版权

纯css 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

基于Bootstrap的网页开发

Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。Bootstrap是移动设备优先的，它针对移动设备的样式融合了框架的每个角落，使得只需要通过简单的代码，便可以实现漂亮的响应式布局。备注：使用的初始化css文件是normalize.css；

1、基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

温馨提示：

（1）上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！

（2）html5shiv.js 和 respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能，用条件注释的方式引用。

（3）Bootstrap中的js插件依赖于jQuery，因此jQuery要在Bootstrap之前引用。

2、导航条

（1）导航条依赖JavaScript，响应式导航条依赖折叠collapse插件
（2）添加.navbar-fixed-top类可以让导航条固定在顶部，固定的导航条会遮住页面上的其他内容，除非给body元素设置padding。导航条的默认高度是50px，比如设置body{padding-top:70px;}可以包含一个.container或.container-fluid容器，从而让导航条居中或者自适应。

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <!--导航条logo及小屏幕图标-->
        <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="#">浏览器库</a>
        </div>
        <!--导航条logo及小屏幕图标-->

        <!--导航条中导航栏目列表-->
        <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 class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">谷歌</a></li>
                        <li><a href="#">火狐</a></li>
                        <li><a href="#">欧朋</a></li>
                        <li><a href="#">苹果</a></li>
                        <li class="divider"></li>
                        <li><a href="#">IE</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">关于</a>
                </li>
            </ul>
        </div>
        <!--导航条中导航栏目列表-->

    </div>
</nav>

注意：可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选样式。

3、滚动广告Carousel

Carousel是一个用于轮播内容的组件，也就是我们经常用到的滚动广告，或者滚动图片。一个Carousel基本结构：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

4、三栏布局

行（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中。
使用 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的，在桌面（>970px）屏幕设备上变为水平排列。代码简写：div.container.summary>div.row#summary-container>div.col-md-4*3

<div class="container summary">
    <div class="row" id="summary-container">
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
    </div>
</div>

5、标签页Tabs

标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间。

标签

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

标签页内容

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

注意：无需写任何JavaScript代码，只需要简单的为页面元素指定data-toggle="tab"，为ul添加nav和nav-tabs class。另外，注意标签页和标签页内容id属性的对应关系。

5、弹出框（模态框）Modal

弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单信息，表单内容。结构包括：modal-header、modal-body、modal-footer三部分。

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

注意：点击的标签部分需要设置和modal弹出框相同的id属性，以便于在多个弹出框中，弹出对应的弹出框。

6、菜单定位及总结