Bootstrap新闻页面设计

最新推荐文章于 2024-02-18 17:39:39 发布

zxkzhang

最新推荐文章于 2024-02-18 17:39:39 发布

阅读量2.9k

点赞数 3

分类专栏：实例代码

本文链接：https://blog.csdn.net/zxkzhang/article/details/100545852

版权

本文将指导您如何利用Bootstrap框架构建一个新闻页面，从设置头部和引入必要文件开始，逐步讲解HTML页面结构和自定义样式的应用。

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

1.必须写的头, 以及引入的文件

	<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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    
	 <link rel="stylesheet" href="css/bootstrap.min.css">
     <script src="js/jquery-3.4.0.js"></script>
    <script src="js/bootstrap.min.js"></script>

2.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻页面</title>

    <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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/newStyle.css">


</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">中公头条</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">