-
在Bootstrap框架中要实现水平表单(标签居左,表单控件居右)效果,必须满足以下两个条件: 1、在<form>元素是使用类名“form-horizontal”。 2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)查看全部
-
表单状态的作用: 每一种状态都能给用户传递不同的信息,比如表单有焦点的状态可以告诉用户可以输入或选择东西,禁用状态可以告诉用户不可以输入或选择东西,还有就是表单控件验证状态,可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。 焦点状态是通过伪类“:focus”来实现。查看全部
-
前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是: 1、input-sm:让控件比正常大小更小 2、input-lg:让控件比正常大小更大 这两个类适用于表单中的input,textarea和select控件,具体使用如下: <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大"> <input class="form-control" type="text" placeholder="正常大小"> <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">查看全部
-
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: input[type=“submit”] input[type=“button”] input[type=“reset”] <button> 在Bootstrap框架中的按钮都是采用<button>来实现。查看全部
-
有时候,为了布局的需要,将复选框和单选按钮需要水平排列。Bootstrap框架也做了这方面的考虑: 1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline” 2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”查看全部
-
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。 Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将<table class="table">置于这个容器当中,这样表格也就具有响应式效果。查看全部
-
Bootstrap中紧凑型的表格与基础表格差别不大,因为只是将单元格的内距由8px调至5px. 紧凑型表格的运用,也只是需要在<table class="table">基础上添加类名“table-condensed”:查看全部
-
鼠标悬浮高亮表格,可以和Bootstrap其他表格混合使用。只要你想让你的表格具备悬浮高亮效果,你只要给这个表格添加“table-hover”类名就好了查看全部
-
背景色 odd奇数 even为偶数 <table class="table table-striped">查看全部
-
Bootstrap为表格不同的样式风格提供了不同的类名,主要包括: .table:基础表格 .table-striped:斑马线表格 .table-bordered:带边框的表格 .table-hover:鼠标悬停高亮的表格 .table-condensed:紧凑型表格 .table-responsive:响应式表格查看全部
-
为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格: .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐查看全部
-
字体都定义在<body>元素上,由于这几个属性都是继承属性,所以Web页面中文本(包括段落p元素)如无重置都会具有这些样式效果。 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }查看全部
-
margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度查看全部
-
dl dt dd查看全部
-
一句话解决了我的移动端配适问题。\(≧≦)/ <meta name="viewport" content="width=device-width, initial-scale=1">查看全部
举报
0/150
提交
取消