Question

有没有办法在我的设计中使用元素切断它还是足够好的？我使用Boostrap CSS库。

1）CSS：

body {
    border: 3px solid black;
    min-width: 1800px;
}

#search_box {
    border: 3px solid red;
    background-color: white;
    color: black;
    text-align: left;
    margin-bottom: 15px;
    width: 40%;
}

#search_filter_border {
    border: 3px solid green;
    /*border: 1px outset gray;*/
    float: left;
    padding: 10px;    
}

#search_categories_filter {
    border: 3px solid blue;
    line-height: 20px;
    height: 420px;
    width: 250px;
    float: left;
    padding: 10px;        
    margin: 5px 5px 5px 5px;
}

#search_additional_filters {
    border: 3px solid brown;
    width: 700px;
    float: left;
    padding: 10px;       
    margin: 5px 5px 5px 5px;
}

#top20 {
    border: 3px solid gray;
    width: 650px;
    padding: 5px;        
    margin: 5px 5px 5px 50px;
    float: left;
}

2）HTML：

<div id="search_box">
    <h2>Поиск мероприятий:</h2>
    <div id="searchKeyword" class="input-group">
        <i class="glyphicon glyphicon-search input-group-addon"></i>
        <input type="text" class="form-control" placeholder="Часть названия мероприятия" ng-model="actionsQuery.searchText" on-enter="queryResult()">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" ng-click="queryResult()">Найти мероприятия</button>
        </span>
    </div>
</div>

<div id="search_filter_border">
    <div id="search_categories_filter">
        <label>Типы мероприятий:</label><br/>
        <button class="btn btn-link btn-mini" ng-click="UpdateCheckBoxes()">
            <span ng-show="checkBoxesState">Выбрать все</span>
            <span ng-hide="checkBoxesState">Снять выделение</span>
        </button>
        <div class="row-fluid" ng-repeat="at in actionsQuery.actionTypes">
            <div class="checkbox">
                <label><input type="checkbox" ng-model="at.checked">{{at.Description}}</label>
            </div>
        </div>
    </div>
    <div id="search_additional_filters">
        <label tooltip-popup-delay='400' tooltip-placement="right" tooltip="Минимальная дата - текущая, Максимальная - текущая плю год">Дата сеансов:</label>
        <div class="form-inline row" role="form">
            <div class="col-sm-4">
                <div class="input-group">
                    <label class="input-group-addon"> с</label>
                    <input datepicker-popup class="form-control col-md-4" type="text" ng-model="actionsQuery.fromDate" is-open="fromDateOpen"/>
                    <i class="glyphicon glyphicon-calendar input-group-addon" ng-click="toogleDatepicker($event, 'fromDateOpen')"></i>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="input-group">
                    <label class="input-group-addon"> по </label>
                    <input datepicker-popup class="form-control col-md-4" type="text" ng-model="actionsQuery.toDate" is-open="toDateOpen"/>
                    <i class="glyphicon glyphicon-calendar input-group-addon" ng-click="toogleDatepicker($event, 'toDateOpen')"></i>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="input-group">
                    <span class="input-group-addon"><input type="checkbox" ng-model="actionsQuery.isOpenDatesIncluded"></span>
                    <label class="form-control col-md-3">+ открытая дата</label>
                </div>
            </div>
        </div>
        <br/>
        <!--города, площадки-->
        <div class="row">
            <div class="form-group col-sm-8">
                <label>Город:</label>
                <div class="input-group">
                    <i class="glyphicon glyphicon-filter input-group-addon"></i>
                    <select class="form-control" ng-model="actionsQuery.city" ng-options="c as c.Name for c in cities"></select>
                </div>
                <br/>
                <label>Площадка мероприятия:</label>
                <div class="input-group">
                    <i class="glyphicon glyphicon-filter input-group-addon"> </i>
                    <select class="form-control" ng-model="actionsQuery.actionPlace" ng-options="ap as ap.Name for ap in actionPlaces"></select>
                </div>
            </div>
        </div>
    </div>

    <!--Строка данных-->
    <div class="row-fluid offset1">
        <table class="table table-striped table-condensed table-hover" style="float: left"><!--float: left нужен для корректного отображения в Mozilla -->
            <tr ng-repeat="action in actionList">
                <td><img ng-src="{{action.ActionLogoUrl?action.ActionLogoUrl:'/img/no_image.gif'}}" /></td>
                <td>
                    <div>
                        <strong>{{action.Artist}}</strong>
                        <span class="pull-right"><a class="btn btn-link" ng-click="showSeances(action)" ng-hide="action.seances">Показать сеансы</a></span>
                        <span class="pull-right"><a class="btn btn-link" ng-click="hideSeances(action)" ng-show="action.seances">Скрыть сеансы</a></span>
                    </div>
                    <div class="text-success">
                        {{action.ActionPlaceName}} 
                        <span ng-show="action.ETicketEnabled>0" class="label label-success">ET</span>
                    </div>
                    <!--Таблица сеансов-->
                    <table class="table table-striped" ng-show="action.seances" style="margin-bottom: 3px; margin-top: 10px;">
                        <tr ng-class="getSeanceClasses(seance)" ng-repeat="seance in action.seances">
                            <td>
                                <h5 class="checkbox">{{seance.title}}</h5>
                            </td>
                            <td>
                                <span ng-show="seance.IsClosed">закрыт</span>
                                <span class="text-warning" ng-show="seance.IsPaymentsReceived">оплачен</span>
                            </td>
                            <td>
                                {{seance.ActionInfo}}
                            </td>
                            <td>
                                <a class="btn btn-link" ng-href="/Order.aspx?ActionID={{action.Id}}&ActionDate={{seance.ActionDate}}" target="_blank">Заказать</a>
                            </td>
                        </tr>
                    </table>
                    <span><a class="btn btn-link" ng-show="action.seances.length>seancesLimit" ng-click="seancesLimit=seancesLimit+7">Показать еще...</a></span>
                </td>
                <td>{{action.BeginActionDate | date:'dd.MM.yyyy HH:mm'}}</td>
            </tr>
        </table>
        <input type="button" class="btn" value="Еще" ng-click="queryNext()" ng-hide="isLastPage" style="float: left"/><!--float: left нужен для корректного отображения в Mozilla -->
    </div>
</div>

<div id="top20" class="col-md-4 row-fluid" ng-if="top20 && top20.length!=0">
    <label style="text-decoration: underline;">Тоp 20:</label>
    <p ng-repeat="t in top20">
        <a class="btn-link" ng-href="/Order.aspx?ActionID={{t.ActionID}}" target="_blank">{{t.Artist}}</a>
    </p>
</div>

这就是它的样子：

Screen shot

Answer 1

您可能希望使用ngInclude进行代码重用。

您不需要将小模板放在单独的文件中。只需使用带有script的{{1}}标记将其包含在主html中：

type="text/ng-template"

更新：

您可以将模板打包到单独的库中。见$templateCache

有没有办法在我的设计中使用<div>元素切断？</div>

1 个答案: