none
bootStrap não funciona no MVC RRS feed

  • Pergunta

  • olá, estou com um probleminha na minha aplicação, estou utilizando Asp.Net MVC com Razor, em minha aplicação carrego um layout BootStrap, algumas partes do layout carregam, mas justamente os ícones como fa fa-home e fa fa-chevron-down não carregam, abaixo o fon da minha página.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>@ViewBag.Title</title>
        <!-- Bootstrap core CSS -->
        @Styles.Render("../Content/css/bootstrap.min.css", "../Content/fonts/Content/css/font-awesome.min.css",
                       "../Content/css/animate.min.css", "../Content/css/custom.css","../Content/floatexamples.css",
                       "../Content/css/maps/jquery-jvectormap-2.0.1.css", "../Content/css/icheck/flat/green.css")
        @Scripts.Render("../Content/js/jquery.min.js", "../Content/js/nprogress.js")
        <script>
            NProgress.start();
        </script>
    </head>
    
    <body class="nav-md">
        <div class="container body">
    
            <div class="main_container">
                <div class="col-md-3 left_col">
                    <div class="left_col scroll-view">
                        <div class="navbar nav_title" style="border: 0;">
                            <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gestor Transporte</span></a>
                        </div>
                        <div class="clearfix"></div>
    
                        <!-- menu prile quick info -->
                        <div class="profile">
                            <div class="profile_pic">
                                <img src="~/Images/img.jpg" alt="..." class="img-circle profile_img">
                            </div>
                            <div class="profile_info">
                                <span>Bem Vindo,</span>
                                <h2>Jonathan Marques</h2>
                            </div>
                        </div>
                        <!-- /menu prile quick info -->
                        <br />
                        <!-- sidebar menu -->
                        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                            <div class="menu_section">
                                <h3>General</h3>
                                <ul class="nav side-menu">
                                    <li>
                                        <a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
                                        <ul class="nav child_menu" style="display: none">
                                            <li>
                                                @Html.ActionLink("Dashboard", "Dashboard","Home") 
                                                @*<a href="index.html">Dashboard</a>*@
                                            </li>
                                            <li>
                                                @Html.ActionLink("Dashboard2", "Dashboard2", "Home")                                            
                                                @*<a href="index2.html">Dashboard2</a>*@
                                            </li>
                                            <li>
                                                @Html.ActionLink("Dashboard3", "Dashboard3", "Home") 
                                                @*<a href="index3.html">Dashboard3</a>*@
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
                                        <ul class="nav child_menu" style="display: none">
                                            <li>
                                                <a href="form.html">General Form</a>
                                            </li>
                                            <li>
                                                <a href="form_advanced.html">Advanced Components</a>
                                            </li>
                                            <li>
                                                <a href="form_validation.html">Form Validation</a>
                                            </li>
                                            <li>
                                                <a href="form_wizards.html">Form Wizard</a>
                                            </li>
                                            <li>
                                                <a href="form_upload.html">Form Upload</a>
                                            </li>
                                            <li>
                                                <a href="form_buttons.html">Form Buttons</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
                                        <ul class="nav child_menu" style="display: none">
                                            <li>
                                                <a href="general_elements.html">General Elements</a>
                                            </li>
                                            <li>
                                                <a href="media_gallery.html">Media Gallery</a>
                                            </li>
                                            <li>
                                                <a href="typography.html">Typography</a>
                                            </li>
                                            <li>
                                                <a href="icons.html">Icons</a>
                                            </li>
                                            <li>
                                                <a href="glyphicons.html">Glyphicons</a>
                                            </li>
                                            <li>
                                                <a href="widgets.html">Widgets</a>
                                            </li>
                                            <li>
                                                <a href="invoice.html">Invoice</a>
                                            </li>
                                            <li>
                                                <a href="inbox.html">Inbox</a>
                                            </li>
                                            <li>
                                                <a href="calender.html">Calender</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
                                        <ul class="nav child_menu" style="display: none">
                                            <li>
                                                <a href="tables.html">Tables</a>
                                            </li>
                                            <li>
                                                <a href="tables_dynamic.html">Table Dynamic</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
                                        <ul class="nav child_menu" style="display: none">
                                            <li>
                                                <a href="chartjs.html">Chart JS</a>
                                            </li>
                                            <li>
                                                <a href="chartjs2.html">Chart JS2</a>
                                            </li>
                                            <li>
                                                <a href="morisjs.html">Moris JS</a>
                                            </li>
                                            <li>
                                                <a href="echarts.html">ECharts </a>
                                            </li>
                                            <li>
                                                <a href="other_charts.html">Other Charts </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="menu_section">
                                <h3>Live On</h3>
                                <ul class="nav side-menu">
                                    <li>
                                        <a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
                                        <ul class="nav child_menu" style="display: none">
                                            <li>
                                                <a href="e_commerce.html">E-commerce</a>
                                            </li>
                                            <li>
                                                <a href="projects.html">Projects</a>
                                            </li>
                                            <li>
                                                <a href="project_detail.html">Project Detail</a>
                                            </li>
                                            <li>
                                                <a href="contacts.html">Contacts</a>
                                            </li>
                                            <li>
                                                <a href="profile.html">Profile</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
                                        <ul class="nav child_menu" style="display: none">
                                            <li>
                                                <a href="page_404.html">404 Error</a>
                                            </li>
                                            <li>
                                                <a href="page_500.html">500 Error</a>
                                            </li>
                                            <li>
                                                <a href="plain_page.html">Plain Page</a>
                                            </li>
                                            <li>
                                                <a href="login.html">Login Page</a>
                                            </li>
                                            <li>
                                                <a href="pricing_tables.html">Pricing Tables</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /sidebar menu -->
                        <!-- /menu footer buttons -->
                        <div class="sidebar-footer hidden-small">
                            <a data-toggle="tooltip" data-placement="top" title="Settings">
                                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                            </a>
                            <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
                            </a>
                            <a data-toggle="tooltip" data-placement="top" title="Lock">
                                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
                            </a>
                            <a data-toggle="tooltip" data-placement="top" title="Logout">
                                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
                            </a>
                        </div>
                        <!-- /menu footer buttons -->
                    </div>
                </div>
                <!-- top navigation -->
                <div class="top_nav">
                    <div class="nav_menu">
                        <nav class="" role="navigation">
                            <div class="nav toggle">
                                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                            </div>
                            <ul class="nav navbar-nav navbar-right">
                                <li class="">
                                    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        <img src="~/Images/img.jpg" alt="">John Doe
                                        <span class=" fa fa-angle-down"></span>
                                    </a>
                                    <ul class="dropdown-menu dropdown-usermenu animated fadeInDown pull-right">
                                        <li>
                                            <a href="javascript:;">  Profile</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">
                                                <span class="badge bg-red pull-right">50%</span>
                                                <span>Settings</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:;">Help</a>
                                        </li>
                                        <li>
                                            <a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
                                        </li>
                                    </ul>
                                </li>
                                <li role="presentation" class="dropdown">
                                    <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
                                        <i class="fa fa-envelope-o"></i>
                                        <span class="badge bg-green">6</span>
                                    </a>
                                    <ul id="menu1" class="dropdown-menu list-unstyled msg_list animated fadeInDown" role="menu">
                                        <li>
                                            <a>
                                                <span class="image">
                                                    <img src="~/Images/img.jpg" alt="Profile Image" />
                                                </span>
                                                <span>
                                                    <span>John Smith</span>
                                                    <span class="time">3 mins ago</span>
                                                </span>
                                                <span class="message">
                                                    Film festivals used to be do-or-die moments for movie makers. They were where...
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a>
                                                <span class="image">
                                                    <img src="~/Images/img.jpg" alt="Profile Image" />
                                                </span>
                                                <span>
                                                    <span>John Smith</span>
                                                    <span class="time">3 mins ago</span>
                                                </span>
                                                <span class="message">
                                                    Film festivals used to be do-or-die moments for movie makers. They were where...
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a>
                                                <span class="image">
                                                    <img src="~/Images/img.jpg" alt="Profile Image" />
                                                </span>
                                                <span>
                                                    <span>John Smith</span>
                                                    <span class="time">3 mins ago</span>
                                                </span>
                                                <span class="message">
                                                    Film festivals used to be do-or-die moments for movie makers. They were where...
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a>
                                                <span class="image">
                                                    <img src="~/Images/img.jpg" alt="Profile Image" />
                                                </span>
                                                <span>
                                                    <span>John Smith</span>
                                                    <span class="time">3 mins ago</span>
                                                </span>
                                                <span class="message">
                                                    Film festivals used to be do-or-die moments for movie makers. They were where...
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <div class="text-center">
                                                <a>
                                                    <strong>See All Alerts</strong>
                                                    <i class="fa fa-angle-right"></i>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- /top navigation -->
                <!-- page content -->
                <div class="right_col" role="main">
                    <br />
                    <section>
                        @RenderBody()
                    </section>
                    <!-- footer content -->
                    <footer>
                        <div class="">
                            <p class="pull-right">
                                Gentelella Alela! a Bootstrap 3 template by <a>Kimlabs</a>. |
                                <span class="lead"> <i class="fa fa-paw"></i> Gentelella Alela!</span>
                            </p>
                        </div>
                        <div class="clearfix"></div>
                    </footer>
                    <!-- /footer content -->
                </div>
                <!-- /page content -->
            </div>
    
        </div>
        <div id="custom_notifications" class="custom-notifications dsp_none">
            <ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group"></ul>
            <div class="clearfix"></div>
            <div id="notif-group" class="tabbed_notifications"></div>
        </div>
        @Scripts.Render("~/Content/js/bootstrap.min.js","~/Content/js/nicescroll/jquery.nicescroll.min.js","~/Content/js/chartjs/chart.min.js",
        "~/Content/js/progressbar/bootstrap-progressbar.min.js","~/Content/js/icheck/icheck.min.js","~/Content/js/moment.min2.js",
        "~/Content/js/datepicker/daterangepicker.js", "~/Content/js/sparkline/jquery.sparkline.min.js", "~/Content/js/jquery.min.js",
        "~/Content/js/custom.js", "~/Content/js/flot/jquery.flot.js", "~/Content/js/flot/jquery.flot.pie.js", "~/Content/js/flot/jquery.flot.orderBars.js",
        "~/Content/js/flot/jquery.flot.time.min.js", "~/Content/js/flot/date.js", "~/Content/js/flot/jquery.flot.spline.js", "~/Content/js/flot/jquery.flot.stack.js",
        "~/Content/js/flot/curvedLines.js", "~/Content/js/flot/jquery.flot.resize.js")
    
        <!-- flot -->
        <script type="text/javascript">
            //define chart clolors ( you maybe add more colors if you want or flot will add it automatic )
            var chartColours = ['#96CA59', '#3F97EB', '#72c380', '#6f7a8a', '#f7cb38', '#5a8022', '#2c7282'];
    
            //generate random number for charts
            randNum = function () {
                return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
            }
    
            $(function () {
                var d1 = [];
                //var d2 = [];
    
                //here we generate data for chart
                for (var i = 0; i < 30; i++) {
                    d1.push([new Date(Date.today().add(i).days()).getTime(), randNum() + i + i + 10]);
                    //    d2.push([new Date(Date.today().add(i).days()).getTime(), randNum()]);
                }
    
                var chartMinDate = d1[0][0]; //first day
                var chartMaxDate = d1[20][0]; //last day
    
                var tickSize = [1, "day"];
                var tformat = "%d/%m/%y";
    
                //graph options
                var options = {
                    grid: {
                        show: true,
                        aboveData: true,
                        color: "#3f3f3f",
                        labelMargin: 10,
                        axisMargin: 0,
                        borderWidth: 0,
                        borderColor: null,
                        minBorderMargin: 5,
                        clickable: true,
                        hoverable: true,
                        autoHighlight: true,
                        mouseActiveRadius: 100
                    },
                    series: {
                        lines: {
                            show: true,
                            fill: true,
                            lineWidth: 2,
                            steps: false
                        },
                        points: {
                            show: true,
                            radius: 4.5,
                            symbol: "circle",
                            lineWidth: 3.0
                        }
                    },
                    legend: {
                        position: "ne",
                        margin: [0, -25],
                        noColumns: 0,
                        labelBoxBorderColor: null,
                        labelFormatter: function (label, series) {
                            // just add some space to labes
                            return label + '&nbsp;&nbsp;';
                        },
                        width: 40,
                        height: 1
                    },
                    colors: chartColours,
                    shadowSize: 0,
                    tooltip: true, //activate tooltip
                    tooltipOpts: {
                        content: "%s: %y.0",
                        xDateFormat: "%d/%m",
                        shifts: {
                            x: -30,
                            y: -50
                        },
                        defaultTheme: false
                    },
                    yaxis: {
                        min: 0
                    },
                    xaxis: {
                        mode: "time",
                        minTickSize: tickSize,
                        timeformat: tformat,
                        min: chartMinDate,
                        max: chartMaxDate
                    }
                };
                var plot = $.plot($("#placeholder33x"), [{
                    label: "Email Sent",
                    data: d1,
                    lines: {
                        fillColor: "rgba(150, 202, 89, 0.12)"
                    }, //#96CA59 rgba(150, 202, 89, 0.42)
                    points: {
                        fillColor: "#fff"
                    }
                }], options);
            });
        </script>
        <!-- /flot -->
        <!--  -->
        <script>
            $('document').ready(function () {
                $(".sparkline_one").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 4, 5, 6, 3, 5, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], {
                    type: 'bar',
                    height: '125',
                    barWidth: 13,
                    colorMap: {
                        '7': '#a1a1a1'
                    },
                    barSpacing: 2,
                    barColor: '#26B99A'
                });
    
                $(".sparkline11").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 6, 2, 4, 3, 4, 5, 4, 5, 4, 3], {
                    type: 'bar',
                    height: '40',
                    barWidth: 8,
                    colorMap: {
                        '7': '#a1a1a1'
                    },
                    barSpacing: 2,
                    barColor: '#26B99A'
                });
    
                $(".sparkline22").sparkline([2, 4, 3, 4, 7, 5, 4, 3, 5, 6, 2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 6], {
                    type: 'line',
                    height: '40',
                    width: '200',
                    lineColor: '#26B99A',
                    fillColor: '#ffffff',
                    lineWidth: 3,
                    spotColor: '#34495E',
                    minSpotColor: '#34495E'
                });
    
                var doughnutData = [
                    {
                        value: 30,
                        color: "#455C73"
                    },
                    {
                        value: 30,
                        color: "#9B59B6"
                    },
                    {
                        value: 60,
                        color: "#BDC3C7"
                    },
                    {
                        value: 100,
                        color: "#26B99A"
                    },
                    {
                        value: 120,
                        color: "#3498DB"
                    }
                ];
                var myDoughnut = new Chart(document.getElementById("canvas1i").getContext("2d")).Doughnut(doughnutData);
                var myDoughnut = new Chart(document.getElementById("canvas1i2").getContext("2d")).Doughnut(doughnutData);
                var myDoughnut = new Chart(document.getElementById("canvas1i3").getContext("2d")).Doughnut(doughnutData);
            });
        </script>
        <!-- -->
        <!-- datepicker -->
        <script type="text/javascript">
            $(document).ready(function () {
    
                var cb = function (start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    //alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
                }
    
                var optionSet1 = {
                    startDate: moment().subtract(29, 'days'),
                    endDate: moment(),
                    minDate: '01/01/2012',
                    maxDate: '12/31/2015',
                    dateLimit: {
                        days: 60
                    },
                    showDropdowns: true,
                    showWeekNumbers: true,
                    timePicker: false,
                    timePickerIncrement: 1,
                    timePicker12Hour: true,
                    ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    opens: 'left',
                    buttonClasses: ['btn btn-default'],
                    applyClass: 'btn-small btn-primary',
                    cancelClass: 'btn-small',
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    locale: {
                        applyLabel: 'Submit',
                        cancelLabel: 'Clear',
                        fromLabel: 'From',
                        toLabel: 'To',
                        customRangeLabel: 'Custom',
                        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                        firstDay: 1
                    }
                };
                $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
                $('#reportrange').daterangepicker(optionSet1, cb);
                $('#reportrange').on('show.daterangepicker', function () {
                    console.log("show event fired");
                });
                $('#reportrange').on('hide.daterangepicker', function () {
                    console.log("hide event fired");
                });
                $('#reportrange').on('apply.daterangepicker', function (ev, picker) {
                    console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
                });
                $('#reportrange').on('cancel.daterangepicker', function (ev, picker) {
                    console.log("cancel event fired");
                });
                $('#options1').click(function () {
                    $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
                });
                $('#options2').click(function () {
                    $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
                });
                $('#destroy').click(function () {
                    $('#reportrange').data('daterangepicker').remove();
                });
            });
        </script>
        <!-- /datepicker -->
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
    </html>
    

    Alguém pode me ajudar ?

    quarta-feira, 8 de julho de 2015 15:11

Respostas

  • Bom Dia,

    tente trocar os ".." por "~".

    ficaria assim:

      @Styles.Render("~/Content/css/bootstrap.min.css", "~/Content/fonts/Content/css/font-awesome.min.css",
                       "~/Content/css/animate.min.css", "~/Content/css/custom.css","~/Content/floatexamples.css",
                       "~/Content/css/maps/jquery-jvectormap-2.0.1.css", "~/Content/css/icheck/flat/green.css")
        @Scripts.Render("~/Content/js/jquery.min.js", "~/Content/js/nprogress.js")

    outra dica, como você esta utilizando varias folhas de estilos e vários scripts tente utilizar o Bundle para unificar tudo e melhorar a performance da sua aplicação.

    da uma olhada neste link.

    sexta-feira, 10 de julho de 2015 13:10

Todas as Respostas

  • Bom Dia,

    tente trocar os ".." por "~".

    ficaria assim:

      @Styles.Render("~/Content/css/bootstrap.min.css", "~/Content/fonts/Content/css/font-awesome.min.css",
                       "~/Content/css/animate.min.css", "~/Content/css/custom.css","~/Content/floatexamples.css",
                       "~/Content/css/maps/jquery-jvectormap-2.0.1.css", "~/Content/css/icheck/flat/green.css")
        @Scripts.Render("~/Content/js/jquery.min.js", "~/Content/js/nprogress.js")

    outra dica, como você esta utilizando varias folhas de estilos e vários scripts tente utilizar o Bundle para unificar tudo e melhorar a performance da sua aplicação.

    da uma olhada neste link.

    sexta-feira, 10 de julho de 2015 13:10
  • As classes fa não são do bootstrap e sim do font awesome, pelo que vi não tem o include do font awesome, pode baixar direto no site do font awesome.
    segunda-feira, 20 de julho de 2015 17:12