如何在不使用rel =" stylesheet"的情况下添加boostrap下拉列表

时间:2017-12-02 19:43:31

标签: javascript html css twitter-bootstrap

您好我正在创建一个网站,我想添加一些额外的功能。我找到了这个template,我想添加一些组合框(性别为一整行,生日为三排)。

我找到了这个组合框的引导代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
  <form>
    <div class="form-group">
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
      </select>
    </div>
  </form>
</div>
</body>
</html>

正如您所看到的,此代码正在使用rel="stylesheet",是否可以更改它?因为codepen.io中的模板使用另一个style.css文件。

现在,如果可以更改它,你能否提出一些与codepen.io模板风格相匹配的组合框?

2 个答案:

答案 0 :(得分:1)

根据W3Schools

必需的rel属性指定当前文档与链接文档/资源之间的关系。

它不会对您的代码产生负面影响,您只需要使用CSS。

另外,您应该阅读The Bootstrap's docs

答案 1 :(得分:1)

摆脱引导样式表并不是一个好主意,因为许多带有引导类的标签看起来不合适。您可以将其他样式表添加到您的网页,只要您将它们放在引导程序样式表之后。这将使其他样式表显示它们应该显示的所有内容,但引导样式表将设置其他样式表未指定的所有样式。