React和Bootstrap中的响应式导航栏

mitkmikd 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(1)|浏览(134)

我目前正在使用React应用程序和Bootstrap。我的网站的索引文件只包含<div id="app"></div>和一些脚本。
我想用data-toggle在app.js中实现一个响应式导航栏，但我不确定如何实现。

var Navbar = React.createClass({
displayName: 'Navbar',
render: function() {
return el.nav(
    {className: 'navbar navbar-inverse navbar-fixed-top'},
    el.div(
    {className: 'container'},
    el.div(
        {className: 'navbar-header'},
        el.a({className: 'navbar-brand', href:'/'}, config.app_name)

个字符
我该如何让它响应？

twitter-bootstrap

来源：https://stackoverflow.com/questions/36156684/responsive-navbar-in-react-and-bootstrap

1条答案

按热度按时间

yhived7q1#

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">   </script>
</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
    <a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>

<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>

</body>
</html>

字符串
使用Bootstrap的jQuery函数;你不必自己写。

赞(0）回复(0）举报 2023-08-01

我来回答

React和Bootstrap中的响应式导航栏

1条答案

相关问题

热门标签

最新问答