我如何在我的网站上应用引导程序？ ASP.NET, C#答案

【问题标题】：How can i apply bootstrap in my website? ASP.NET, C#我如何在我的网站上应用引导程序？ ASP.NET, C#
【发布时间】：2016-04-13 16:22:12
【问题描述】：

我设计了一个网站，该网站在台式电脑/笔记本电脑屏幕上的设计工作正常，但在移动设备和平板电脑设备上效果不佳。我正在使用“响应式网页设计测试仪”google chorme 添加一个来检查这一点。它的中间内容发生了变化。我如何在我的网站上应用引导程序？我只包含引导程序的链接或更改整个设计。我是初学者，我不知道如何应用“引导程序”。我已经使用“管理 NuGet”安装了“引导程序”包”。这是我的解决方案探索快照

这是我的桌面查看的一些内容此处手机查看这是我的 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”？这适用于每台设备。谢谢..

【问题讨论】：

首先浏览引导站点，然后检查您的 html 页面中必须引用哪些 css 和 .js 文件。然后开始使用引导类构建您的 html。许多引导程序来自使用引导程序类。例如。 <div class='col-md-3'></div>
我的资产文件夹中也包含 bootstrap.css 文件，我还使用了类和 div "col-md-3" 但我不知道如何设置，请您帮帮我,

标签： c# css asp.net twitter-bootstrap

【解决方案1】：

引导程序不仅仅是将文件放入其中（因此您应该花一些时间学习基础知识），但请查看本节以获取您的基本 html：

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

这将链接引导 javascript 和 css。请务必添加您自己的任何 javascript/css。

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

这就是 JustLearning 提到的使用 html 选择网站结构的方式。您可能只是将图像放在 1 行中，跨越 4 列。

【讨论】：

我的页眉和页脚在引导程序中工作正常，但有些内容有问题你能帮我吗？
试着把它简化为

{Fill up 12 columns here}

{Fill此处最多 12 列}

{此处填写 12 列}

【解决方案2】：

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

【讨论】：

我的页眉和页脚在引导程序中工作正常，但有些内容有问题你能帮我吗？
哪些内容有问题？