我知道这一定非常简单但是我只想使用bootstrap 4类在窗口右侧设置一个按钮.它必须与文本位于同一行.
<html>
<head>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>
代码就在这里
在Bootstrap 4中,如何更改导航栏的背景颜色？twbscolor的代码不起作用.我想使背景颜色为不同颜色,字体颜色为白色.
<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Jordan Baron</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
Bootstrap v4删除了.btn-group-justified该类,请参阅https://github.com/twbs/bootstrap/issues/17631
如何证明按钮的合理性:
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<a class="btn btn-primary" href="#" role="button">Left</a>
<a class="btn btn-primary" href="#" role="button">Middle</a>
<a class="btn btn-primary" href="#" role="button">Right</a>
</div>
这似乎是一个蹩脚的问题,但我无法弄清楚.如何导入与Bootstrap 4 beta相关的popper.js？
我使用凉亭,我已经安装了Bootstrap 4 beta.现在在bower_components文件夹中有一个popper.js目录,其中包含一些子文件夹.问题是没有dist文件夹和popper.min.js文件.
Bootstrap 4指向CDN的指南:https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
但是如何在没有CDN的情况下导入popper.js？哪里可以找到popper.min.js文件？
编辑:即使我zip从popper.js网站下载它包含完全相同的文件bower.
我最近使用webpack和bootstrap v4.0.0-alpha.6进行了配置工作正常,直到今天我尝试更改为v4测试版,现在我似乎无法使其正常工作:(我有这个配置:
webpack.config.js
entry: {
app: "./src/app.js"
},
output: {
path: path.resolve(__dirname, 'public'),
filename: 'js/[name].js',
hotUpdateChunkFilename: 'hot/hot-update.js',
hotUpdateMainFilename: 'hot/hot-update.json'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node-modules/, loader: 'babel-loader' },
{ test: /\.html$/, loader: 'raw-loader', exclude: /node_modules/ },
{ test: /\.(css|scss|sass)$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'postcss-loader', 'sass-loader']
}),
exclude: /node_modules/
}
]
},
plugins: [
new webpack.ProvidePlugin({ // inject ES5 modules as global vars
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new ExtractTextPlugin('/css/[name].css'), …不确定为什么粘性页脚不能在Bootstrap 4中工作.我有一个TYPO3网站,我是初学者.
粘性页脚没有粘在页面底部.
这是已呈现的页面源的副本.
我基本上从bootstraps docs文件夹中复制了html文件,然后将其修改并复制到我的TYPO3模板中.
如果我在页面上填充内容,则页脚不会粘住 - 我必须向下滚动页面才能看到它.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css"
href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
media="all">
<script
src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the
viewport in desktop browsers with this custom HTML and CSS.</p>
<p>
Use <a href="../sticky-footer-navbar">the sticky …使用新的Twitter Bootstrap版本:Bootstrap 4 alpha,我无法使Modal在远程模式下工作.它与Bootstrap 3完美配合.使用bootstrap 4我得到了弹出窗口,但是模型体没有被加载.没有远程调用myRemoteURL.do来加载模型体.
码:
<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>
<!-- Model -->
<div class="modal fade" id="myModel" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title" id="myModalLabel">Model Title</h3>
</div>
<div class="modal-body">
<p>
<img alt="loading" src="resources/img/ajax-loader.gif">
</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">Submit</button>
</div>
</div>
</div>
</div>
我创建了一个带有Bootstrap 4 alpha 6的导航栏,左侧有一个大品牌/图标,还有2个navbar-nav,带有图标右侧的链接.一个导航有链接,另一个导航有图标.除了一件事,它正如我想要的那样工作.
我希望2个导航栏出现在图标右侧的2个单独的行中.像这样:
------------------------------------------------------
link link link link
brand-icon -------------------------------------------
icon icon icon
------------------------------------------------------
移动版仍将像现在一样垂直显示链接.我用flexbox尝试了几种不同的东西,但无法让它工作.
这是我的代码:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<div class="container">
<button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
<div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item"> …css flexbox twitter-bootstrap twitter-bootstrap-4 bootstrap-4
在Bootstrap 4中,font-size默认使用em或rem用于字体.
如何增加font-size所有视口大小？因为每个元素看起来很小.
我是新手npm和有角度的项目,我正在使用bootstrap@4.1.1我的package.json.当我进行npm安装时,我收到以下错误 -
bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
这是否意味着我需要添加jquery@1.9.1 - 3到我的package.json下peerDependencies节,除了在本地安装no-save选项？
另外,我们是否还需要在构建服务器上安装此缺少的对等依赖项？或者可以忽略它？
bootstrap-4 ×10
css ×6
html ×2
javascript ×2
flexbox ×1
jquery ×1
npm ×1
npm-install ×1
popper.js ×1
typo3 ×1
webpack ×1