bootstrap.css 和 layui.css 同时引入导致样式混乱，如何优先使用bootstrap.css的样式

要优先使用`bootstrap.css`的样式，可以尝试以下方法：

1. 调整样式文件的引入顺序：在HTML文件中，确保`bootstrap.css`的引入在`layui.css`之前。这样，浏览器会首先加载`bootstrap.css`的样式，然后再加载`layui.css`的样式。由于后面加载的样式会覆盖前面加载的样式，所以`bootstrap.css`的样式会优先生效。

<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="path/to/layui.css">

2. 使用!important修饰符：如果调整样式文件的引入顺序无效，可以在需要优先使用`bootstrap.css`样式的地方，为对应的样式类添加`!important`修饰符。这样可以强制覆盖其他样式，并确保`bootstrap.css`的样式优先生效。例如：

<div class="my-class">Sample Text</div>

.my-class {
  color: red !important; /* 使用!important修饰符 */
}

请注意，使用`!important`修饰符可能会导致样式的全局性变化，因此请谨慎使用，并确保只在必要的地方添加。

无论采用哪种方法，都建议在修改样式时仔细检查文档和样式表，了解每个框架的样式类和属性，以确保所做的更改不会破坏页面的其他部分或导致其他问题。