bootsrap写四级联动的

Bootstrap本身并不提供四级联动的实现，但是可以利用Bootstrap和jQuery等工具来实现四级联动。以下是一个简单的示例：

1. 在页面中引入Bootstrap和jQuery的CSS和JS文件：

   <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

2. 在HTML页面中添加四级联动的HTML代码。例如：

   <div class="container">
       <div class="form-group row">
           <label for="province" class="col-sm-2 col-form-label">省份</label>
           <div class="col-sm-10">
               <select id="province" class="form-control">
                   <option value="">请选择</option>
                   <option value="beijing">北京市</option>
                   <option value="shanghai">上海市</option>
               </select>
           </div>
       </div>
       <div class="form-group row">
           <label for="city" class="col-sm-2 col-form-label">城市</label>
           <div class="col-sm-10">
               <select id="city" class="form-control">
                   <option value="">请选择</option>
               </select>
           </div>
       </div>
       <div class="form-group row">
           <label for="district" class="col-sm-2 col-form-label">区县</label>
           <div class="col-sm-10">
               <select id="district" class="form-control">
                   <option value="">请选择</option>
               </select>
           </div>
       </div>
       <div class="form-group row">
           <label for="street" class="col-sm-2 col-form-label">街道</label>
           <div class="col-sm-10">
               <select id="street" class="form-control">
                   <option value="">请选择</option>
               </select>
           </div>
       </div>
   </div>

3. 在JS文件中实现四级联动的逻辑。例如：

   $(function () {
       // 省份数据
       var provinceData = [
           {
               name: '北京市',
               cities: [
                   {name: '北京市', districts: [{name: '东城区'}, {name: '西城区'}, {name: '朝阳区'}]}
               ]
           },
           {
               name: '上海市',
               cities: [
                   {name: '上海市', districts: [{name: '黄浦区'}, {name: '徐汇区'}, {name: '长宁区'}]}
               ]
           },
       ];

       // 初始化省份下拉列表
       var $province = $('#province');
       $.each(provinceData, function (i, province) {
           $province.append($('<option>').val(province.name).text(province.name));
       });

       // 省份下拉列表改变时更新城市下拉列表
       var $city = $('#city');
       $province.on('change', function () {
           var provinceName = $(this).val();
           var province = $.grep(provinceData, function (province) {
               return province.name === provinceName;
           })[0];
           $city.empty().append($('<option>').val('').text('请选择'));
           $.each(province.cities, function (i, city) {
               $city.append($('<option>').val(city.name).text(city.name));
           });
       });

       // 城市下拉列表改变时更新区县下拉列表
       var $district = $('#district');
       $city.on('change', function () {
           var provinceName = $province.val();
           var province = $.grep(provinceData, function (province) {
               return province.name === provinceName;
           })[0];
           var cityName = $(this).val();
           var city = $.grep(province.cities, function (city) {
               return city.name === cityName;
           })[0];
           $district.empty().append($('<option>').val('').text('请选择'));
           $.each(city.districts, function (i, district) {
               $district.append($('<option>').val(district.name).text(district.name));
           });
       });

       // 区县下拉列表改变时更新街道下拉列表
       var $street = $('#street');
       $district.on('change', function () {
           $street.empty().append($('<option>').val('').text('请选择'));
       });
   });

通过以上步骤，就可以实现一个简单的Bootstrap四级联动了。在实际应用中，可以根据需求进行样式和数据的调整。