【问题标题】:What is meant by bootstrapping a page? Converting aspx to bootstrap?引导页面是什么意思?将aspx转换为引导程序?
【发布时间】:2015-02-27 05:34:11
【问题描述】:

我的任务是修改一些已经开发的 web 应用程序的 aspx 页面。这些页面需要转换为使用新的 Bootstrap 布局。那么引导页面是什么意思呢?其中一页如下。请给我一些想法。

<%@ Page Language="VB" MasterPageFile="~/MasterExternal.master" AutoEventWireup="false" CodeFile="OptIt.aspx.vb" Inherits="OptIt" %>
<%@ MasterType VirtualPath="~/MasterExternal.master" %>
<asp:Content ID="c2" ContentPlaceHolderID="cpStyle" Runat="Server">
<style type="text/css">
    #middleContentContentParent {position:relative;left:50px;width:900px;}
    .dtText {font-size:22px;height:35px;line-height:35px;width:50px}
    input[type=text] {padding:0;}
</style>
</asp:Content>
<asp:Content ID="c3" ContentPlaceHolderID="cp3" Runat="Server">
    <form runat="server" id="aspnet">
        <div style="position:relative;width:860px;height:450px;margin:0 20px 0 20px">

        <h1>Opt-In to TXT Messaging</h1>
        <hr />
        <div style="text-align:left;" >
            <div runat="server" id="divFields">
                <p>
                Enter your cell phone noted in the email you just received to receive your TXT confirmation.  Then follow the directions in the TXT message.
                </p>    
                <br />
                <div style="width:360px;margin:0 auto;text-align:center">

                    <asp:ValidationSummary class="valSummaryLg"  ID="valSummary" runat="server" />

                    <h4>Mobile Number</h4>

                    <p style="text-align:left">
                    (<input runat="server" type="text" size="3" class="dtText" maxlength="3" id="CellPhone1_1" value="" /> ) <input class="dtText" runat="server" type="text" maxlength="3" size="3" id="CellPhone1_2" value="" /> - <input runat="server" type="text" maxlength="4" size="4" id="CellPhone1_3" class="dtText"  value="" />
                    <asp:CustomValidator runat="server" ID="valPhone" Text="*"></asp:CustomValidator>&nbsp; 
                    <br />

                    <br />
                    <asp:Button runat="server"  CssClass="button1Lg" ID="btnSubmit" Text="Submit" />
                    </p>
                </div>
            </div>

            <div runat="server" id="lblMessage" visible="false">
            <br /><br />
            <h2>Almost done... </h2>
            <p>
            Follow the instructions in the TXT you just received.  If you don't receive a TXT confirmation message, please see the "Commons Problems" below.
            </p>
            <br /><br />
            <h4>Common Problems with TXTing (using SHORT CODES):</h4>
            <p>
            FFPS uses a 5 digit "short code" to send TXT messages.  Short codes are used for businesses to ensure the sender is respecting the recipient's TXTing preferences.  Some carriers (like Sprint) require individuals to call and UNBLOCK SHORT CODES.  Some of the common problems with receiving FFPS TXT messages include:
            </p>
            <div style="margin:0 0 0 20px">
                <h5>You are using Wal-Mart Family Mobile</h5>
                <p><b>How to Fix:</b> Sorry, Wal-Mart does not support TXTing with Short Codes</p>
                <h5>You are using Sprint and they have blocked Short Codes</h5>
                <p><b>How to Fix:</b> Call Sprint and request to "Unblock Short Codes"</p>
            </div>
            </div>
        </div>
        </div>
    </form>
</asp:Content>

【问题讨论】:

  • 对于引导程序,您需要将 HTML 结构更改为引导程序网格结构并使用引导程序类。你可以参考这个getbootstrap.com/getting-started/#template
  • 你应该先谷歌,然后再在这里发帖。 google.co.in/…
  • 我已经浏览了谷歌的文件。而且我认为没有任何特定的方法可以将页面转换为引导程序。所以我将发布我更改的代码。请看一下并给出一些想法

标签: css asp.net twitter-bootstrap layout


【解决方案1】:

这是我自己问题的答案。我已将其更改为使用引导程序。我为每一行添加了行类。请看一下并提出一些想法。

    <%@ Page Language="VB" MasterPageFile="~/MasterExternal.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Scholarship_Default" %>
    <%@ MasterType VirtualPath="~/MasterExternal.master" %>
    <asp:Content ID="c2" ContentPlaceHolderID="cpStyle" Runat="Server">
    <%--<style type="text/css">
        #middleContentContentParent {position:relative;left:50px;width:860px;}
        #divDownloadForms img {vertical-align:middle}
    </style>--%>
    </asp:Content>
    <asp:Content ID="c3" ContentPlaceHolderID="cp2" Runat="Server">
        <%--<div style="position:relative;width:820px;height:400px;margin:0 auto;">--%>
        <div>
            <div class="row">
                <h1>Scholarship Form</h1>
            </div>
            <div class="row">
                <h2>Instructions</h2>
            </div>
            <div class="row">            
                In order to apply for a scholarship, you will need to complete the Scholarship/Signup forms.  Please mail the 4 page form by the deadline stated below (otherwise, may cause delays or prevent placement).  Detailed instructions and the mailing address are found on the form (link below).<br />
            </div>
            <div class="row">
                <h2>Form Deadline</h2>
            </div>

                    <div id="divDownloadForms">
                        <div class="row"> 
                        For 
                            <b><asp:Label runat="server" ID="lblSeason"></asp:Label></b>, 
                            FFPS must receive your scholarship form by <b><asp:Label runat="server" ID="lblDate"></asp:Label></b>.

                        </div>
                        <div class="row">
                            <h5>Download the Scholarship/Signup Form - High Resolution (pdf)</h5>
                        </div>
                        <div class="row">
                            <img src="../images/icons/attach.gif" alt=""  />&nbsp;&nbsp;<a href="Stitch.aspx">Download File</a>
                        </div>    
                    </div>
        </div>
    </asp:Content>

【讨论】:

    【解决方案2】:

    Sham,如果你能展示现有的设计,那么我可以帮助你。您需要在行之间添加列网格,以便在所有视口中适当地查看。

    【讨论】:

    • 谢谢兄弟。无论如何,我想要关于如何将当前页面转换为引导页面的架构知识,以使用新的引导布局。这到底是什么意思?这样做的最佳做法是什么?图片在以下链接i58.tinypic.com/n4frid.png
    • 最佳做法是查看我们的bootstrap 网站。您可以在文档中看到网格系统。也尝试使用示例站点。这是最好的实践知识。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-15
    • 1970-01-01
    • 2017-05-22
    • 1970-01-01
    • 2021-11-29
    相关资源
    最近更新 更多