我如何在我的网站上应用bootstrap？ ASP.NET，C＃

Question

我设计了一个网站，在桌面电脑/笔记本电脑屏幕上设计工作正常，但它在移动和平板电脑设备上运行不佳。我正在使用“响应式网页设计测试人员”google chorme添加一个来检查这个。它的中间内容变化。 我如何在我的网站上应用bootstrap ??我只是包含bootstrap链接或更改整个设计。我是初学者，我不知道如何应用“bootstrap”。我已经使用“Manage NuGet”安装了“Bootstrap”包“。这是我的解决方案探索快照

这是我的桌面视图的一些内容 这里是移动视图 这是我的aspx代码，代码的特定部分，其中内容不能正常工作：

<section id="about">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="title-area">
                        <h2 class="title">About us</h2>
                        <span class="line"></span>
                        <p>
                            UpSkill blends scientifically approved principles of learning and the best quality content to boost personal learning!
                            We aim to be the hub of quality education for personal growth and individual learning for a successful career!
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end about -->
    <!--Courses Start Here-->

    <section id="our-team">

            <div class="container">
                <div class="row">

                    <div class="col-md-12">
                        <div class="title-area">
                            <h2 class="title">Our Courses</h2>
                            <span class="line"></span>
                            <p>Search Courses as you want to study and Learn from our best Team!</p>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="our-team-content">
                            <div class="container">
                                <div class="row">
                                    <!-- Start single Course -->
                                    <div class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="single-team-member">
                                            <div class="team-member-img">
                                                <img src="assets\images\courses\linux.png" alt="linux img">
                                            </div>
                                            <div class="team-member-name">

                                                <p style="position: relative; left: 7px; font-size: 25px;">Introduction to Linux </p>

                                                <span style="position:relative; left:7px">CS250</span>

                                            </div>
                                            <p></p>
                                        </div>
                                        <!--    <div class="team-member-link">
                                  <a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
                                </div> -->
                                    </div>
                                    <!-- Start single Course  -->
                                    <!-- Start single Course  -->
                                    <div class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="single-team-member">
                                            <div class="team-member-img">
                                                <img src="assets\images\courses\asp-net.png" alt="asp.net img">
                                            </div>
                                            <div class="team-member-name">
                                                <p style="position: relative; left: 7px; font-size: 25px;">Introduction to Asp.net</p>
                                                <span style="position:relative; left:7px">CS250</span>
                                            </div>
                                            <p></p>
                                        </div>
                                        <!--<div class="team-member-link">
                                  <a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
                                </div>-->
                                    </div>
                                    <!-- Start single Course  -->
                                    <!-- Start single Course  -->
                                    <div class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="single-team-member">
                                            <div class="team-member-img">
                                                <img src="assets\images\courses\php.png" alt="php img">
                                            </div>
                                            <div class="team-member-name">
                                                <p style="position: relative; left: 7px; font-size: 25px;">Introduction to PHP</p>
                                                <span style="position:relative; left:7px">CS250</span>
                                            </div>
                                            <p></p>
                                        </div>
                                        <!--<div class="team-member-link">
                                  <a class="read-btn wow fadeInUp" href="#"><font color="black"></font></a>
                                </div>  -->
                                    </div>
                                    <!-- Start single Course  -->
                                    <!-- Start single Course  -->
                                    <div class="col-md-3 col-sm-6 col-xs-12">
                                        <div class="single-team-member">
                                            <div class="team-member-img">
                                                <img src="assets\images\courses\html.png" alt="html img">
                                            </div>
                                            <div class="team-member-name">
                                                <p style="position: relative; left: 7px; font-size: 25px;">Introduction to HTML5</p>
                                                <span style="position:relative; left:7px">CS250</span>
                                            </div>

                                            <p></p>
                                        </div>

                                    </div>
                                    <!-- Start single Course member -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br />

                <button style="position:relative; left:1170px; color:black; font-size:18px; width:130px; height:60px;">See More</button>

            </div>
        </div>

    </section>

“关于”和“我们的课程”在移动设备上也运行良好，但是打击代码存在问题。 这是我的bootstrap.css代码：

      .container {
      padding-right: .9375rem;
     padding-left: .9375rem;
     margin-right: auto;
    margin-left: auto;
     }

     .container::after {
       display: table;
       clear: both;
       content: "";
     }

  @media (min-width: 544px) {
    .container {
     max-width: 576px;
   }
   }

   @media (min-width: 768px) {
   .container {
    max-width: 720px;
  }
  }

   @media (min-width: 992px) {
    .container {
   max-width: 940px;
  }
 }

  @media (min-width: 1200px) {
 .container {
   max-width: 1140px;
 }
 }

 .container-fluid {
  padding-right: .9375rem;
  padding-left: .9375rem;
 margin-right: auto;
 margin-left: auto;
}

.container-fluid::after {
  display: table;
  clear: both;
  content: "";
}

 .row {
  margin-right: -.9375rem;
  margin-left: -.9375rem;
}

  .row::after {
  display: table;
   clear: both;
   content: "";
 }

   .col-xs-1, .col-xs-2, .col-xs-3,
  .col-xs-4, .col-xs-5, .col-xs-6, 
 .col-xs-7, .col-xs-8, .col-xs-9,
  .col-xs-10, .col-xs-11, .col-xs-12, 
 .col-sm-1, .col-sm-2, .col-sm-3,
  .col-sm-4, .col-sm-5, .col-sm-6, 
 .col-sm-7, .col-sm-8, .col-sm-9, 
  .col-sm-10, .col-sm-11, .col-sm-12,
 .col-md-1, .col-md-2, .col-md-3, 
 .col-md-4, .col-md-5, .col-md-6,
 .col-md-7, .col-md-8, .col-md-9,   
 .col-md-10, .col-md-11,
.col-md-12, .col-lg-1, .col-lg-2,
.col-lg-3,   .col-lg-4, .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9,  
 .col-lg-10, .col-lg-11, .col-lg-12,
 .col-xl-1, .col-xl-2, .col-xl-3,  
  .col-xl-4, .col-xl-5, .col-xl-6,
  .col-xl-7,.col-xl-8, .col-xl-9,   
  .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    min-height: 1px;
    padding-right: .9375rem;
   padding-left: .9375rem;
   }

 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, 
.col-xs-5, .col-xs-6,    .col-xs-7, 
 .col-xs-8, .col-xs-9,
.col-xs-10, .col-xs-11, .col-xs-12 {
 float: left;
 }

.col-xs-1 {
 width: 8.333333%;
  }
 .col-xs-2 {
 width: 16.666667%;
  }

  .col-xs-3 {
  width: 25%;
  }

 .col-xs-4 {
  width: 33.333333%;
 }

  .col-xs-5 {
 width: 41.666667%;
 }

 .col-xs-6 {
 width: 50%;
}

.col-xs-7 {
 width: 58.333333%;
}

  .col-xs-8 {
    width: 66.666667%;
  }

  .col-xs-9 {
   width: 75%;
  }

  .col-xs-10 {
   width: 83.333333%;
  }

   .col-xs-11 {
   width: 91.666667%;
  }

   .col-xs-12 {
   width: 100%;

  }

如何在我的网站上应用“Bootstrap”？哪种设备适用于所有设备。 谢谢..

Answer 1

引导程序不仅仅是删除文件（所以你应该花一点时间学习基础知识），但是看一下这部分来获取你的基本html：

http://getbootstrap.com/getting-started/#template

这将链接bootstrap javascript和css。 一定要添加任何自己的javascript / css。

然后查看概述和网格系统： http ： //getbootstrap.com/css/

这就是你如何使用html选择你的网站结构作为JustLearning提到的。 您可能只是将图像分成1行，跨越4列。

Answer 2

该页面看起来像我自己，但这取决于你是否意味着你希望你的图像变成链接或缩小成图标，因为这将是一个新的问题。 响应式设计是关于适合设备的页面，尽管图像已经调整大小，但您的页面似乎也适合。 另外我没有看到任何MVC或C＃或ASP.net所以这很简单，因为看起来你只有一个基本的HTML5网站。 这是一个很好的链接，可以帮助您入门： http ： //docs.asp.net/en/latest/client-side/bootstrap.html