首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

第九篇bootstrap实例

作者：IHH_MCWONG_142 | 来源：互联网 | 2023-09-17 17:09
 1bootstrap的常用样式    Title

 

1 bootstrap的常用样式

 

 

 

 


"en">

"UTF-8">


"stylesheet" href="dist/css/bootstrap.css">


hello world

hello world


hello world


hello world


hello world

hello world

class="container">
class="row">
class="col-md-8 col-md-offset-2">
"1"class="table table-striped table-hover table-bordered">






class="success">











class="danger">





序号姓名年龄部门
1张三23销售
2李四23销售
3王五23销售



class="row">
class="col-md-8 col-md-offset-2">

class="form-group">

"email" class="form-control" id="exampleInputEmail1" placeholder="Email">

class="form-group">

"password" class="form-control" id="exampleInputPassword1" placeholder="Password">

class="form-group">

"file" id="exampleInputFile">

class="help-block">Example block-level help text here.



class="checkbox">





"">
class="form-group">

"text" class="form-control" id="user">

class="form-group">

"password" class="form-control" id="pwd">

class="form-group">
class="row">
class="col-md-6">
<select class="form-control">





select>



class="row">
class="col-md-2 pull-right">"submit" class="form-control">





class="col-md-8 col-md-offset-2">
class="row">

按钮



class="btn btn-warning btn-lg" type="button" value="button">
class="glyphicon glyphicon-user">  &nbsp;
class="glyphicon glyphicon-shopping-cart">




View Code

 

 

2 bootstrap的栅格系统


"en">

"UTF-8">


"stylesheet" href="dist/css/bootstrap.css">


class="container-fluid">
class="row">
class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1

class="col-md-1">col-md-1


class="row">
class="col-md-6">col-md-1

class="col-md-6">col-md-1


class="row">
class="col-md-9">col-md-1

class="col-md-3">col-md-1


class="row">
class="col-md-6 col-sm-9">col-md-6

class="col-md-6 col-sm-3">col-md-6


列偏移


class="row">
class="col-md-4 col-md-offset-3">col-md-4


列嵌套


class="row">
class="col-md-6">
class="row">
class="col-md-6">col-md-6

class="col-md-6">col-md-6




列排序


class="row">
class="col-md-4 col-md-push-2">col-md-4


class="row">
class="col-md-4 col-md-push-4">col-md-4

class="col-md-4 col-md-pull-4">col-md-4(2)


class="row">
class="col-md-4 pull-right col-md-pull-2">col-md-4




View Code

 

 

3 基于bootstrap的页面

技术：导航条 ，面板，表格，分页，模态框

   

 

 


"en">

"UTF-8">

"stylesheet" href="dist/css/bootstrap.css">




class="container">
class="row">
class="col-md-2">
class="panel panel-primary">
class="panel-heading">Panel heading without title

class="panel-body">
Panel content


class="panel panel-info">
class="panel-heading">Panel heading without title

class="panel-body">
Panel content


class="panel panel-success">
class="panel-heading">Panel heading without title

class="panel-body">
Panel content



class="col-md-10">
class="row">
class="jumbotron">
Hello, world!

...

class="btn btn-primary btn-lg" href="#" role="button">Learn more



class="col-md-8 col-md-offset-2">


"1"class="table table-striped table-hover table-bordered">






class="success">











class="danger">





序号姓名年龄部门
1张三23销售
2李四23销售
3王五23销售


class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
class="modal-dialog" role="document">
class="modal-content">
class="modal-header">

class="modal-title" id="myModalLabel">Modal title



class="modal-body">

class="form-group">

"email" class="form-control" id="exampleInputEmail1"
placeholder="Email">

class="form-group">

"password" class="form-control" id="exampleInputPassword1"
placeholder="Password">

class="form-group">

"file" id="exampleInputFile">

class="help-block">Example block-level help text here.



class="checkbox">





class="modal-footer">













View Code

 

4 表格示例


"en">

"UTF-8">

"stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
"stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">




class="container">
class="row">
class="col-md-3">
class="panel panel-primary">
class="panel-heading">Panel heading without title

class="panel-body">
Panel content


class="panel panel-info">
class="panel-heading">Panel heading without title

class="panel-body">
Panel content


class="panel panel-success">
class="panel-heading">Panel heading without title

class="panel-body">
Panel content



class="col-md-9">


class="table table-bordered table-striped">









class="tbody">






















序号姓名年龄部门操作
1张三23销售部


2李四23销售部


3王五23销售部




class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
class="modal-dialog" role="document">
class="modal-content">
class="modal-header">

class="modal-title" id="myModalLabel">Modal title



class="modal-body">

class="form-group">

"text" class="form-control" id="name"
placeholder="Name">

class="form-group">

"text" class="form-control" id="age"
placeholder="Age">

class="form-group">

<select name="" class="form-control" id="dep">



select>



class="modal-footer">










View Code

 

5 轮播图

 


"en">

"UTF-8">




class="outer">
    class="img">
  • "">"https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt="">

  • class="hide">"">"https://img12.360buyimg.com/pop/s590x470_jfs/t1/178599/8/1142/28979/6087858aE1679d862/173e0cfa2612b705.jpg.webp" alt="">

  • class="hide">"">"https://imgcps.jd.com/ling4/6038430/5Lqs5Lic5aW954mp57K-6YCJ/MuS7tjjmipgz5Lu2N-aKmA/p-5bd8253082acdd181d02fa42/9ea6716c/cr/s/q.jpg" alt="">

  • class="hide">"">"https://img12.360buyimg.com/pop/s1180x940_jfs/t1/174771/34/8431/98985/6095eaa2E8b8b4847/044f1b6318db4a9f.jpg.webp" alt="">

  • class="hide">"">"https://img11.360buyimg.com/pop/s1180x940_jfs/t1/180648/29/4209/88436/609f7547Ec7b73259/74a4d25e8d614173.jpg.webp" alt="">


    class="num">
  • class="current">






    class="btn">
  • class="left_btn"> <

  • class="right_btn"> >




View Code

 

作者：华王

博客：https://www.cnblogs.com/huahuawang/



推荐阅读
  • html

    Ionic框架在HTML5中的应用与实践

    本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具，适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件，并解释bundle.js中包含的核心功能，如路由等。 ... [详细]
  • bootstrap

    Java编程的核心要素与关键技术

    本文探讨了Java编程的核心要素，特别是其面向对象的特性，并详细介绍了Java虚拟机、类装载器体系结构、Java类文件和Java API等关键技术。这些技术使得Java成为一种功能强大且易于使用的编程语言。 ... [详细]
  • build

    Asp.net MVC 中 Bundle 配置详解：合并与压缩 JS 和 CSS 文件

    Asp.net MVC 中 Bundle 配置详解：合并与压缩 JS 和 CSS 文件
    本文深入探讨了 Asp.net MVC 中如何利用 Bundle 功能来合并和压缩 JavaScript 和 CSS 文件，提供了详细的配置步骤和示例代码，适合开发人员参考学习。 ... [详细]
  • bootstrap

    CART决策树与随机森林详解

    本文深入探讨了CART（分类与回归树）的基本原理及其在随机森林中的应用。重点介绍了CART的分裂准则、防止过拟合的方法、处理样本不平衡的策略以及其在回归问题中的应用。此外，还详细解释了随机森林的构建过程、样本均衡处理、OOB估计及特征重要性的计算。 ... [详细]
  • html

    探索Bootstrap 5中的五种表单样式

    本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式，包括输入框、选择器和文本区域等元素。 ... [详细]
  • console

    window下kafka的安装以及测试

    window下kafka的安装以及测试
    目录一、安装JDK（需要安装依赖javaJDK）二、安装Kafka三、测试参考在Windows系统上安装消息队列kafka一、安装JDKÿ ... [详细]
  • console

    Kafka Topic 数据管理与清理策略

    Kafka Topic 数据管理与清理策略
    本文探讨了在生产环境中如何有效管理和定期清理Kafka Topic中的数据。介绍了基于时间、日志大小和日志起始偏移量三种清除方式，并重点讲解了基于时间的清除策略及其配置方法。 ... [详细]
  • bootstrap

    Spring Cloud Config 配置中心请求路径未生效问题解决

    在使用 Spring Cloud Config 作为配置中心时，若在配置文件中指定了请求路径但未能生效，本文将探讨其原因及解决方案。 ... [详细]
  • html

    修复(Datepicker)：初始为空时输入验证器未被调用

    修复了Datepicker组件中，当字段值默认为null时，输入验证器直到选择日期后才被调用的问题。 ... [详细]
  • html

    前端常用的布局类型——前端布局

    前端常用的布局类型——前端布局
    1.Static静态布局固定宽高：2.Liquid流式布局宽高用百分比，按屏幕分辨率调整，布局不发生变化3.Adaptive自适应 ... [详细]
  • bootstrap

    PHP中静态类与静态变量的应用差异探讨

    PHP中静态类与静态变量的应用差异探讨
    本文深入探讨了PHP编程语言中静态类与静态变量的具体应用及其差异性，旨在帮助开发者更好地理解和运用这些概念，以提升代码质量和效率。 ... [详细]
  • html

    Web前端开发中Webpack项目的实用技巧总结

    Web前端开发中Webpack项目的实用技巧总结
    本文探讨了在使用Webpack构建前端项目时的一些实用技巧，包括如何高效地使用移动端UI框架Mint UI和MUI，以及如何优化项目性能和用户体验。 ... [详细]
  • bootstrap

    如何解决PHP中时间获取不准确的问题

    如何解决PHP中时间获取不准确的问题
    本文探讨了在PHP开发过程中遇到的时间获取错误问题，并提供了详细的解决方案，包括通过修改配置文件和编程方法来调整时区设置。 ... [详细]
  • bootstrap

    Consul 单节点与集群环境构建指南

    Consul 单节点与集群环境构建指南
    本文详细介绍了如何安装和配置 Consul 以支持服务注册与发现、健康检查等功能，包括单节点和集群环境的搭建步骤。 ... [详细]
  • html

    使用Bootstrap创建响应式渐变固定头部导航栏的方法

    使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏，包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
author-avatar
IHH_MCWONG_142
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有