如何在浏览器上查看应用于 html 页面（引导程序）的样式？答案

【问题标题】：How can I see the style I apply to an html page (bootstrap) on a browser?如何在浏览器上查看应用于 html 页面（引导程序）的样式？
【发布时间】：2018-07-28 00:01:01
【问题描述】：

我知道这已经在 stackoverflow 上以某种方式得到了回答，但我还没有找到解决方案。我正在使用引导程序来设置我的 html 样式，问题是当我尝试在浏览器（safari 和 chrome）或 Visual Studio Code 的预览器中可视化它时，它只显示原始 html。我整天都在尝试不同的东西，但我找不到答案。当我将它部署到本地服务器时，它可以工作。

文件的组织方式：

原始 HTML：

adduser.html 的代码：

<div class="adduser">
<h2>Add user</h2>
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-lg-3 control-label" for="inputUsername">Username</label>
        <div class="controls">

            <div class="input-group col-lg-5">
                <span class="input-group-addon">@</span> <input type="text"
                    class="inputUsername form-control"
                    placeholder="Username (e-mail address)">
            </div>

        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label" for="inputName">Name</label>
        <div class="controls col-lg-5">
            <input type="text" class="inputName form-control" placeholder="Name">
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label" for="inputName">Type</label>
        <div class="controls col-lg-5">
            <select class="selectType form-control">
                <option value="ADMIN">Administrator</option>
                <option value="USER">User</option>
                <option value="READ_ONLY">Read only</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="controls buttonBar">
            <button type="button" class="btn btn-primary addButton">Add</button>
        </div>
    </div>
</form>

<script>
function AddUser(main) {
    var othis = this;

    this.close = function(){
    };

    this.show = function(){
    };

    this.addUser = function() {
        Global.bimServerApi.call("ServiceInterface", "addUser", {
            username: $(".adduser .inputUsername").val(),
            name: $(".adduser .inputName").val(),
            type: $(".adduser .selectType").val(),
            selfRegistration: false,
            resetUrl: Global.baseDir + "?page=ResetPassword"
        }, function(data){
            main.showUser(data);
        });
    };

    $(".adduser .addButton").click(othis.addUser);
    $(".adduser .inputName").keypress(function(event){
        if (event.which == 13) {
            event.preventDefault();
            othis.addUser();
        }
    });
    $(".adduser .inputUsername").focus();
}
</script>

【问题讨论】：

请发布您的代码。
@ReSedano 完成，抱歉
我认为这是引导程序文件包含在页面中的问题，我们必须查看您的所有页面才能理解这一点。请您也复制标签head好吗？

标签： javascript html css bootstrap-4

【解决方案1】：

你的问题很模糊。但我觉得你在 HTML 文件中包含 bootstrap 作为脚本标记，但你没有将 bootstrap 类添加到元素中。

如需更多信息，请阅读： https://getbootstrap.com/docs/4.0/getting-started/introduction/

【讨论】：