标签: twitter-bootstrap

我想知道是否可以使引导进度条变成圆形而不是直线。如果可能的话我想知道唐怎么样。如果没有，那么我认为 bootstrap 人员应该将此选项集成到 bootstrap 4 中

我如何在 bootstrap 中实现这一目标？我有一个 3 列，并且希望在移动设备或桌面上保留 3 列。

<div class="container">
    <div>
        <h1>Example - 3 column div</h1>
        <div class="row">
          <div class="col-xs-6 col-sm-4">First</div>
          <div class="col-xs-6 col-sm-4">Second</div>
          <div class="col-xs-6 col-sm-4">Third</div>
        </div>
</div>

在桌面上

First | Second | Third

在手机上就变成这样

First | Second  
| Third

我想在桌面和移动设备上实现这一目标

First | Second | Third

这是小提琴 - > https://jsfiddle.net/y28ugzp6/

如何在保持样式的同时禁用 Bootstrap 4 中的响应行为？我希望用户在手机上访问网站时能够拥有与桌面版相同的网站，并通过手指手势进行放大和缩小。我该怎么做？

我正在尝试锁定窗口右下角的引导模式。

我所拥有的是：

超文本标记语言

<div class="modal custom fade" id="trackModal" tabindex="-1" role="dialog" aria-labelledby="trackModalLabel" 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">&times;</span></button>
                <h3 class="getlaid" id="trackModalLabel">Hello</h4>

            </div>

            <div class="modal-body">
            <p>TEST</p>
            </div>

            <div class="modal-footer">
                <div class="btnmodal" data-dismiss="modal">Close &#10006;</div>

            </div>
        </div>
    </div>
</div>

CSS

.modal.custom .modal-dialog {
    width:120%;
    position:fixed;
        bottom:0px;
        right:0px;
        margin:0px;

}

使用此代码块，我无法在窗口右下角显示模式，并且它继续显示在页面中间。这里有什么问题吗？

我的日期时间选择器工作正常，但浏览时间和日期的箭头未正确显示。

苹果浏览器

铬合金

我尝试使用以下代码在 Javascript 中设置默认选项：

 icons: {
        time: 'glyphicon glyphicon-time',
        date: 'glyphicon glyphicon-calendar',
        up: 'glyphicon glyphicon-chevron-up',
        down: 'glyphicon glyphicon-chevron-down',
        previous: 'glyphicon glyphicon-chevron-left',
        next: 'glyphicon glyphicon-chevron-right',
        today: 'glyphicon glyphicon-screenshot',
        clear: 'glyphicon glyphicon-trash',
        close: 'glyphicon glyphicon-remove'
    }

但似乎没有任何效果。

我正在使用附加 voor Bootstrap 以便能够使用日期选择器：https://bootstrap-datepicker.readthedocs.io/en/latest

当附加到输入字段时，它可以正常工作。

我现在试图使其内联可见，我尝试使用此工具找出代码：https://uxsolutions.github.io/bootstrap-datepicker/ ?markup=embedded&format=dd-mm-yyy&weekStart=&startDate= &endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&语言=nl&orientation=auto&multidate=&multidateSeparator=&calendarWeeks=on&todayHighlight=on&keyboardNavigation=on&forceParse=on#sandbox

由于某种原因，什么也不会出现。有什么建议么？

    <div id="calendar"></div>

<!-- Datepicker -->
    <script src="includes/js/bootstrap-datepicker.js"></script>
    <script src="includes/js/bootstrap-datepicker.nl.min.js"></script>
    <script type="text/javascript">
    $('#sandbox-container calendar').datepicker({
    language: "nl",
    calendarWeeks: true,
    todayHighlight: true
    });
    </script>

我想从使用标准 HTML 按钮与数据表按钮切换，如何将 bootstrap data-toogle&data-target属性添加到数据表按钮中？

任何帮助深表感谢

引导按钮

<button
    data-toggle="modal" data-target="#create_new_workorder"
    type="button" class="btn btn-sm btn-warning btn-outline"><span
    class="hidden-md hidden-sm hidden-xs">Create Workorder</span> <i
    class="fa fa-fw fa-plus"></i>
</button>

数据表按钮：

buttons: [
    {
        text: 'New',
        action: function () {
            create_workorder_window();
        },
        className: 'btn btn-warning btn-outline'
    },
    { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'}
],

javascript:

function create_workorder_window() {
    my_window = window.open("createworkorder", "create_workorder", ",toolbar=0,status=0,width=350,height=900");

模态：

<!--Create Workorder Form Modal -->
<div class="modal fade " id="create_new_workorder" tabindex="-1" role="dialog"
     aria-labelledby="TitleLabel">
    <div class="modal-dialog" role="document"> …

当我将 Chrome 中的CSSbackground-color属性实现到正文中时，它不起作用。然而，当我在CodePen中测试它时，正文的背景颜色会相应改变。以下是 CodePen 代码的链接： https: //codepen.io/Ag_Yog/pen/rzezYw。

这是在记事本中不起作用的代码：

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
    <title></title>
</head>
<body>
    <div class="container quoteCard">
            <p id="quote" class= "text">Txt</p>
            <button class = "btn getQuote ">Get new Quote</button>
    </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src = "main.js"></script>
</body>

CSS：

 html, body {
  width: 100%;
  height: 100%;
  background-color: #00e676 ;

}

.quoteCard{
    background-color: #fff176;
}

.text{
    position: relative;
    vertical-align:middle;
    font-family: 'Acme', sans-serif;
    font-size: 30px;
    padding: 20px 20px …

所以我想在表行中添加一个类（标题除外），但我不知道该怎么做。有人知道我该怎么做吗？

这是我的桌子：

<table id="table" class="hidden table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th data-field="variant">Variant</th>
            <th data-field="description">Description</th>
        </tr>
    </thead>
</table>

目前这是我添加数据并想要将类添加到行中的位置

$('#table').bootstrapTable({
    data: returnValue
});

$('[data-toggle=popover]').popover();
$('#button').click(function(){
  alert('Clicked');
});

<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://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-html='true' title="Popover title" data-content="<button id='button' type='button'>buton</button>">Click to toggle popover</button>

在这个弹出窗口中，当我单击#button它的内部时，它会执行alert();任何操作，但是如果我#button从弹出窗口中取出并单击它，它会正常工作。