`

bootstrap20180721-学习页面布局

阅读更多
1 navbar
2 表单 
包裹在 form 设置  form-horizontal,里面控件设置 control-group的div中。此外还有一行的
按钮变蓝 样式 btn-primary
3 nav下拉框 在li中嵌套 ul的下拉框,有js 所以需要加入
<script src="../assets/js/jquery.js"></script>
   
    <script src="../assets/js/bootstrap-dropdown.js"></script>


小技巧 设置背景是灰色,登录框白色

1 设置body 颜色
background-color: #f5f5f5;

2 设置form 的class 白色
  background-color: #fff;
分享到:
评论

相关推荐

    Java bootstrap-3.4.1-dist 前端框架

    Bootstrap是世界上最流行的HTML、CSS和JavaScript前端框架,用于开发响应式布局和移动设备优先的Web项目。这个"Java bootstrap-3.4.1-dist"压缩包...学习和掌握Bootstrap的用法对于任何Web开发者来说都是极其有价值的。

    bootstrap-3.3.7-dist

    `bootstrap.min.css`是经过压缩优化后的版本,适用于生产环境,以减少页面加载时间。这些CSS文件定义了Bootstrap的所有样式,包括栅格系统、排版、表单、按钮、导航、警告提示、模态框等,使得开发者可以快速构建出...

    bootstrap-5.0.0-beta2-dist.zip

    在这个版本中,Bootstrap提供了一套更加灵活的网格系统,允许开发者创建适应不同屏幕尺寸的布局。同时,组件也进行了优化,确保在各种设备上都能保持良好的用户体验。 在样式方面,Bootstrap 5引入了一些新的主题...

    前端项目-bootstrap3-contact-form.zip

    2. **响应式设计**:学习如何创建适应不同设备屏幕大小的页面布局,确保在手机、平板和桌面电脑上都能提供良好的用户体验。 3. **联系表单**:设计和实现一个包含姓名、邮箱、电话和消息字段的表单,并添加提交按钮...

    bootStrap3-Layoutit

    1. **拖放界面**:用户可以通过拖放组件(如导航栏、按钮、表格等)到画布上来快速构建页面布局。这极大地提高了设计效率,尤其是对于初学者来说,无需编写复杂的HTML和CSS代码。 2. **预览功能**:在编辑过程中,...

    bootstrap-toggle-buttons

    Bootstrap提供了一套响应式布局、移动设备优先的流式栅格系统,以及一系列预先设计的UI元素,如按钮、表单、导航和模态框等,大大提高了开发效率。 ### jQuery简介 jQuery是一个轻量级的JavaScript库,它简化了...

    bootstrap3-layout可视化布局源代码

    Bootstrap3-Layout是一款基于Bootstrap 3框架的可视化布局工具...通过学习和应用Bootstrap3-Layout的源代码,开发者不仅可以提升构建响应式网页布局的效率,还能深入了解前端开发的最佳实践和Bootstrap框架的工作机制。

    bootstrap页面练习-4个完整页面--哈哈

    这些文件提供了完整的HTML和CSS代码,你可以通过它们来学习如何将理论知识转化为实际的页面布局。每个页面可能展示了不同的设计模式,如首页、产品展示页、联系我们页或用户登录页等。通过对这些页面的分析和修改,...

    bootstrap-2.3.2-dist

    7. **文档齐全**:Bootstrap官方提供了详尽的文档,涵盖了框架的所有组件、插件和定制选项,方便开发者学习和使用。 8. **社区支持**:Bootstrap有一个庞大的开发者社区,提供了许多第三方插件和主题,以及解决问题...

    bootstrap-4.6.2

    Bootstrap的核心理念是提供一套可重用的组件、网格系统和易于定制的样式,使得开发者能够快速实现页面布局和交互功能。 压缩包子文件的文件名"bootstrap-4.6.2-dist"可能包含的是Bootstrap的分布版本(dist),即...

    startbootstrap-sb-admin-gh-pages_TheFront_boostrap_

    其中,“sb-admin”是一个特定的模板,设计用于后台管理界面,提供多种页面布局、图表和表格等元素,使得开发者能够快速搭建功能齐全的管理后台。 “gh-pages”则表明这个项目托管在GitHub Pages上,这是一个免费的...

    Bootstrap Table Fixed Columns 固定列

    此外,为了确保在不同设备和屏幕尺寸上都有良好的用户体验,还需要考虑响应式布局,以适应不同的视口宽度。 总之,Bootstrap Table的Fixed Columns扩展为数据密集型的网页提供了强大的工具,使得用户可以更方便地...

    bootstrap-5.0.2-dist.zip

    Bootstrap是世界上最流行的HTML、CSS和JS框架,用于开发响应式布局和移动设备优先的Web项目。...总的来说,Bootstrap 5.0.2是一个强大的工具,通过深入学习和实践,开发者可以创建出既美观又功能丰富的Web应用。

    startbootstrap-sb-admin-2-gh-pages.zip

    1. **CSS**:主要包括bootstrap.min.css和其他自定义的CSS文件,用于定义页面的样式和布局。bootstrap.min.css是Bootstrap的核心样式库,提供了基础的排版、按钮、表单、导航等元素的样式。 2. **JS**:JavaScript...

    start bootstrap-sb-admin

    "sb-admin" 表示它是针对"Simple Bootstrap Admin"的定制版,意在提供一个简单但功能强大的基础布局,方便开发者在此基础上进行自定义和扩展。 模板的主要组成部分可能包括以下内容: 1. **导航栏**:通常包含品牌...

    java springMVC bootstrap bootstrap-table 分页等实例

    在这个实例中,我们结合了SpringMVC、Bootstrap以及Bootstrap的几个扩展组件,如bootstrap-table、bootstrap-select和bootstrap-timepicker,来实现一个功能丰富的页面。 首先,SpringMVC是Spring框架的一部分,它...

    bootstrap-3.3.4-dist

    通过这个"bootstrap-3.3.4-dist"压缩包,开发者可以直接使用Bootstrap的CSS和JavaScript文件,将它们链接到自己的网页项目中,从而快速构建具有专业外观和功能的页面。同时,开发者也可以深入学习Bootstrap的源代码...

    bootstrap-4-dev

    1. **Flexbox布局**:Bootstrap 4全面采用了Flexbox布局模型,这使得创建复杂的网格系统、对齐和自适应布局变得更加简单。 2. **Grid系统升级**:Bootstrap 4的网格系统扩展到了12列,支持更多断点,使响应式设计...

    bootstrap--js资源和演示包

    2. `docs`目录:Bootstrap的文档,提供了详细的API参考和示例,是学习和理解Bootstrap功能的好资源。 3. `js`目录:源码JavaScript文件,开发者可以查看和修改源码,或者根据需要自定义组件。 4. `scss`目录:...

Global site tag (gtag.js) - Google Analytics