Runoob Bootstrap 教程 2025 新版：基础网格布局到组件使用全面指南

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4">内容1div>
    <div class="col-xs-12 col-md-4">内容2div>
    <div class="col-xs-12 col-md-4">内容3div>
  div>
div>

<div class="form-floating">
  <input type="email" class="form-control" id="email" placeholder="name@example.com">
  <label for="email">邮箱地址label>
div>

<form class="needs-validation" novalidate>
  <input type="text" class="form-control is-invalid" required>
  <div class="invalid-feedback">请输入有效的姓名div>
form>

<div class="container-fluid">
  <div class="mod_title row-fluid">
    <div class="span12">
      <div>
        <img src="image/icon_5.jpg" alt="">旅游精选
      div>
      <hr/>
    div>
  div>
  <div class="row-fluid">
    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
      <div class="thumbnail">
        <img src="image/jingxuan_1.jpg" alt="精选1">
        <div class="caption">
          <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)p>
          <span class="price">$699span>
          <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定a>
        div>
      div>
    div>
    
  div>
div>