html - Why form lost bootstrap css? -
i'm learning mvc , i'm making contact form first code. of explain me why message area smaller title editor , why lost bootstrap css?
@using (html.beginform()) { @html.antiforgerytoken() <div class="form-horizontal"> <div class="form-group"> @html.labelfor(model => model.title, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.title, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.title, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.message, htmlattributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.textareafor(model => model.message, new { htmlattributes = new { @class = "form-control" } }) @html.validationmessagefor(model => model.message, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="wyslij" class="btn btn-default" /> </div> </div> </div> }
here updated fiddle - https://dotnetfiddle.net/dwy02w
output :
html :
@model helloworldmvcapp.sampleviewmodel @{ layout = null; } <!doctype html> <!-- template http://getbootstrap.com/getting-started --> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>bootstrap 101 template</title> <!-- css includes --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div class="container col-md-10"> @using (html.beginform()) { @html.antiforgerytoken() <div class="form-horizontal"> <div class="form-group"> @html.labelfor(model => model.title, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.textboxfor(model => model.title, new { @class = "form-control" } ) @html.validationmessagefor(model => model.title, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @html.labelfor(model => model.message, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.textareafor(model => model.message, new { @class = "form-control" } ) @html.validationmessagefor(model => model.message, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="wyslij" class="btn btn-default" /> </div> </div> </div> } </div> <!-- js includes --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script> </body> </html> model :
using system; using system.componentmodel.dataannotations; namespace helloworldmvcapp { public class sampleviewmodel { public string title { get; set; } public string message { get; set; } } }
Comments
Post a Comment